Image Mapping. Options

[theerinkal]

I know how to image map on GIMP but I don't understand how you would go about making different colors on the links like on Atomic Affliction (btw, nice job!).

How do you do that?

[Tomates]

they are two different images, one on top of each other known as a roll over. From what im aware of you dont have to use gimp to make them...exept for the text.
Anyways there are some tutorials on here on how to do them

[emberfly]

they are two different images, one on top of each other known as a roll over. From what im aware of you dont have to use gimp to make them...exept for the text.
Anyways there are some tutorials on here on how to do them

all the tutorials on here confuse me. I don't know how to do them either.

[Mikeplyts]

It's so simple.

You just take two images, put them together, and set the combined image as a background image on a link class. The hover class would be the one where you put the rollover image part of the combined image and the regular class is the normal image part of the combined image. You put the regular on top of the rollover one so then when you rollover, it shows the bottom part of the image. You take half the height of the combined image so that it only shows either the top half or the bottom half.

As so:

CODE

.LINK_CLASS_NAME {display:block; width:???px; height:HALF_OF_YOUR_COMBINED_IMAGE_HEIGHTpx; background-image: url("COMBINED_IMAGE_URL"); background-repeat:none; background-position:top left;}
.LINK_CLASS_NAME:hover {display:block; width:???px; height:HALF_OF_YOUR_COMBINED_IMAGE_HEIGHTpx; background-image: url("COMBINED_IMAGE_URL"); background-repeat:none; background-position:bottom left;}

If you observe it carefully, you can see how it would work out.

[theerinkal]

It's so simple.

You just take two images, put them together, and set the combined image as a background image on a link class. The hover class would be the one where you put the rollover image part of the combined image and the regular class is the normal image part of the combined image. You put the regular on top of the rollover one so then when you rollover, it shows the bottom part of the image. You take half the height of the combined image so that it only shows either the top half or the bottom half.

What is the "combined image"? Is it the image of the text itself or is it the whole background image?

[schizo]

Oh hey. It's my site.

I actually have a tutorial on them. They're super easy, but they could take awhile sometimes.

http://atomicaffliction.com/coding7.php

[emberfly]

Why do you put them on top of each other? What makes it work like that?

What does Z-index do?

@ schizo....... what font did you use in your layout? :3 The one that says 'atomic affliction'

[theerinkal]

Thanks.

[Mikeplyts]

Why do you put them on top of each other? What makes it work like that?

What does Z-index do?

z-index displays what appears on top of what. If one class has a higher z-index than another, then the higher z-index class will appear on top of the one that has the lower z-index.

I.E. -

This class will appear on top of the other class.

CODE

.CLASS {z-index:2;}

And this is the other class.

CODE

.OTHER_CLASS {z-index:1;}

[emberfly]

WOW O_O that code would have helped me so effin' much when I was trying to figure out how to code stuff for xanga.. >.<

Thanks! :D

[schizo]

Why do you put them on top of each other? What makes it work like that?

What does Z-index do?

@ schizo....... what font did you use in your layout? :3 The one that says 'atomic affliction'

The code causes the image to change position on rollover. It shows the top half before you roll over it, and since the background position property is changed to "bottom left" for the hover, it then shows the bottom half. That's not a very good explanation, but that's the best I have right now.

And the font is Holiday India.

[Mikeplyts]

What is the "combined image"? Is it the image of the text itself or is it the whole background image?

It's the two images that you put together.

[theerinkal]

It's the two images that you put together.

Okay.