CODEWITHSUNDEEP
javascript
Ankit Sachan
Ankit Sachan

Reputation:

image enlarge onmouseover

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.

Upvotes: 1

Views: 6308

Answers (2)

Chris
Chris

Reputation: 2055

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)"/>

Upvotes: 0

Rohan Prabhu
Rohan Prabhu

Reputation: 7302

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.

Upvotes: 2

Related Questions