Help with onmouseover images.
Posted: Thu Oct 20, 2011 7:51 am
I've created the following code that will make an image larger when hovered on; it works up to a point. The javascript works a treat making the image larger and returning it to it's original size onmouseout. The problem is most likely the css which i cannot figure out.
The CSS
The javascript
When i hover over image 1, image number 3 disappears. Any ideas why? My goal is to get the hovered on image to enlarge while the rest of the images are left in place, so the image that enlarges should display 'on top' of the others.
Thanks in advance
Code: Select all
<ul>
<li><img src="path/to/file" width="143" height="108" id="img1" onmouseover="enlargeImage('img1');" onmouseout="delargeImage('img1');" /></li>
<li><img src="path/to/file" width="143" height="108" id="img2" onmouseover="enlargeImage('img2');" onmouseout="delargeImage('img2');" /></li>
<li><img src="path/to/file" width="143" height="108" id="img3" onmouseover="enlargeImage('img3');" onmouseout="delargeImage('img3');" /></li>
</ul>
Code: Select all
body {
position: absolute;
}
ul {
list-style: none;
z-index: 0;
}
ul li {
display: inline;
}
ul li img {
/* position: absolute; */
z-index: 0;
}
Code: Select all
function enlargeImage(id)
{
var theElement = document.getElementById(id);
theElement.style.width = '243px';
theElement.style.height = '208px';
theElement.style.position = 'absolute';
/*
theElement.style.top = 0;
theElement.style.left = 0;
*/
theElement.style.zIndex = 2;
}
function delargeImage(id)
{
var theElement = document.getElementById(id);
theElement.style.width = '143px';
theElement.style.height = '108px';
theElement.style.position = 'relative';
theElement.style.zIndex = 0;
}
Thanks in advance