designated viewing area

[Gary]

Is it possible to have a "floating" area designated to show an enlarged
image of a thumbnail? Right now I'm using a script to enlarge the image,
where it's at, onmouseover, but when it enlarges, it re-draws the rest of
the page below it. Some times it enlarges in the area below the current
image which makes the mouse cursor no longer over the image so the
onmouseout (which reverts the image back to the original thumbnail size)
occurs instantaneously. So, it's hard to see the image, obviously.
I can make a frame on the right side of the page and designate the lower
portion as the viewing area if that is easier. I would rather have the
enlarged image float above the current page in the lower right hand corner
if that's possible.
You can view what I'm working on at:
http://www.geocities.com/garybeardbbcards/need1.htm
The image that enlarges beneath the current image messing up the onmouseout
is at the bottom of the page next to the "1989 Hill's Team MVP". If you
click on the green image you will see what I mean.

Thanks for any help,
Gary Beard

[RobG]

Gary <gbeard12@ wrote:

Is it possible to have a "floating" area designated to show an enlarged
image of a thumbnail? Right now I'm using a script to enlarge the image,
where it's at, onmouseover, but when it enlarges, it re-draws the rest of
the page below it. Some times it enlarges in the area below the current
image which makes the mouse cursor no longer over the image so the
onmouseout (which reverts the image back to the original thumbnail size)
occurs instantaneously. So, it's hard to see the image, obviously.
I can make a frame on the right side of the page and designate the lower
portion as the viewing area if that is easier. I would rather have the
enlarged image float above the current page in the lower right hand corner
if that's possible.
You can view what I'm working on at:
http://www.geocities.com/garybeardbbcards/need1.htm
The image that enlarges beneath the current image messing up the onmouseout
is at the bottom of the page next to the "1989 Hill's Team MVP". If you
click on the green image you will see what I mean.
The first step is to validate your page - it has 206 errors, many not
trivial:

<URL:http://validator.w3.org/check?uri=http%3A%2F%2Fwww.geocities.com%2Fgarybea rdbbcards%2Fneed1.htm>
In your script element opening tag you have:
<script language="JavaScript1.2">
The language attribute is deprecated, type is required. Specifying a
language version can have harmful effects (though not in this case).

<script type="text/javascript">
function enlarge24(){
aimage24.style.pixelWidth=224

You are using element IDs as global variables, that is not standards
compliant and is not widely supported. Use getElementById or the images
collection.

pixelWidth is not a W3C standard CSS style property, so browser support
is likely to be patchy - use 'width'. Length properties must have units
(unless they are zero):

document.images['aimage24'].style.width = '224px';

With appropriate feature detection that would be:

var aImg;
if ( document.images
&& (aImg = document.images['aimage24'])
&& aImg.style){
aImg.style.width = '224px';
}

Which is long and messy when you have 20-odd in a page. Why not use
script when the page loads to attach a generic 'showBiggerImage'
mouseover/out to all the appropriate images? Then you can have a single
function that is passed a reference using 'this' and all those script
elements are not required.

Load the lager images into absolutely positioned divs that are hidden by
default. On mouseover, show the bigger image in an absolutely
positioned div that appears to 'float' over the page near the thumbnail.

Post again if you need help with that.

If you want users without script wont see the bigger images, don't hide
them by default and fit them into the page flow somehow.

Fixing the positioning part is really a CSS question - use absolute
positioning for the bigger image and anchor it with a relatively
positioned parent div in the right place in the document flow.

--
Rob