How to Make an Image Rollover in CSS and Adobe Illustrator

This quick tutorial shows you basic steps to create a rollover button in Adobe Illustrator and then code it in HTML and CSS. http://webdizeo.com

Category:

Howto & Style

Tags:

• rollover
• mouseover
• css
• html
• adobe
• illustrator

[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

[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.

[alexduhail]

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

[khsana04]

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

[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.

[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