Adding links Navigation image, Help! Options

[Keriana]

Hi! Ok so it's my first attempt at trying to make a div layout...well any layout actually! I pretty much can understand everything in the tutorials and posts I've read on here. But I dont understand how to add my navigation links...(home, pics etc) Here's my tester profile myspace.com/kerrytester. Don't pay attention to the content! Lol It sucks just trying to figure everything out before I go back and resize everything!

So you can see I already have my "links" set up how and where I want them in the image. How do I make them into links? Any help would be appreciated! Thank you in advance!

[*SinfullySweet*]

That is image mapping. The best and easiet way to do this is using adobe image ready. Here is a tutorial

http://www.createblog.com/tutorials/tutorial.php?id=168

[Keriana]

AHH! Lol Ok! I tried slicing them last night but then had no idea what to do with them! So oncee I have them all sliced and ready to go where can I find a script to to put it into my layout? I'm also kind of confused on where to put stuff as in what goes in the about me and or who i'd like to meet. Thank you for your help! I love your designs by the way!! I'm using one as of today! Thank you!

[*SinfullySweet*]

^No script needed. Once you have your image mapping done, go to the top of image ready, clikc "edit" and hover over "Copy html code" Then choose either options. That will autmotically copy all the coordiantes to your clipboard. All you have to is replace the image link. For example

<img src="images/rainbow.png" width="533" height="329" border="0" alt="" usemap="#rainbow_Map">
<map name="rainbow_Map">
<area shape="rect" alt="" coords="90,229,135,243" href="#">
</map>

Do you see the bolded link? Just change that with a valid image url.


And thankyou!

[Keriana]

Sorry that I"m being annoying! But...I put that into my who I'd like to meet section? And also, since I'm using imageready...can I use rollovers that I create in Imageready?

[*SinfullySweet*]

If you want hovers on your layout, than there is no need for image mapping. You'd have to remove the navigation link text on your main div image.

To make hover, you'd have to use two images, in the same image.

For example, this image


Do you see how, in the top image, it is normal, while in the bottom image, has a stoke? This is how you would make a image hover.

.home {position:top left; display:block; background-color:transparent; width:##(width of image used); heigh:##(height of image used)}

The, for the hover, you would put

.home: hover {background-position:bottom left;}


Then, go into the who i'd like to meet. Make a link like this.
<a href="LINK HERE" class="HOME"></a>
^The class is extremely important, and that is what will make it hover.

[Keriana]

I'm sorry! Ok so if I have the two images, do I layer them one on top of another? I guess I'm confused about the "two images in one". I get the concept in general but that phrase confused me!

[*SinfullySweet*]

No, you don't need to add any layers.

^What I mean, is that you have 1 image. But, you have the same thing two times in that image. Just the bottom image, has what you want to hover. For example.

<--- That is one image.

But using the css I gave in the post above, ONLY HALF of the image will display.

Now look. In the css given, you are supposed to put HALF of the height and width of the image. For example. An image is 100x100. Then for this

.home {width:50px; height:50px;position:top left}


Since we gave half of the orignal image, this will tell the css to only display the top half of the image.



Then, here comes the hover css.

.home {position:bottom left;}

This now tells it to show the BOTTOM half of the image, which is this.



Am I making any sense? If you dont understand, AIM me. ANGiiE POO

The finished product is this.

---> hover is

Am I making any sense? If you dont understand, AIM me. ANGiiE POO

[Keriana]

Oh! Yeah that cleared it all up!! I totally understand now!! Thanks again!

[*SinfullySweet*]

No problemo