Well, there can be some ways to do it, the enlargement can really be done with Opera for example by pressing + key, it will zoom and if you only want to zoom the image and not the content, just use Open image and then use the zoom key

Also, you can do it with javascript by having two pictures, a thumbnail and a normal picture, but here you can zoom one picture, I mean by using this script, if you want the enlargement to be better quality, you just need the image dimensions to be the same as the enlarged image and then the image is small, it is scaled by the browser to a small size The bad thing is that if there are a lot of images, they will take more to load, due to big image filesize, so it is a waste of bandwidth if nobody will enlarge them.. and also I never liked how browsers scale images to smaller dimensions..

I always prefer to use two images, a thumbnail and a normal image for this kind of things, even though it can be done with imagemagick or gd library every time, but why waste the resources of a server? it will need to scale it every time, unless it will do some checking, will save the thumbnails and if they exist, it won't scale, but show it, this wouldn't be the most logic decision.

As you, i don't like that the browser scales automatically bigger images, of course there are sometimes that it is useful but not every time. This script is useful only when you have few images on your page, when we talk about lots of them i do exactly the same thing, use two images, a thumbnail and the original.

Best regards,

I would use... OnMouseOver and OnMouseExit if you're looking for a hover-only effect...


funny thing is i think i came across the stretching feature on accident one of the first few times I used an IDE... They love to stick the dimensions of the images in there for you (as it somewhat preallocates the space, especially on slow connections)... and i think i plugged in a different image manually... like with notepad or kate... and it stretched....

lots of things just come out of nowhere...

Google hoverbox to find a CSS method to increase the size of a picture on-hover. No javascript required.

Yeah, it can be done with CSS, even though the technique is a bit different then in the first post, take this example:

http://www.yo.com.mx/rollover/roll.html - it is css only as I understand.

if you just change the width and height, you'll get a bigger picture or a smaller, depends on the dimensions you chosen ;]

Yes, this technique is different than the first post i made, but it is interesting also, i just test it and works fine with Internet Explorer 6 and Firefox 2.

One thing i like of that this technique is that it is very small comparing with the Hoverbox technique posted before.

Best regards,

Enlarge Image Script
Enlarge Image Script

Hi,
I have been implementing the same type of code to enlarge a picture.
My problem is that the second action is not taken onto account, only the first. In your example, the onclick will work and the ondblclick will not...

Do you have any idea why is that?

Many thanks
A

-Alex

Enlarge Image Script
Enlarge Image Script

Hi,

I found why your code is not working, you miss a ' on the second src

<img src="yourimage.Jpg" width="150" height="200" onclick="this.Src='yourimage.Jpg';this.Height=400;this.Width=300" ondblclick="this.Src=yourimage.Jpg';this.Height=200;this.Width=150">

Many thanks

A

-Alex

Oopps, thanks a lot, i gonna edit the code right now.

Best regards,

Enlarge Image script
Enlarge Image Script

Replying to Feedbacker

Another useful tip is you can do incremental zooming by altering the code slightly ...

<img src="yourimage.Jpg" width="150" height="200" onclick="this.Src='yourimage.Jpg';this.Height=this.Height+100;this.Width=this.Width+100" ondblclick="this.Src=yourimage.Jpg';this.Height=200;this.Width=150">


-Bruv