jnf555 Posted January 28, 2012 Share Posted January 28, 2012 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript">var mouseover1 = "click here to see quiz info!!!";var mouseout1 = "Quiz<br>Night";var mouseover2 = "click here to see karaoke info!!!";var mouseout2 = "karaoke<br>Night";function showtext1(){document.getElementById("box1").innerHTML = mouseover1;document.getElementById("box1").parentNode.className = "links2";}function hidetext1(){document.getElementById("box1").innerHTML = mouseout1;document.getElementById("box1").parentNode.className = "links";}function showtext2(){document.getElementById("box2").innerHTML = mouseover2;document.getElementById("box2").parentNode.className = "links2";}function hidetext2(){document.getElementById("box2").innerHTML = mouseout2;document.getElementById("box2").parentNode.className = "links";}</script><style type="text/css">#container{width:900px;height:140px;background-color:red;}.links a, .links2 a{text-align:center;display:block;text-decoration:none;color:white;background-color:gray;width:95px;height:90px;border:1px solid white;font-family:verdana;box-shadow: 10px 10px 5px gray;margin:10px;float:left;}.links2 a{color:black;background-color:white;border:1px solid black;width:105px;height:95px;}</style></head><body><div id="container"><div class="links"><a href="#" onmouseover="showtext1()" onmouseout="hidetext1()" id="box1">Quiz<br>Night</a></div><div class="links"><a href="#" onmouseover="showtext2()" onmouseout="hidetext2()" id="box2">karaoke<br>Night</a></div></div><!---container end---></body></html> hi this is a sample of what i am trying to add to my site. can anyone tell me how to stop the second box from moving when the first one is mousedover. the only way i can think of is a seperate container thanks jnf555 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 28, 2012 Share Posted January 28, 2012 give the first box a right margin of 20px (105-95 + 10px margin already using), then reset to margin:10px ; when moused over using the class name .links a, .links2 a{text-align:center;display:block;text-decoration:none;color:white;background-color:gray;width:95px;height:90px;border:1px solid white;font-family:verdana;box-shadow: 10px 10px 5px gray;margin:10px 20px 10px 10px; /*amended by dsonesuk */float:left;}.links2 a{color:black;background-color:white;border:1px solid black;width:105px;height:95px;margin:10px; /*added by dsonesuk */} Link to comment Share on other sites More sharing options...
jnf555 Posted January 28, 2012 Author Share Posted January 28, 2012 brilliant, thank you Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.