How I can overlap one image on another on zoom

Question

ankit.pandey3 -8 Junior Poster in Training

13 Years Ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="date" content="2003-12-02T09:54:03+08:00" />
<meta http-equiv="imagetoolbar" content="no" />

<title>Dynamically enlarge image on mouseover and mouseout</title>

<style type="text/css">
body {margin:64px;}

#apDiv3 {
position:absolute;
left:188px;
top:116px;
width:100px;
height:75px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:387px;
top:113px;
width:100px;
height:75px;
z-index:2;
}
</style>


<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;

function decreaseSizeImage(idname) // will get back to its normal default size
{
var id_name=idname;
//var image_name=imagename;
if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
if (document.getElementById(id_name).height > 100)
{
document.getElementById(id_name).height -= 30;
document.getElementById(id_name).width -= 40;
glbDec = setTimeout("decreaseSizeImage('"+id_name+"')", 32);
};
}

function increaseSizeImage(idname)
{
var id_name=idname;
//var image_name=imagename;
if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
if (document.getElementById(id_name).height < 216)
{
document.getElementById(id_name).height += 30;
document.getElementById(id_name).width += 40;
glbInc = setTimeout("increaseSizeImage('"+id_name+"')", 32);
};
}
// ]]>
</script>

</head>

<body>
<div id="apDiv3"><a href="#" onmouseover="increaseSizeImage('image2');"
onmouseout="decreaseSizeImage('image2');"><img id="image2"
src="ganesha.jpg" width="100" height="75"  /></a></div>
<p>&nbsp;</p>
<div id="apDiv4"><a href="#" onmouseover="increaseSizeImage('image1');"
onmouseout="decreaseSizeImage('image1');"><img id="image1"
src="sai baba.jpg"
width="100" height="75" alt="Krusty is helpless" /></a></div>
<p>&nbsp;</p>

<p id="validation">&nbsp;</p>

</body></html>

HI frds........
I have two images which zooms on mouse over but zooming image don't overlap the neighbour image. It means zooming image and neighbour both are visible...........
I want when one image zooms it overlaps the neighbour image so that only zooming image is visible.....
Any one????????/
Plz help.................

javascript

3 Contributors
5 Replies
143 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Taywin

Luckychap 68 Posting Pro in Training

13 Years Ago

Use zIndex property of container div to place it on top. Modified code:

function decreaseSizeImage(idname) // will get back to its normal default size
{
    var id_name=idname; 
    if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
    if (document.getElementById(id_name).height > 100)
    {
        document.getElementById(id_name).height -= 30;
        document.getElementById(id_name).width -= 40;
        // Decrease the zindex to 0
        if(id_name == "image1") document.getElementById("apDiv4").style.zIndex = "0";
        else document.getElementById("apDiv3").style.zIndex = "0";
        glbDec = setTimeout("decreaseSizeImage('"+id_name+"')", 32);
    };
}

function increaseSizeImage(idname)
{
    var id_name=idname;
    if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
    if (document.getElementById(id_name).height < 216)
    {
        document.getElementById(id_name).height += 30;
        document.getElementById(id_name).width += 40;
        // Increase the zindex to 1000
        if(id_name == "image1") document.getElementById("apDiv4").style.zIndex = "1000";
        else document.getElementById("apDiv3").style.zIndex = "1000";
        glbInc = setTimeout("increaseSizeImage('"+id_name+"')", 32);
    };
}

Taywin 312 Posting Virtuoso

13 Years Ago

If you look at the code, line 10-11 are exactly the same as line 25-26. That's an error from copy & paste. I would suggest to change the z-index to higher when it is increasing regardless what it is, and change it to 0 when decreasing. Also, change your CSS to z-index to 0 for both.

Edited 13 Years Ago by Taywin because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ankit.pandey3 -8 Junior Poster in Training · Answer 1 · 2011-03-09T14:46:57+00:00

Use zIndex property of container div to place it on top. Modified code:

function decreaseSizeImage(idname) // will get back to its normal default size
{
    var id_name=idname; 
    if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
    if (document.getElementById(id_name).height > 100)
    {
        document.getElementById(id_name).height -= 30;
        document.getElementById(id_name).width -= 40;
        // Decrease the zindex to 0
        if(id_name == "image1") document.getElementById("apDiv4").style.zIndex = "0";
        else document.getElementById("apDiv3").style.zIndex = "0";
        glbDec = setTimeout("decreaseSizeImage('"+id_name+"')", 32);
    };
}

function increaseSizeImage(idname)
{
    var id_name=idname;
    if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
    if (document.getElementById(id_name).height < 216)
    {
        document.getElementById(id_name).height += 30;
        document.getElementById(id_name).width += 40;
        // Increase the zindex to 1000
        if(id_name == "image1") document.getElementById("apDiv4").style.zIndex = "1000";
        else document.getElementById("apDiv3").style.zIndex = "1000";
        glbInc = setTimeout("increaseSizeImage('"+id_name+"')", 32);
    };
}

Friend......
It stops zooming..........
Plz check it///////////

Luckychap 68 Posting Pro in Training · Answer 2 · 2011-03-09T23:40:00+00:00

Hi Taywin,
Lines 10,11 and 25,26 are NOT exactly same. The values for zIndex are different(as you expected).

Hi ankit.pandey3,
I guess you too my changes and put it in your rather than copying all my javascript code to yours. I made changes to your code and it was working. Verify at your end.

Taywin 312 Posting Virtuoso · Answer 3 · 2011-03-10T10:26:39+00:00

Taywin 312 Posting Virtuoso

13 Years Ago

Oh, didn't see the number. Sorry. :P