PsychoNerd Posted August 31, 2009 Share Posted August 31, 2009 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 More sharing options...
dsonesuk Posted August 31, 2009 Share Posted August 31, 2009 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> Link to comment Share on other sites More sharing options...
PsychoNerd Posted August 31, 2009 Author Share Posted August 31, 2009 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 More sharing options...
dsonesuk Posted August 31, 2009 Share Posted August 31, 2009 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: beforeafter Link to comment Share on other sites More sharing options...
PsychoNerd Posted September 1, 2009 Author Share Posted September 1, 2009 oh cool! ok, thanks ^^ that helped alot! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.