Page 1 of 1

Help with onmouseover images.

Posted: Thu Oct 20, 2011 7:51 am
by social_experiment
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.

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>
The CSS

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;
}
The javascript

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;
}
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

Re: Help with onmouseover images.

Posted: Thu Oct 20, 2011 12:44 pm
by novice4eva
Hi there,
With me it didn't totally disappear but rather the images floated left which was due to the absolute positioning in the js script. This is what I tried and worked.

Code: Select all

<style>

body {
 position: absolute;
}
ul {
 list-style: none;
 z-index: 0;
}
ul li {
 display: inline;
}
ul li img {
 /* position: absolute; */
 z-index: 0;
 vertical-align: top;
}
 
</style>
<ul>
<li><img src="style/images/input_db.png" width="143" height="108" id="img1" onmouseover="enlargeImage('img1');" onmouseout="delargeImage('img1');" /></li>
<li><img src="style/images/noise.png" width="143" height="108" id="img2" onmouseover="enlargeImage('img2');" onmouseout="delargeImage('img2');" /></li>
<li><img src="style/images/logo.png" width="143" height="108" id="img3" onmouseover="enlargeImage('img3');" onmouseout="delargeImage('img3');" /></li>
</ul>
<script>
    function enlargeImage(id)
    {
        var theElement = document.getElementById(id);
        theElement.style.width = '243px';
        theElement.style.height = '208px';
        //theElement.style.position = 'relative';
        /*
 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;
    }
</script>
Hope it helped.

Regards,
Dee