Here's the code you’ll be working with. After finishing the code, it’ll go in your custom header box in your Look and Feel. You will change the customize this code to your own personal liking.


<IMG SRC="YOUR IMAGE URL" USEMAP="#YOUR MAP NAME">
<MAP NAME="YOUR MAP NAME">
<AREA SHAPE="rect" ALT="Caption" COORDS="0, 1, 2, 3" HREF="LINK">
<AREA SHAPE="rect" ALT="Caption" COORDS="0, 1, 2, 3" HREF="LINK">
<AREA SHAPE="rect" ALT="Caption" COORDS="0, 1, 2, 3" href="LINK">
<AREA SHAPE="rect" ALT="Caption" COORDS="0, 1, 2, 3" HREF="LINK">
<AREA SHAPE="rect" ALT="Caption" COORDS="0, 1, 2, 3" href="LINK">
</MAP>

Notice-
-First off you need to make your custom header in MS Paint or Photoshop or something. Try not to steal other peoples art work for your custom header. If you insist on editing someone else’s work for your custom header, the least you can do is give them credit for their own work.

-Using a text box, add your text for your links or buttons ( in MS Paint this can get tricky with centering and everything ). Remember that you can copy and paste those lines so you can make data for more buttons. In fact, if you make a decent header at all, chances are you’ll have to copy and paste more lines of code for more buttons.

-Then you upload your header to an image hosting site like Photobucket or xs.to (I love it cause it hosts larger images). ( Check out Image Hosting Sites for an extended list of other image hosting sites out there. )

-There are two codes up there, the space is separating them, I think the IMAGE NAME synchronizes them so they both work right… Make sure you have that "#" symbol in the first MAP NAME ( USEMAP="#YOUR MAP NAME"> ), cause for some reason, without it, your header wont work at all...

-Where it says “Caption”, that’s where you put your captions… go figure lol… you know those bubbles that sometimes pop up if you’ve hovered over a link long enough? Change the words in “Caption” to change the caption lol… pretty self-explanatory…

-----------------------------------------------------------------

Image Mapping –
This is what people seem to call image mapping. It’s finding coordinates for link buttons on a custom header picture. Basically what this tutorial teaches you is how to put more than one link in a Link Button. This may get confusing, so ask me if you have any questions. I'm horrible at explaining things so I'll do the best I can.


First: Open your image in MS Paint and hover your cursor over the left edge of where you want your link edge to be, or “button”. The coordinates will appear near the right side of your status bar. (on the bottom) It will look something like this –


The first number is the number of pixels from the left and the second is the number of pixels from the top.

Hover your cursors on the left side of your button, then look at the first number in your status bar. You put that number in the first part of the 4 number coordinates… here this should make it easier…
*COORDS="LEFT, TOP, RIGHT, BOTTOM" ( if you would ever take notes, this is what you would write down. )

Ex: “0,130,115,157”

*Left side – look at first number in status bar, first number in coords

*Top side – look at second number in status bar, second number in coords

(when you click on the right side of your "button" ...

*Right side – look at first number in status bar, third number in coords

*Bottom side – look at second number in status bar, forth number in coords

Left - How far the left side of the 'button' is from the left of the image
Top - How far down the top of the 'button' is from the top of the image
Right - How far the right side of the 'button' is from the left of the image
Bottom - How far the bottom part of the 'button' is from the top of the image

So the coords to this 'link me' button would be: COORDS="84, 219, 222, 250"

TIP- If you have a straight line of buttons, then your top and bottom coords are gonna be the same all the way down. Also if your buttons are right next to each other, your third (right) coord is gonna be the same as the next buttons first (left) coord. These two tips will help you save time on finding the coordinates for headers like this.

Also, if you have vertical buttons ( buttons that are stacked up on top of each other ), then it’s kind of the same drill just different coords that are the same. You’ll get the hang of it. It’s easier to understand than it is to explain. Just try it.

After all of that, then you simply put the URL’s of your links in the code where it says “LINK”>

I hope that helps you with image mapping, like I said I am kinda bad at explaining things so if you need more help, feel free to ask me! :)

<<---- back to visitors

advertise?

Marissa Amanda Mimi Ashley Gnorb Aurelia Jhaye Emily Nicole Luana Christina Natascha AnMarie Morgan Trish MOMS Forum

Apply???

<a href="http://tearsmist.com/index.html"> <img src="http://tearsmist.com/butfam.jpg" border="0"> </a>

Opened:
June 30th, 2007
Best Viewed
Internet Explorer
Screen Resolution:
800x600
Layout:
Ver: 7, Spring Blossoms
Host:
Fort Onion
Total Hits since July 18:
hits
Online Now?
watching right now!