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
(1 - 12)
|
Jun 4 2009, 09:15 PM
Post
#2
|
|
 poison Group: Official Member Posts: 4,806 Joined: Mar 2008 Member No: 629,020 |
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 |
|
|
|
|
Jun 4 2009, 09:19 PM
Post
#3
|
|
 kthxbai Group: Official Designer Posts: 2,832 Joined: Feb 2008 Member No: 621,203 |
QUOTE(Tomates @ Jun 4 2009, 09:15 PM)  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. |
|
|
|
|
Jun 4 2009, 10:00 PM
Post
#4
|
|
 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
#5
|
|
|
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, 10:35 PM
Post
#6
|
|
 Senior Member Group: Staff Alumni Posts: 2,435 Joined: Feb 2007 Member No: 506,205 |
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 |
|
|
|
|
Jun 4 2009, 10:42 PM
Post
#7
|
|
|
kthxbai Group: Official Designer Posts: 2,832 Joined: Feb 2008 Member No: 621,203 |
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' |
|
|
|
|
Jun 4 2009, 10:46 PM
Post
#8
|
|
|
Irrisistable Cabbages. Group: Member Posts: 549 Joined: Nov 2007 Member No: 589,355 |
Thanks.
|
|
|
|
|
Jun 4 2009, 10:48 PM
Post
#9
|
|
|
Mel Blanc was allergic to carrots. Group: Official Designer Posts: 6,371 Joined: Aug 2008 Member No: 676,291 |
QUOTE(emberfly @ Jun 4 2009, 11:42 PM) 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;}
|
|
|
|
|
Jun 4 2009, 10:51 PM
Post
#10
|
|
|
kthxbai Group: Official Designer Posts: 2,832 Joined: Feb 2008 Member No: 621,203 |
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 |
|
|
|
|
Jun 4 2009, 10:58 PM
Post
#11
|
|
|
Senior Member Group: Staff Alumni Posts: 2,435 Joined: Feb 2007 Member No: 506,205 |
QUOTE(emberfly @ Jun 4 2009, 10:42 PM) 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. |
|
|
|
|
Jun 4 2009, 11:15 PM
Post
#12
|
|
|
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
#13
|
|
|
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. |
|
|
|
 |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: