Help with one line of code in Expando

[porkmeister]

1) Script Title: Expando

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pandoimage.htm

3) Describe problem:

Can anyone tell me what is wrong with this line?

<div class="excontainer start" id="image1"> <a href="index.html"> <img class="expando ex1" img border="1" src="car200.jpg" width="100" height="100" alt="click for info page"></a> 
</div>

When I insert the link (index.html via Dreamweaver) the image expands behind the others. If I take the link out it works fine but I need the link to work.
Hope that someone can help me 'cos this has been driving me nuts for hours.
A demo can be found here
http://www.saturdaysquares.com/demo1.htm
Thank you
Ross

[jscheuer1]

Whether one element stacks above or below another element when they both occupy some of the same space on the page depends upon its z-index. In the script, that is done here:

    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     im.parentNode.style.zIndex = 3;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     im.parentNode.style.zIndex = 2;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump < 1){
     im.parentNode.style.zIndex = '';
     im.style.visibility = 'hidden';

As you can see, what is being affected is the image's parent node. Which normally would be the the division, but once you introduce the link, the division becomes the parent parent node.

If all of your images are going to be linked, this may work:

    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     im.parentNode.parentNode.style.zIndex = 3;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     im.parentNode.parentNode.style.zIndex = 2;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump < 1){
     im.parentNode.parentNode.style.zIndex = '';
     im.style.visibility = 'hidden';

Or you could just get rid of the division, move its class designations to the a tag, give the the a tag display:block.

There are various other things that may be tried, such as using a helper function to find the ancestor node with the appropriate class designation, or changing the zIndex on both the parent and the parent's parent. But if one of the above solutions works for you, I don't see much reason to worry about it.

[porkmeister]

Thank you John, the first example you gave me worked first time. Much appreciated.
As I'm new to this, I presume it's ok to muck about with your original script like this?

Ross

[jscheuer1]

As long as the credit remains, it's OK. It would be nice to add something like:

/* Expando-ZV Image Script ©2008 - 2009 John Davenport Scheuer
   as first seen in  http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   with modifications 4/12/09 */

to the credit, but it's not really necessary.

[porkmeister]

It's done
Thanks once again John
Ross