My JavaScript code is designed to change the z-index of an image when the mouse hovers over it. However, I recently made some changes to the dimensions and positioning in the CSS, causing the script to stop working for the images. To see an example, visit and check the Home page where it's not working, and any other page where it is working.
JS
<script>
A=""
function mouseover1() {
document.getElementById(A).style.zIndex="1"
}
function mouseoff1() {
document.getElementById(A).style.zIndex="100"
}
</script>
CSS
#HButton { background-image:url(../DefaultPage/Buttons/Home.gif); background-color:#000; height:14.8%; width:100%; color:#FFF; background-size:100%; position:absolute; z-index:90; left:0px; background-repeat:no-repeat;}
#HButton2 { background-image: url(../DefaultPage/Buttons/HomeP.gif); background-color:#000; height:14.8%; width:100%; color:#FFF; background-size:100%; position:absolute; z-index:89; top:0px; left:0px; background-repeat:no-repeat;}
This is the CSS code that is causing issues
Below is the correct code:
CSS
#HButton { background-image:url(../DefaultPage/Buttons/Home.gif); background-color:#000; float:left; height:60px; width:350px; color:#FFF; background-size:100%; position:relative; z-index:90;}
#HButton2 { background-image: url(../DefaultPage/Buttons/HomeP.gif); background-color:#000; float:left; height:60px; width:350px; color:#FFF; background-size:100%; position:relative; z-index:10; top:-60px;}
Both codes use the same div tag
HTML
<div id="HButton" onmouseover="A='HButton'; mouseover1()" onmouseout="A='HButton'; mouseoff1()">
</div>
<div id="HButton2" onmouseover="A='HButton'; mouseover1()" onmouseout="A='HButton'; mouseoff1()">
</div>