Help with onmouseover images.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Help with onmouseover images.

Post 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
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
novice4eva
Forum Contributor
Posts: 327
Joined: Thu Mar 29, 2007 3:48 am
Location: Nepal

Re: Help with onmouseover images.

Post 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
Post Reply