sliding images with indicator dot
hi there,
i am using a sliding image gallery and want to indicate the selected thumbnail by showing a dot below the thumbnail. i am new to scripting and have been trying tweak the code i found (which had the thumbnails at 50% opacity when unselected and 100% opacity when selected), using that code, i'm hoping i can instead make an image of a dot show at 100% opacity when the thumbnail above is selected and 0% opacity when the thumbnail is not selected. here is the script where i think i can achieve this:
function showImage()
{
if(activeImage){
activeImage.style.filter = 'alpha(opacity=100)'; -------originally this was 50
activeImage.style.opacity = 1; -------originally this was 0.5
}
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
activeImage = this;
}
this is what i tried but it didn't work (i have a div named theDot and inside it is my dot.gif). i don't really know what i'm doing with the scripting below, but i think you can probably decipher that i'm trying to get the div called theDot to show at 0 opacity until the thumbnail is selected at which time theDot should be 100% opacity:
function showImage()
{
if(activeImage){
activeImage.style.filter = 'alpha(opacity=100)';
activeImage.style.opacity = 1;
document.getElementById('theDot').style.filter = 'alpha(opacity=0)';
document.getElementById('theDot').style.opacity = 0;
}
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
activeImage = this;
document.getElementById('theDot').style.filter = 'alpha(opacity=100)';
document.getElementById('theDot').style.opacity = 1;
}
please let me know if you can help me! thanks!!