Adding links on your signature using imagemap

hola! it's been a while since my last tutorial. :)
right now, i'll be sharing a tutorial on how are you goin to apply image map on your signature.
i saw a fellow member making one and i thought oh-it's-great.:)

what you need:
1. photoshop(that is, if you want to make your own signature)
2.links(your website's link,etc)
3.http://www.image-maps.com/ (this website will allow you to map your imaage in the easiest way possible)

First thing first, you should check in your preferences if your HTML is on. if not, kindly turn it on because your image-map won't work since it's an html-based code.



Now, make a signature or request on our gfx staff to make you one. Tell them what links you want to include in your signature so they can insert a logo/name of that particular website on it.
So here's mine:


pardon the bad design of signature. i made it as fast as i could. lol it's for sample anyway so i guess it's fine. XDDD

now since you have a signature, we can start mapping it. go to http://www.image-maps.com/
Clink the "Choose File" and look for your image in you pc or you can just get the url of that signature if you upload it from different site and paste it on "from a url" textbox.
I advised using the "from a url" option. because the imagemap website won't be saving your image for a long time. they'll delete after 2 days so just upload it on different website and get its url and paste it in the textbox.



Then click START MAPPING.
it will direct to another page. just look and click the "Continue to next step"

we can now start mapping. look for the "rectangle" button. this will be the shape of your link. You can use other shapes by clicking the custom shape. But I advised using the rectangle shape for less complications and less complicated explanations.lol



when you click the rectangle, options will appear. the "Link for this map" is your link. For example, if the logo is facebook, you can put there the url of your facebook acct. e.g: https://www.facebook.com/teeeeeeeeeeeeeeey
Now, the " Title/Alt for this map:" is for description of the link when you hover the logo. You can put "add me in facebook and let's be friends forever. lol" if it's your fb. lol something like that. haha

And oh, you can resize the rectangle depending on the size of your logo. click the corners and drag. :)

then clik Save.



Once done. Look and click for "GET YOUR CODE"
You will be redirected to the HELP TAB. Just look for the HTML Code tab and click it. You can find your codes there.



copy your codes and remove the unnecessary codes. you can see it in the image above.

Yeeey! we're done! so here's the final output:



if you have questions, feel free to ask :)

and oh, pardon the typo errors. i'm sleepy. zZzz :Cat Emote1:

Thanks teeey, nice tutorial.

Astig Nice tutorial

Bakit po laging "Signature too long"?
Eto po ginawa ko:


Para po kasi yan sa PLP 2 Thread ko eh ^_^

EternalFairy07 wrote:Bakit po laging "Signature too long"?
Eto po ginawa ko:

Para po kasi yan sa PLP 2 Thread ko eh ^_^

hello! :) it's probably because the forum is now limiting the signatures of the members.
anyway, binago ko na yung codes.
here, please use the codes below.

Code:

<div style="text-align:center; width:350px; margin-left:auto; margin-right:auto;">
<img id="asd" src="http://i47.tinypic.com/2nu0ls2.gif" usemap="#asd1" />
<map id="_asd" name="asd1">
<area shape="rect" coords="30,6,77,52" href="https://www.facebook.com/GCAddik.23?ref=tn_tnmn" alt="EternalFairy07 on Facebook" title="EternalFairy07 on Facebook"    />
<area shape="rect" coords="83,3,135,52" href="https://twitter.com/AoiNendo" alt="EternalFairy07 on Twitter" title="EternalFairy07 on Twitter"    />
<area shape="rect" coords="139,6,187,49" href="http://eternalfairy07.deviantart.com/" alt="EternalFairy07 on DeviantArt" title="EternalFairy07 on DeviantArt"    />
<area shape="rect" coords="188,0,345,55" href="http://www.tnmaa.net/" alt="Tambayan ng mga Anime Addicts II" title="Tambayan ng mga Anime Addicts II"    />
</map></div>

natest ko na yan as my siggy. wala na yung "your signature is too long"
further more questions? don't hesitate to ask :) thanks! :D

Question po : Ung html code po na ehco-copy ung din ang gagamitin para sa sig ?

frost3390 wrote:Question po : Ung html code po na ehco-copy ung din ang gagamitin para sa sig ?

yes po. yung html code na icocopy ang gagamitin sa signature. :)

Thanks teeey++~

Signature too long din po ung akin :
pero inalis ko po ito :

Spoiler:

fix na

thanks