Image Mapping. |
 Jun 4 2009, 09:04 PM
Post
#1
|
|
 Irrisistable Cabbages.  Group: Member Posts: 549 Joined: Nov 2007 Member No: 589,355  |
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? |
|
|
|
 |
Replies
|
Jun 4 2009, 10:00 PM
Post
#2
|
|
 Mel Blanc was allergic to carrots. Group: Official Designer Posts: 6,371 Joined: Aug 2008 Member No: 676,291 |
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. |
|
|
|
|
Jun 4 2009, 10:14 PM
Post
#3
|
|
|
Irrisistable Cabbages. Group: Member Posts: 549 Joined: Nov 2007 Member No: 589,355 |
QUOTE(Mikeplyts @ Jun 4 2009, 10:00 PM)  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? |
|
|
|
|
Jun 4 2009, 11:15 PM
Post
#4
|
|
|
Mel Blanc was allergic to carrots. Group: Official Designer Posts: 6,371 Joined: Aug 2008 Member No: 676,291 |
QUOTE(theerinkal @ Jun 4 2009, 11:14 PM) 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. |
|
|
|
|
Jun 5 2009, 01:09 AM
Post
#5
|
|
|
Irrisistable Cabbages. Group: Member Posts: 549 Joined: Nov 2007 Member No: 589,355 |
QUOTE(Mikeplyts @ Jun 4 2009, 11:15 PM) It's the two images that you put together. Okay. |
|
|
|
Posts in this topic
theerinkal Image Mapping. Jun 4 2009, 09:04 PM
Tomates they are two different images, one on top of each ... Jun 4 2009, 09:15 PM
emberfly QUOTE(Tomates @ Jun 4 2009, 09:15 PM) the... Jun 4 2009, 09:19 PM schizo Oh hey. It's my site.
I actually have a tuto... Jun 4 2009, 10:35 PM emberfly Why do you put them on top of each other? What mak... Jun 4 2009, 10:42 PM Mikeplyts QUOTE(emberfly @ Jun 4 2009, 11:42 PM) Wh... Jun 4 2009, 10:48 PM schizo QUOTE(emberfly @ Jun 4 2009, 10:42 PM) Wh... Jun 4 2009, 10:58 PM theerinkal Thanks. Jun 4 2009, 10:46 PM emberfly WOW O_O that code would have helped me so effin... Jun 4 2009, 10:51 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: