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
141 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Taywin

All 5 Replies

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

How I can overlap one image on another on zoom

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers