How to Make an Image Rollover in CSS and Adobe Illustrator

[alexduhail]

Thank you man, it helps me a lot!! Nice vid, simple and effective !

[teamcastanedas]

Hey, can you add an active state to an image? Basically, I want the rollover to stick until another link is clicked.

Here is my code that I tried:

a.sign3{ display:block; width:156px; height:55px; text-indent:-5000px; text-decoration:none; background-image: url(../images/signs/3.png);

}

a:hover.sign3{ background-position:-156px 0; background-image: url(../images/signs/3ro.png);

}

a:active.sign3{ background-position:-156px 0; background-image: url(../images/signs/3ro.png);

}

Thanks!

[kangomedia]

@teamcastanedas @teamcastanedas @teamcastanedas I would recommend adding a class of "current" or "active" to the menu items. So, for example, you might have:

a:hover.sign3, a.sign3.current {background-position:-156px 0; background-image: url(../images/signs/3ro.png);}

Now your hyperlink must have the "current" class too.

Hope that helps.

- Freddy

[khsana04]

it works with firefox, but at chrome it display only the text "home" with decoration also

[bruceaisher]

This is PERFECT. Exactly what I was looking for and it worked perfectly. Thanks so much man.

[kangomedia]

@bruceaisher no prob man. anything i can do to help.

[terrcraft18]

ive been learning html code and i must say i found this fairly useful in creating a test site

[kangomedia]

@terrcraft18 Thanks. I appreciate it.

[TheSxNxP]

I am I just cant seem to get this to work Ive done every this right down to the from the code to the image I just cant seem to get this to work if anybody has any ideas please help

[AndroidAndr3w]

@TheSxNxP Surely you have solved the problem by now but I want to comment to help others. If you copy the HTML straight from the website you get a lot of additional junk that you dont need. You can clean the code by using firebug, you can check and edit in browser. Or code it manually. Or use a html scrubber.

[HawxTeamDelta]

thanks.. 

[graphmyster]

Hey, Freddy, thanks for your tutorial. Your system of instructing is outstanding.

[LBProductions511]

thank you soo much. how do you make it so when they click on it the url goes to a new tab or window instead of having it open in the same page

[kangomedia]

@LBProductions511 Simply insert target="_blank" into the hyperlink.

[LBProductions511]

@kangomedia around what? sorry im really new at this. i know what the hyperlink is but idk like exactly where the target="_blank" goes. like what comes before it and after?

[iharrington]

Simple, explained clear and slow, and I can see what you were doing. Thanks, man. Way better than most out there. The text indent trick was one I was looking for forever and couldn't figure out...I couldn't get how people were getting images to show up with no content in the div. This explains it. Thanks!

[LordMordrag]

that was good, but can u make a tutorial about a drop down menu with rollover buttons? i would really apreciate it. thx. good work by the way :)

[EricD12]

does anyone know how to put a css rollover image in myspace? please help me :(

[bebright02]

I only get the words in my html page and not the image. Maybe I am not using the right path for my image Help!!!

[jadedconformist]

This helped me a lot. I appreciate it.

[ATLNothingPersonal]

This is an awesome tut, you should do some on html and css, you'll get so many views coz this is good stuff :D

[opeewann]

What happened to your website dude?

[dblaps]

cant see what your writing, its annoying. Good tutorial otherwise.

[opeewann]

Well spoken. Thanks for this! Much Appreciated.

I spent the last hour trying to discover a tutorial just like yours.

For the post above, try watching it in "high quality", I could see what he was doing far better.

[DallasCowboys94Ware]

Hey dude, click on "Watch in High Quality", then fullscreen that badboy, you'll see the code properly.