stevefata.com is what i am working on. in the content i have 3 buttons (About me, Education, Employment) when you click on one of those buttons that page will display to the right of the buttons. I did this with a javascript code and it looks like this... <head> <script type="text/javascript"> function changeSource(page) { document.getElementById("frame1").src=page; } </script> </head> <body onload="changeSource('http://www.stevefata.com/aboutme.php');"> <input type="image" onClick="changeSource('http://www.stevefata.com/aboutme.php');" value="about me" src="http://www.stevefata.com/images/aboutme.jpg"> <input type="image" onClick="changeSource('http://www.stevefata.com/education.php');" value="Test Page" src="http://www.stevefata.com/images/ed.jpg"> <input type="image" onClick="changeSource('http://www.stevefata.com/employment.php');" value="Test Page" src="http://www.stevefata.com/images/employ.jpg"> HTML: that works fine but my issue is that those buttons to the right have hover images to them and I can not for the life of me figure out how to add the hover image to the buttons using the script above. I need it to hove but i need it to do the page thing at the same time...HOW?? I made javascript rollover buttons but i dont know how to combine the 2 codes together <head> <script type="text/javascript" src="script.js"> // Copyright 2006-2007 javascript-array.com var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; </script> <script language="javascript"> image1 = new Image(); image1.src = "http://www.stevefata.com/images/aboutmehov.jpg"; image2 = new Image(); image2.src = "http://www.stevefata.com/images/edhover.jpg"; image3 = new Image(); image3.src = "http://www.stevefata.com/images/employhov.jpg"; </script> </head> <script type="text/javascript"> <a href="http://www.stevefata.com/aboutme.php" onmouseover="image1.src='http://www.stevefata.com/images/aboutmehov.jpg';" onmouseout="image1.src='http://www.stevefata.com/images/aboutme.jpg';"> <img name="image1" src="http://www.stevefata.com/images/aboutme.jpg" border=0></a> <a href="http://www.stevefata.com/education.php" onmouseover="image2.src='http://www.stevefata.com/images/edhover.jpg';" onmouseout="image2.src='http://www.stevefata.com/images/ed.jpg';"> <img name="image2" src="http://www.stevefata.com/images/ed.jpg" border=0></a> <a href="http://www.stevefata.com/employment.php" onmouseover="image3.src='http://www.stevefata.com/images/employhov.jpg';" onmouseout="image3.src='http://www.stevefata.com/images/employ.jpg';"> <img name="image3" src="http://www.stevefata.com/images/employ.jpg" border=0></a> HTML: anyone can show me how to combine the 2?? or maybe show me how to do it with CSS? i couldnt do it like that either...
Why don't you consider doing the rollover with CSS instead? Then to make the buttons appear you could use JavaScript to do a show hide on the element.
yea i mentioned i tried that... i couldnt figure out how to do it correctly... im not an expert at this stuff... i may have been tagging it wrong or something but maybe you can help... the top code i gave is what is on the site now... if you can help me set a class to that so the CSS will work for it then that would be great
Do you have a link to the current site? I am trying to picture how you are opening the new buttons. Is it on the click of another button, or are they just printed on the site to begin with?
what am i doing wrong here.... <style> #menu1 a:hover { background-image: url(images/aboutmehov.jpg); color: #ffffff; height:82px; width:362px; display:block; } </style> <input type="image" onClick="changeSource('http://www.stevefata.com/aboutme.php');" value="about me" src="http://www.stevefata.com/images/aboutme.jpg" class="menu1"> HTML:
i left out the stuff in the head.... i am only worrying about the css... trying to do the rollover with css but cant get it
This frame version one below, might look a lot different from yours, but works quite well in my FF, Opera, Safari, & Chrome (sadly not IE8 ). Hope it'll give you a hint. index.html, the frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>index.html</title> </head> <FRAMESET cols="384,*"> <FRAME src="navi.htm"> <FRAME id="frame1" name="dynamic" frameborder="1" src="http://www.stevefata.com/aboutme.php"> <NOFRAMES> <P>This frameset document contains: <A href="http://www.stevefata.com/aboutme.php">about me</A> </NOFRAMES> </FRAMESET> </html> PHP: navi.htm, the frame file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>navi.htm</title> <style type="text/css"> body{ background-color: gray; } a{ display: block; margin-top: 1em; width: 362px; height: 81px; background-repeat: no-repeat; } #aboutme{ background-image: url(http://www.stevefata.com/images/aboutme.jpg); } #aboutme:hover{ background-image: url(http://www.stevefata.com/images/aboutmehov.jpg);} #ed{ background-image: url(http://www.stevefata.com/images/ed.jpg); } #ed:hover{ background-image: url(http://www.stevefata.com/images/edhover.jpg); } #employ{ background-image: url(http://www.stevefata.com/images/employ.jpg); } #employ:hover{ background-image: url(http://www.stevefata.com/images/employhov.jpg);} </style> </head> <body> <a id="aboutme" href="http://www.stevefata.com/aboutme.php" target="dynamic"></a> <a id="ed" href="http://www.stevefata.com/education.php" target="dynamic"></a> <a id="employ" href="http://www.stevefata.com/employment.php" target="dynamic"></a> </body> </html> PHP: