Follow the steps below to create the illusion of “two” different images by only using one. hover over the example below:
1. open an image in photoshop.
- in this example we’ll be using an image with the dimensions:
90×76 — 90px (width) and 76px (height):
2. double click the background layer and click “OK” on the popup box.
3. now push Alt+Ctrl+C on the keyboard.
- make sure the size is in pixels and not inches or percent.
- make note of the dimensions (important, needed later!)
- now double the width and click the middle left arrow (see below)
4. duplicate the layer.
- do this by click on the menu bar: Layer >> Duplicate Layer
5. make sure the duplicated layer is highlighted:
6. press Ctrl+A (to select all)
7. press V (to select the move tool)
8. right below the menu bar there’s an align menu. click the one shown below.
you now should have something that looks like this:
9. press Ctrl+D to deselect everything.
10. edit the image on the right however you want and SAVE!
- i just added a green tint for example.
11. host the image somewhere..
12. now add a blank link somewhere on your page by adding this:
<a href="http://myspace.com/joyboner" class="img01"> </a>
- i gave it a class name “img01″, you can name it whatever you want..
- just make sure it matches the codes in step 13!
13. Add this code within your style tags:
a.img01 {
display:block;
background-position:top left;
height:76px;
width:90px;
background-image:url(http://url_to_image_in_step_11.gif);
}
a.img01:hover {background-position: top right;}
- the height and width are the same as the original picture in step 1.
Very Helpful and easy. Nice one.
I love green!
Great tut- maybe put an example at the end?
the example is right in the beginning. hover over the very first image at the top.
having trouble making it work…
Is that a pickle?
i tried it..but for some reason the image doesnt show on my page at all….
:-/
anyone can help me?
Aim : WickedMindStatus
dude i tried that 8 people on your top eight that you can name and it didnt work so yeah.
help:aim-cheerleaderx23
I’m using a similar way to get the rollover effect but my main problem is getting images to be placed side by side in a DIV. Instead of filling the DIV by going side by side (I add no extra breaks or anything) they stack vertically and mess everything up. :( Any easy fix?
I’m having the same problem with the vertical stack…
Looks like you have to chage the coding from display:block to display:inline
Try This Code It Works Well On Both IE And Firefox
—————————————————————–
a.rollover:link, a.rollover:active,a.rollover:visited{
background-image:url(’NORMAL IMAGE URL’);
display:block !important;
height:202px;
width:150px;
}
a.rollover:hover{
background-image:url(’HOVER IMAGE URL’);
display:block;
}
——————————————————————–
(YOU CAN USE THIS IN NORMAL OR DIV VERSION)
——————————————————————-
lol
what in the f*ckin hell is that picture of. . .o.O
After countless attempts at a just a g*ddamn frickin’ mouseover image on MySpace (whose inability to use Java makes it rather annoying), trying a ridiculous amount of tutorials, and hours of frustration… FINALLY– *this* works! Thank you. I can finally go to sleep now, lol.
i have no clue what any of you guys did or how to solve my problem!!
okay so ive been trying to place 2 seperate pictures of 2 different things with the image rollover but the second one screws everything up grrr.
HELP PLEASEE
css layer examples / properties and layer attributes
http://css-lessons.ucoz.com/cs.....erties.htm
Try this:
<style>
img.hover {display:none;border:0;}
A:hover img.hover {display:inline;}
A:hover img.nohover {display:none;}
</style>
<A HREF=”#”>
<img src=”button1.gif” class=”nohover” border=0>
<img src=”button2.gif” class=”hover” border=0>
</A>