HTML, CSS and anything else that deals with client side capabilities.
Moderator: General Moderators
social_experiment
DevNet Master
Posts: 2793 Joined: Sun Feb 15, 2009 11:08 am
Location: .za
Post
by social_experiment » 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.
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
novice4eva
Forum Contributor
Posts: 327 Joined: Thu Mar 29, 2007 3:48 am
Location: Nepal
Post
by novice4eva » Thu Oct 20, 2011 12:44 pm
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