implement 'OnClick' to this script?

[sophcb]

Hello, I'm hoping someone can help me achieve quite a crucial part of my website. I basically have an image of a screen in the center of the page (part of a bg image designed, but ive put a seperate img of just the screen in position directly over) which i wanted to enlarge - this is where the actual menu and site content is going to be placed.. However, i wanted the enlargement to be gradual..

Here is the script i am using which gives the smooth/gradual enlargement:


if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpand\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}


However, after getting this far I've realised it should enlarge and of course stay enlarged, otherwise if the user mouses out of the screen accidentally whilst navigating around my website within this screen, it will just alter back to the original size. I've been looking for a long time and have tried to figure this out.. all I want to do is make the screen img enlarge and remain that way whilst they navigate around, but then when the user clicks out the screen again (to play with other movable objects on the 3d desktop bg) it'll resize to normal. I've tinkered with it but i must be getting the syntax wrong.. :( Can anybody tell me what I need to alter, or add please? :confused:

I'm hoping its something simple that i've overlooked.. perhaps 'can't see for looking' :p

Thank you :o

[adios]

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('click', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onclick', expConIm);
}

Couldn't be that easy ....

[sophcb]

ahhh yessss it was that easy :o ahh thank you very much Adios! i'm feeling rather sheepish now hehe, such a simple alteration =/

The image currently expands out from the topleft corner, is there a way to change this to expand out from the center? Sorry if this is another simple edit, I'm still learning things so I sometimes have one minor thing out of place which messes it up :o

Thanks again ♥

[adios]

Sorry if this is another simple edit.

Don't be, I'm pretty confident it isn't. Think about the logic: that script expands/contracts the element by - presumably - adding or subtracting two values in unison, 'enlarging' the item rightward & downward (or leftward & upward). Expanding outward from the center, and 'contracting' inward ... ugh. That's a serious wipe. Might want to look into a js library (framework) for that. Here's some :cool: examples from UIZE (http://www.uize.com/), to illustrate (not an endorsement btw).

http://www.uize.com/examples/slideshow-with-wipes.html