I have made a simple Javascript on hover effect so when you hover a div the text is then displayed in the div below, but in IE7 only a random few will work such as 1,2,3,4,27,28 and a few others the rest just do not work?
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}
else {document[whichMenu].visibility = whatState;}
}
function details(what){
myInfo={
"s1":"Flaunchin",
"s2":"Chimney stack",
"s3":"Ridge",
"s4":"Flashing",
"s5":"Barge board",
"s6":"Dormer",
"s7":"Water tabling",
"s8":"Purlin",
"s9":"Wall Plate",
"s10":"Rafters",
"s11":"Soffit",
"s12":"Insulation",
"s13":"Cold Water Storage Tank",
"s14":"Central Heating Header Tank",
"s15":"Felt and Battens",
"s16":"Slating or Tiling",
"s17":"Hip",
"s18":"Fascia or Eaves",
"s19":"Timber Stud Wall",
"s20":"Floor Joists",
"s21":"Hot Water Cylinder",
"s22":"Overflow Pipe",
"s23":"Cavity Brick or Block Wall",
"s24":"Wall Ties",
"s25":"Quoin Stone",
"s26":"Gutter and Rain Water Pipe",
"s27":"Felt with Stone Chippings on Decking",
"s28":"Fair Faced Brickwork",
"s29":"Damp Proof Course",
"s30":"Hardcore",
"s31":"Reveal",
"s32":"Timber, Concrete or Steel Lintel",
"s33":"Air Brick",
"s34":"Concrete Slab",
"s35":"Gulley with Granting",
"s36":"Soil and Vent Pipe",
"s37":"Manhole",
"s38":"Electricity Main",
"s39":"Solid Wall",
"s40":"Wall Plates on Sleeper Wall",
"s41":"Foul Drain",
"s42a":"Underpinning",
"s42b":"Underpinning",
"s43":"Interceptor Trap",
"s44":"Water Main"
}
detailsBox.innerHTML=myInfo[what]
}
</script>
<style>
body{width:980px;height:100%;margin:auto;margin-top:20px}
#imagebg{background:url(house.png);height:640px;width:715px;margin:auto}
.s1{width:20px;height:10px;margin-left:383px;margin-top:-615px}
.s2{width:20px;height:10px;margin-left:365px;margin-top:21px}
.s3{width:20px;height:10px;margin-left:430px;margin-top:-4px}
.s4{width:20px;height:10px;margin-left:380px;margin-top:12px}
.s5{width:20px;height:10px;margin-left:561px;margin-top:-5px}
.s6{width:20px;height:10px;margin-left:445px;margin-top:27px}
.s7{width:20px;height:10px;margin-left:320px;margin-top:-27px}
.s8{width:20px;height:10px;margin-left:380px;margin-top:30px}
.s9{width:20px;height:10px;margin-left:297px;margin-top:42px}
.s10{width:20px;height:10px;margin-left:355px;margin-top:-44px}
.s11{width:20px;height:10px;margin-left:339px;margin-top:31px}
.s12{width:20px;height:10px;margin-left:410px;margin-top:-37px}
.s13{width:20px;height:10px;margin-left:410px;margin-top:17px}
.s14{width:20px;height:10px;margin-left:452px;margin-top:15px}
.s15{width:20px;height:10px;margin-left:536px;margin-top:-74px}
.s16{width:20px;height:10px;margin-left:585px;margin-top:-29px}
.s17{width:20px;height:10px;margin-left:590px;margin-top:-35px}
.s18{width:20px;height:10px;margin-left:693px;margin-top:70px}
.s19{width:20px;height:10px;margin-left:636px;margin-top:41px}
.s20{width:20px;height:10px;margin-left:655px;margin-top:70px}
.s21{width:20px;height:10px;margin-left:475px;margin-top:-36px}
.s22{width:20px;height:10px;margin-left:448px;margin-top:22px}
.s23{width:20px;height:10px;margin-left:328px;margin-top:-105px}
.s24{width:20px;height:10px;margin-left:311px;margin-top:31px}
.s25{width:20px;height:10px;margin-left:278px;margin-top:-56px}
.s26{width:20px;height:10px;margin-left:267px;margin-top:26px}
.s27{width:20px;height:10px;margin-left:234px;margin-top:-23px}
.s28{width:20px;height:10px;margin-left:214px;margin-top:38px}
.s29{width:20px;height:10px;margin-left:204px;margin-top:43px}
.s30{width:20px;height:10px;margin-left:197px;margin-top:82px}
.s31{width:20px;height:10px;margin-left:300px;margin-top:-99px}
.s32{width:20px;height:10px;margin-left:328px;margin-top:-19px}
.s33{width:20px;height:10px;margin-left:327px;margin-top:60px}
.s34{width:20px;height:10px;margin-left:395px;margin-top:32px}
.s35{width:20px;height:10px;margin-left:423px;margin-top:33px}
.s36{width:20px;height:10px;margin-left:462px;margin-top:-90px}
.s37{width:20px;height:10px;margin-left:539px;margin-top:141px}
.s38{width:20px;height:10px;margin-left:585px;margin-top:-102px}
.s39{width:20px;height:10px;margin-left:589px;margin-top:-64px}
.s40{width:20px;height:10px;margin-left:610px;margin-top:22px}
.s41{width:20px;height:10px;margin-left:634px;margin-top:50px}
.s42a{width:20px;height:10px;margin-left:685px;margin-top:-2px}
.s42b{width:20px;height:10px;margin-left:742px;margin-top:-52px}
.s43{width:20px;height:10px;margin-left:780px;margin-top:-71px}
.s44{width:20px;height:10px;margin-left:723px;margin-top:-59px}
#detailsBox{font-size:25px;margin-top:230px;margin-left:155px;font-weight:bold}
</style>
</head>
<body>
<div id="imagebg"></div>
<div onMouseOver="details('s1')" class="s1"></div>
<div onMouseOver="details('s2')" class="s2"></div>
<div onMouseOver="details('s3')" class="s3"></div>
<div onMouseOver="details('s4')" class="s4"></div>
<div onMouseOver="details('s5')" class="s5"></div>
<div onMouseOver="details('s6')" class="s6"></div>
<div onMouseOver="details('s7')" class="s7"></div>
<div onMouseOver="details('s8')" class="s8"></div>
<div onMouseOver="details('s9')" class="s9"></div>
<div onMouseOver="details('s10')" class="s10"></div>
<div onMouseOver="details('s11')" class="s11"></div>
<div onMouseOver="details('s12')" class="s12"></div>
<div onMouseOver="details('s13')" class="s13"></div>
<div onMouseOver="details('s14')" class="s14"></div>
<div onMouseOver="details('s15')" class="s15"></div>
<div onMouseOver="details('s16')" class="s16"></div>
<div onMouseOver="details('s17')" class="s17"></div>
<div onMouseOver="details('s18')" class="s18"></div>
<div onMouseOver="details('s19')" class="s19"></div>
<div onMouseOver="details('s20')" class="s20"></div>
<div onMouseOver="details('s21')" class="s21"></div>
<div onMouseOver="details('s22')" class="s22"></div>
<div onMouseOver="details('s23')" class="s23"></div>
<div onMouseOver="details('s24')" class="s24"></div>
<div onMouseOver="details('s25')" class="s25"></div>
<div onMouseOver="details('s26')" class="s26"></div>
<div onMouseOver="details('s27')" class="s27"></div>
<div onMouseOver="details('s28')" class="s28"></div>
<div onMouseOver="details('s29')" class="s29"></div>
<div onMouseOver="details('s30')" class="s30"></div>
<div onMouseOver="details('s31')" class="s31"></div>
<div onMouseOver="details('s32')" class="s32"></div>
<div onMouseOver="details('s33')" class="s33"></div>
<div onMouseOver="details('s34')" class="s34"></div>
<div onMouseOver="details('s35')" class="s35"></div>
<div onMouseOver="details('s36')" class="s36"></div>
<div onMouseOver="details('s37')" class="s37"></div>
<div onMouseOver="details('s38')" class="s38"></div>
<div onMouseOver="details('s39')" class="s39"></div>
<div onMouseOver="details('s40')" class="s40"></div>
<div onMouseOver="details('s41')" class="s41"></div>
<div onMouseOver="details('s42a')" class="s42a"></div>
<div onMouseOver="details('s42b')" class="s42b"></div>
<div onMouseOver="details('s43')" class="s43"></div>
<div onMouseOver="details('s44')" class="s44"></div>
<div id="detailsBox">Hover Over the Numbers to Find the Answer</div>
</body>
</html>
Any Help would be great 😀
(You can also view it http://cameronmlewis.com/house/)
Sorry, but it took some time figuring out what is going wrong in IE7, but I think I’ve found your problem. You’ve been using margin-left and margin-top to reposition automatically aligned images. For most browsers this works fine, but IE up to and including IE7 this is buggy at best. As a result here, the body element is drawn on top of some of the hover DIVs.
If you have IE8+ you can see this by using the Developer Tool . You can do this by pressing F12 after the page is fully loaded, set the browser mode to IF7 and then use the ‘Select element by click’-tool (CTRL+B) to try and select the DIVs you created. You will notice that you can only select the elements on top of the body element (those will also change the text on hover).
Best option is to use ‘position: absolute;’ and ‘z-index’ if you want to reposition DIVs like this. Also to clean up your CSS I would suggest you do the following:
After which you can make your DIVs like this:
This uses CSS inheritance to clean up your code (less repetition) and makes it a lot easier to do small edits. Furthermore, I would take a look at using some of the DIVs parameters to store your text’s, instead of placing them into the JavaScript – but that’s up to you.