onmouseover to display image and comments.

I have a page with thumbnail images at the top and when the user 
mousesover one, I want to display a larger image with comments.

The first attempt used the following in the onmouseover:

if (gImageCapableBrowser) {
    document.image.src = imageURL;
    return false;
  }
  else {
    return true;
  }

This worked fine for the image, but I could not get it to display any 
comments.  My second attempt was to create a series of hidden
frames and make them visible in the onmouseover:

CSS --

.hiddenImages {
        position: absolute;
        visibility: hidden;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
}

Create images --

<span class="hiddenImages" id="I??" >
       <br>
       <img align="center" src="<%=overlayPath%>" border="0" 
alt="">
       <br>
       --some comment goes here---
       <br>
</span>

onmouseover function --

function ShowImage(object) {
  indent = screen.width * .28
  document.all(object).style.posLeft=indent;
  document.all(object).style.visibility='visible';
}

This worked better, but I still have two annoying problems:

1) Long comments extend way past either side of the image, 
instead of wrapping.

2) Images with long comments are not centered correctly on the 
screen, getting shoved to the right by the distance that the
comment extends to the left of the image.



Further down I would like to get this to vork in Modzilla.  It works in 
IE, Opera, and Konqueror, but not Modzilla.
The sample code that I have that tests document.layers and uses 
document.layers[object].visibility seems to be depreciated.



...don

support@microtechniques.com
White Plains, NY
...don

dhughes@microtechniques.com
White Plains, NY

Received on Monday, 6 October 2003 17:49:53 UTC