thumbnails with enlarged image on hover, varying sizes

[crw150]

Hi,

I have a page with numerous thumbnails (see

http://www.tylerkrieg.com).

At present, clicking a thumbnail makes an enlarged version of the photo open in a new window. But I need to change this to a mouseover event so that on hover, a larger version of the image appears, then goes away when you mouseout. I have a script that will do this, written like the one at

http://www.brainboxweb.co.uk/capabilities/hover

But the problem is that my script sets every enlarged image to size 250 x 250. Which won't work for me because my enlarged images are all different sizes. I don't see any way to resize them all to the same dimensions as some are landscape and some are portrait.

I'm terrible at Javascript, but I think (?) the way to fix my script is to set a variable for width and height on the large images? However, I'm not sure how to do that. AND, in my HTML how and where do I indicate what the width and height for each enlarged image should be?

Could someone please point me to an example? Or suggest keywords to search?

I hope this makes sense. I'm very JS challenged and very confused!

Thanks,
CRW

 

[kss444]

Not sure how you page is set up, but...

Pass the picture size (width and height) to the JS script and use that to size your image.

If you are storeing your images in a database then store the picture sizes for each one.

If your not using a DB then for each image in your code you will have to hard code the sizes to pass to the script.

 

[crw150]

Well, my page is set up like this (pertinent parts)

<style type="text/css">
img.rightFirst {float: right; width: 91px; height: 101px; border: 1px solid #728DA6; margin: 2px 1px 0px 1px; padding: 1px;}
img.right {float: right; clear: right; width: 91px; height: 101px; margin: 0px 1px 0px 1px; border-top: 0; border-right: 1px solid #728da6; border-bottom: 1px solid #728da6; border-left: 1px solid #728da6; padding: 1px;}
</style>

<td>
<a href="">
<img class="rightFirst" src="photosCharacter/christmasStory3-sm.jpg"/>
</a>
<a href="">
<img class="right" src="photosCharacter/secretGarden2-sm.jpg"/>
</a>

I'm sorry if this is a dumb question, but could the "database" be just an XML document? If so, then I'd have these three files:

index.html
imageSwap.js
largeImages.xml

The javascript is called in index.html, so how can I retrieve data from largeImages.xml? I've Googled things like "javascript reference external database", not in quotes, with no luck.

Or, what is the simplest way? I can't just use javascript to change the CSS class because the thumbnails have different class attributes (right, rightFirst, etc., for alignment purposes).

Could I ... give each thumbnail an id, like:

<img class="right" id="img1" src="thumbnail1.jpg"/>

And then, use javascript to:

(1) retrieve the value of the id attribute
(2) change the original value of the class attribute to the retrieved value of the id attribute

so that on hover it becomes:

<img class="img1" id="img1" src=largeImage1.jpg"/>

And then add all the necessary classes to my CSS stylesheet with the proper dimensions for each large image?

Am I making this way harder than it has to be? I'm sorry. I only really know XSL. I believe that makes me "think backward" in javascript. Any help or search terms suggestions would be greatly appreciated. It would be most helpful if I just knew what I *should* be trying to do.

Thank you,
CRW

 

[kss444]

I think your idea with the css might work. But yes you could store your image sizes in your xml files. With the values stored in an xml file you would need some server side code to read the file. VBScript, JScript ect..., but I get the feeling your trying to stay away from server side code.

 

[crw150]

Ha, you're right! I have zero experience with server side code, and I need to get this site fixed quickly. I will have a go at the CSS idea. I think I can struggle through the javascript faster than trying to learn a whole other ballgame.

Thank you very much for your help and your patience!
CRW