IE7 Javascript not Working Correctly

Question

I have created this JavaScript so that when you hover over a div it wills how in the box below the image. It works in all browsers but Internet Explorer and can't figure out why?

Here the Code for the site:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><script src="http://1.2.3.8/bmi-int-js/bmi.js" language="javascript"></script><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><script language="javascript"><!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img",1);//-->
</script>

Any help is great. Thanks

nothing, in internet explorer 7 I tested it and when you hover over the div's the text at the bottom does not change. — cameronmarklewis
– cameronmarklewis, Commented May 31, 2011 at 12:35

SLaks · Accepted Answer · 2011-05-31 12:35:20Z

4

You have a trailing , in your giant object literal.

answered May 31, 2011 at 12:35

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

awm Over a year ago

Yes, IE is picky about trailing commas. And jslint will find them for you. :)

Zachary K Over a year ago

Yea, JSLint will save you all sorts of pain when doing Javascript. That tool is one that you should not be without

qwertymk Over a year ago

@awm: @ZacharyK: I personally prefer JSHint

Michael Berkowski · Accepted Answer · 2011-05-31 12:37:54Z

3

Delete the trailing coma in the object literal. IE chokes on those.

myInfo={
  "s1":"Flaunchin",
   ...
   ...
  "s42b":"Underpinning",
  "s43":"Interceptor Trap",
  "s44":"Water Main",
-------------------^^^^
}

answered May 31, 2011 at 12:37

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

1 Comment

cameronmarklewis Over a year ago

Thanks for that, that worked great, although now I have another problem, some of them will work when I hover over the divs but most of them will not only the first few seem to put the text in the div?

Collectives™ on Stack Overflow

IE7 Javascript not Working Correctly

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related