image enlarge onmouseover.

Question

Hello,

I need a script which will be applied to a set of images around a circle..

Now whats required through script is that

on mouseover image around the circle should get enlarged and should move to the centre.

How to do this using Javascript and CSS.

Be specific about the attributes of CSS and functions of Javascript please I am almost novice.

Help me out.

Thnx in advance.

Answer 1

You should break up the problem you have into smaller parts and then pose questions whenever you have a difficulty in implementing any of them. A suggested break up would be:

i] Positioning the images: Well, for a given set of images, you need to first define the parameters of the circle, it's size in general. It is purely a function of the no. of images you have and the size of the preview. Once you're done with it, you can use simple polar co-ordinates for positioning.

ii] The animation part: Best handled with jQuery or script.aculo.us. Try using your own functions for better performance [JS frameworks can get horribly slow].

iii] Tweaking: Well, just try playing around and get results.

Answer 2

Add this script function to the page:

function actionWhenMouseOver(imgName) {
    var img = document.getElementById(imgName);
    img.style['width'] = "500px";
    img.style['height'] = "500px";
}

and then a similar event for onmouseout:

function actionWhenMouseOut(imgName) {
    var img = document.getElementById(imgName);
    img.style['width'] = "200px";
    img.style['height'] = "200px";
}

and then for every image you want this to occur add the attribute:

<image id="image1" src="" onmouseover="actionWhenMouseOver(this.id)" onmouseout="actionWhenMouseOut(this.id)"/>

Answer 3

I hav egot this script done if any body needs this feel free to mail me at [email protected]