Increase/decrease image size, website

Question

Hi,

i have a webpage with table and in it images, i would like to add the option to increase/decrease image size, how could i do that? Something like ctr+plus and ctr+ minus does.

This is what it is for now, http://www.ursic-ei.si/1.html

Thank you all for answers.

Answer 1

You can't increase image size - you display fixed size images.

Things you could do:

1. Have different sized copies of the same image and serve them selectively from the server when buttons pressed.

2. Serve a single larger image that will be auto scaled to fit dimensions of element. Then alter the size of that element in JavaScript button event handlers.

   document.getElementById("myImgElement").width = 300;

   document.getElementById("myImgElement").height= 300;

You need to have an image larger than what you are down scaling to. The browser will scale it automatically to fit in the smaller image element. Note that you will need an image sufficiently big to fit your maximum size. Then downscale using code above.

Answer 2

You can use javascript to change the css of the image. Use width and height attributes to set them in css. Other option is to use jQuery plugin something like http://www.visual-blast.com/javascript/jqzoom-jquery-plugin/ or http://www.webappers.com/2008/12/16/jquery-javascript-image-magnifier-under-gpl/ This is triggered on mouseover but you can change the action to trigger the event.