Jump to content

Hoverover Button Change


PsychoNerd
 Share

Recommended Posts

ok, so im doing a Information Procesesses and Technology and am developing a website about myself using a CSS style ive made. I'm developing it in Microsoft Expression Web and am trying to make it so when i hover over my buttons they change to a different button image (so it looks like a light has come one behind it)ive tried the example javascript on the w3schools site buuut, well it didn't work, thats why im here!I dont know what im doing wrong or what i have to change to get my desired result. HALP!

Link to comment
Share on other sites

dont require javascript for this.typical hover button setup: two images (image 1)normal button (image 2)hover button, size 100px x 30px (in bold, adjust to your requirments).ul#menu1 li a{ display:block; background:url(button_normal.png) no-repeat top; height: 30px; width: 100px; float: left; text-align:center; color:#EEE; margin: 0 2px; line-height: 30px; text-decoration:none;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">body {font-size: 100%;}ul {list-style-type:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 80%;}ul li {float:left;}ul#menu1 li a{ display:block; background:url(button_normal.png) no-repeat top; height: 30px; width: 100px; float: left; text-align:center; color:#EEE; margin: 0 2px; line-height: 30px; text-decoration:none;}ul#menu1 li a:hover{ background:url(button_hover.png); color: #FFF;}</style></head><body><ul id="menu1"><li><a href="#">Button 1</a></li><li><a href="#">Button 2</a></li><li><a href="#">Button 3</a></li><li><a href="#">Button 4</a></li></ul><div style="clear:both;"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html>

Edited by dsonesuk
Link to comment
Share on other sites

dont require javascript for this.typical hover button setup: two images (image 1)normal button (image 2)hover button, size 100px x 30px (in bold, adjust to your requirments).ul#menu1 li a{ display:block; background:url(button_normal.png) no-repeat top; height: 30px; width: 100px; float: left; text-align:center; color:#EEE; margin: 0 2px; line-height: 30px; text-decoration:none;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">body {font-size: 100%;}ul {list-style-type:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 80%;}ul li {float:left;}ul#menu1 li a{ display:block; background:url(button_normal.png) no-repeat top; height: 30px; width: 100px; float: left; text-align:center; color:#EEE; margin: 0 2px; line-height: 30px; text-decoration:none;}ul#menu1 li a:hover{ background:url(button_hover.png); color: #FFF;}</style></head><body><ul id="menu1"><li><a href="#">Button 1</a></li><li><a href="#">Button 2</a></li><li><a href="#">Button 3</a></li><li><a href="#">Button 4</a></li></ul><div style="clear:both;"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html>
mmm, im having trouble understanding :) i have already created buttons in photoshop and just want the two images to switch between eachother with a onmouseover/offmouseover event
Link to comment
Share on other sites

This is exactly what this setup will do.normal/offmouseover event button image: replace below bold text to reference of your own 'offmouseover event' button image.replace height: 30px;,line-height: 30px; with the height of your 'offmouseover event' button image.replace width: 100px; with the width of your 'offmouseover event' button image.ul#menu1 li a{ display:block; background:url(button_normal.png) no-repeat top; height: 30px; width: 100px; float: left; text-align:center; color:#EEE; margin: 0 2px; line-height: 30px; text-decoration:none;}hover/onmouseover event button image: replace below bold text to reference of your own 'onmouseover event' button image.ul#menu1 li a:hover{ background:url(button_hover.png); color: #FFF;}Where the button images are assigned to:the background-images are assigned to the anchors within the listing elements '<a href="#">Button 1</a>'<li><a href="#">Button 1</a></li><li><a href="#">Button 2</a></li><li><a href="#">Button 3</a></li><li><a href="#">Button 4</a></li>That will produce this effect: beforebuttonnormalnocursor.pngafterbuttonhovercursor.png

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...