thumbnail preview?

**maverick** · 07-01-2006, 02:46 AM

hey,I have a "view picture" button and when you click it,it goes to the url of the picture.I'm wondering if theres anyway to make a thumbnail of the picture when you hover over the "view picture" button in javascript?i dont want to have to make a small thumbnail of every picture in photoshop,like some people suggested.

thanks for the support

regards

Mav

**tech_support** · 07-01-2006, 05:20 AM

You can do something like this:

Code:

<script language="javascript">
function resizeImage(id,w,h) {

  var resizeimg = document.getElementById(id)
  resizeimg.style.height = h
  resizeimg.style.width = w

}
</script>

and do whatever you like with it eg.

HTML Code:

<img src="something.jpg" id="something" width="100" height="100" onmouseover="resizeImage(this.id,'400','400')">

ID: You will need an ID for the image

Tell me if it doesn't work

**jscheuer1** · 07-01-2006, 06:03 AM

Thumbnails are really the way to go. They save so much on bandwidth when loading the page. Many programs can make these smaller images at one pass of a directory. There really is no reason not to use thumbnails and many reason why you should.

**maverick** · 07-01-2006, 08:11 AM

yeah i guess i could resize the images with some software,in that case... whats the JS code to display a small thumbnail of the picture when you hover the " view picture" button? regards

Mav

**tech_support** · 07-01-2006, 08:12 AM

Try my script

**maverick** · 07-01-2006, 09:01 AM

yep I'v tried it and it seems pretty good but once you hover over the image it doesn't resize back and once you hover over it,since alot of my pictures are big it disrupts the whole page.I found this script :

http://jsmadeeasy.com/javascripts/Im...-box/index.htm

it kind of seems to be what i;m looking for but it does not show up on firefox,its just for IE.

or similar to this:

http://icant.co.uk/articles/imagepreview/

only once you click the preview it open the link on a new windows insted of having to click the text next to camera image.

**tech_support** · 07-01-2006, 09:17 AM

It uses this:

resizeImage(your_id,your_height,your_width)

So you can customize it onmouseover or onmouseout or whatever!

**tech_support** · 07-01-2006, 10:06 AM

Originally Posted by maverick

yep I'v tried it and it seems pretty good but once you hover over the image it doesn't resize back and once you hover over it,since alot of my pictures are big it disrupts the whole page.I found this script :

http://jsmadeeasy.com/javascripts/Im...-box/index.htm

it kind of seems to be what i;m looking for but it does not show up on firefox,its just for IE.

or similar to this:

http://icant.co.uk/articles/imagepreview/

only once you click the preview it open the link on a new windows insted of having to click the text next to camera image.

Here - Try this:

Attachment 406

I hope it's what your looking for!