this should have been a simple task, but for some reason one of my rollovers plain old isn't working
my html sheet
Code:
<div style="background:#F5F5E9 url('/sites/all/themes/flossmoore1/images/bricks250.png');padding:1px;padding-top:5px;width:950px;border:0px solid #000000;height:159px;">
<div>
<div style="float:right;margin-right:1px;height:76px;width:76px;border:0px solid #000000;">
<a href="<front>" onmouseover="document.front1.src=front1_2.src" onmouseout="document.front1.src=front1_1.src"><img name="front1" src="/sites/all/themes/flossmoore1/images/library.png" alt="button" width="75" height="75" /></a>
</div>
<div style="float:right;margin-right:1px;height:76px;width:76px;border:0px solid #000000;">
<a href="<front>" onmouseover="document.front2.src=front2_2.src" onmouseout="document.front2.src=front2_1.src"><img name="front2" src="/sites/all/themes/flossmoore1/images/teachers_ina.png" alt="button" width="75" height="75" /></a>
</div>
<div style="float:right;margin-right:1px;height:76px;width:76px;border:0px solid #000000;">
<a href="<front>" onmouseover="document.front3.src=front3_2.src" onmouseout="document.front3.src=front3_1.src"><img name="front3" src="/sites/all/themes/flossmoore1/images/parents_ina.png" alt="button" width="75" height="75" /></a>
</div>
<div style="float:right;margin-right:1px;height:76px;width:76px;border:0px solid #000000;">
<a href="<front>" onmouseover="document.front4.src=front4_2.src" onmouseout="document.front4.src=front4_1.src"><img name="front4" src="/sites/all/themes/flossmoore1/images/student_ina.png" alt="button" width="75" height="75" /></a>
</div>
<div style="float:right;margin-right:1px;height:76px;width:576px;border:0px solid #000000;">
</div>
<div>
<div style="margin-top:1px;float:right;height:76px;width:76px;border:0px solid #000000;">
<a href="<front>" onmouseover="document.front5.src=front5_2.src" onmouseout="document.front5.src=front5_1.src"><img name="front5" src="/sites/all/themes/flossmoore1/images/pictures_ina.png" alt="button" width="75" height="75" /></a>
</div>
<div style="margin-right:1px;margin-top:1px;float:right;height:76px;width:76px;border:0px solid #000000;">
<a href="<front>" onmouseover="document.front6.src=front6_2.src" onmouseout="document.front6.src=front6_1.src"><img name="front6" src="/sites/all/themes/flossmoore1/images/blank_ina.png" alt="button" width="75" height="75" /></a>
</div>
<div style="margin-right:1px;margin-top:1px;float:right;height:76px;width:76px;border:0px solid #000000;">
<a href="<front>" onmouseover="document.front7.src=front7_2.src" onmouseout="document.front7.src=front7_1.src"><img name="front7" src="/sites/all/themes/flossmoore1/images/blank_ina.png" alt="button" width="75" height="75" /></a>
</div>
<div style="margin-right:1px;margin-top:1px;float:right;height:76px;width:76px;border:0px solid #000000;">
<a href="<front>" onmouseover="document.front8.src=front8_2.src" onmouseout="document.front8.src=front8_1.src"><img name="front8" src="/sites/all/themes/flossmoore1/images/blank_ina.png" alt="button" width="75" height="75" /></a>
</div>
</div>
</div>
my javascript code
Code:
if (document.images) {
front1_1 = new Image
front1_2 = new Image
front1_1.src = '/sites/all/themes/flossmoore1/images/library.png'
front1_2.src = '/sites/all/themes/flossmoore1/images/teachers_act.png'
front2_1 = new Image
front2_2 = new Image
front2_1.src = '/sites/all/themes/flossmoore1/images/teachers_ina.png'
front2_2.src = '/sites/all/themes/flossmoore1/images/teachers_act.png'
front3_1 = new Image
front3_2 = new Image
front3_1.src = '/sites/all/themes/flossmoore1/images/parents_ina.png'
front3_2.src = '/sites/all/themes/flossmoore1/images/parents_act.png'
front4_1 = new Image
front4_2 = new Image
front4_1.src = '/sites/all/themes/flossmoore1/images/student_ina.png'
front4_2.src = '/sites/all/themes/flossmoore1/images/student_act.png'
front5_1 = new Image
front5_2 = new Image
front5_1.src = '/sites/all/themes/flossmoore1/images/pictures_ina.png'
front5_2.src = '/sites/all/themes/flossmoore1/images/pictures_act.png'
front6_1 = new Image
front6_2 = new Image
front6_1.src = '/sites/all/themes/flossmoore1/images/blank_ina.png'
front6_2.src = '/sites/all/themes/flossmoore1/images/blank_act.png'
front7_1 = new Image
front7_2 = new Image
front7_1.src = '/sites/all/themes/flossmoore1/images/blank_ina.png'
front7_2.src = '/sites/all/themes/flossmoore1/images/blank_act.png'
front8_1 = new Image
front8_2 = new Image
front8_1.src = '/sites/all/themes/flossmoore1/images/blank_ina.png'
front8_2.src = '/sites/all/themes/flossmoore1/images/blank_act.png'
}
all but the one identified as front1 works, even though it's code is essentially identical to the rest
any ideas?
and yes i do have the javascript include on the page (it's a php template so that's elsewhere in the code, i just included the relevant html portion)
to be more specific it's the first one on the page (library.png)
the href="<front>" is just a dummy link until the rest of the pages they are supposed to link to are built
