Stacked Anchors

Question

I have three stacked images that I rotate through using Dojo fadeIn and fadeOut and a timer. Only the href for the last one is ever available. Is it possible to rotate the href as well?

<div id="main-slideshow">
<a href="catalog_item.php?sku=1001"><img src="images/catalog/WRP21Aug10_0014.jpg" /></a>
<a href="catalog_item.php?sku=1002"><img src="images/catalog/WRP21Aug10_0015.jpg"/></a>
<a href="catalog_item.php?sku=1003"><img src="images/catalog/WRP21Aug10_0017.jpg"/></a>
</div>

Here's the CSS for it:

#main-slideshow
{
    width: 300;
    height: 400;
    position: relative;
}
#main-slideshow img
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

I tried changing the z-index, but that doesn't appear to work. It's my first Javascript module using Dojo so I could have miss-coded something.

Answer 1

Would suggest fading in/out the entire tag. Or even wrap them in three divs and fade them instead.

You could also rewrite the script to change the href attribute, but that would probably just complicate things. Hope that helps!