Web image enlargement

I would like a simple to use feature to enable site users for you to enlarge images upon rollover or click. Advice on procedures and " the way to" greatly valued.

Gives thanks in anticipation.

I’d personally use CSS process. You can also use Javascripting.
See these various items…
show up large image upon mouseover – Search engines Search

Addititionally there is methods for " magnifier glass". Not sure in the event that’s what you necessarily mean

try your javascript gallery or even plugin, like this script:

Script: Immediate Image Zooming

Options: This script might zoom-in/zoom-out any impression in
your page by clicking for the image.

Browsers: NS6+, IE. most of (NS4 degrades gracefully)

Author: etLux


Step 1.

Put the following script inside the < head>... < /head> part of
your page:

< script>
// D. 2004 by CodeLifter. com
var nW, nH, also, oW;
function zoomToggle(iWideSmall, iHighSmall, iWideLarge, iHighLarge, whichImage)
oW=whichImage. type. width; oH=whichImage. type. height;
nW=iWideSmall; nH=iHighSmall; altogether different
nW=iWideLarge; nH=iHighLarge;
whichImage. type. width=nW; whichImage. type. height=nH;

< /script>


Attach the function in your image with an onclick event, seeing that
shown below:

< img
border=" 0"
src=" yourimage. gif"
width=" 100"
height=" 100"
onclick=" zoomToggle('100px', '100px', '200px', '200px', this); "

Set the variables within the function call:

1st will be the small width
2nd will be the small height
3rd will be the large width
4th will be the large height

(The 'this' towards the end should not be changed. )


You *can* make use of this on multiple image in your page.
Just connect the function in order to each image, as per the example
program code above.

The starting size of the image as established with width= plus
height= in your < img etc> tag and the small width and
height in the particular function *may* differ if you hope.

Cautionary Note:

Be careful to observer the syntax inside the function call
just as shown, like the single ' estimate marks and
the particular px after every single dimension!


You can make an effort to change the " onclick" for " onmouseover" or something similar to that, i’m not a javascript master, but that’s the idea. Hope this makes it possible.

Thanks regarding these replies, they certainly put me around the right track to solving the situation. Via the seek out suggested by mlseim I dug suitable site cssplay. corp. uk, this wonderful site with an incredible attitiude – in this article I found that XHTML/CSS to use to my design. I’ve being trying to build my website without Java, but the solution offered by ChHuerta looks good, so maybe subsequent time.
Manner in which thanks and adhere to!


I have used Light Container on previous websites which work effectively: Lightbox 2

uncertain if this is give as it applied javascript…..

if you need simple to install, look at Jquery and shaddowbox.. super straightforward to setup by using minimal javacript.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *