Invision Power Services > Javascript Rollover Help

Phil Mossop

Mar 16 2006, 08:16 PM

Hi,

I'm not very good with Javascript and am trying to get three images to swap to a different image on mouse over, and back again on mouse out. I can't seem to get it working though. Could someone in the know be able to take a quick look? This is the script which is imported in the head section of my source:

CODE

Martin[0] = new Image(180,180)
Martin[0].src = "./images/about/colour_martin.jpg"
Jase[0] = new Image(180,180)
Jase[0].src = "./images/about/colour_jase.jpg"
Andy[0] = new Image(180,180)
Andy[0].src = "./images/about/colour_andy.jpg"

Martin[1] = new Image(180,180)
Martin[1].src = "./images/about/grey_martin.jpg"
Jase[1] = new Image(180,180)
Jase[1].src = "./images/about/grey_jase.jpg"
Andy[1] = new Image(180,180)
Andy[1].src = "./images/about/grey_andy.jpg"

function MouseOver(imgID, name) {
    document.[imgID].src = [name][0].src;
    return true;
}

function MouseOut(imgID, name) {
    document.[imgID].src = [name][1].src;
    return true;
}

Here is the relevent section of HTML:

CODE

Thanks!

IAIHMB

Mar 16 2006, 11:32 PM

If you've got your heart set on using JavaScript I'll come up with an unobtrusive example in a little bit, though if you'd like suggestions I've got one. I'm a bit tired so you're going to have to live with an example for now, take a look at the following image:

And then take a look at the following page:

Link

Basically, the lower half of the image isn't visble until it's moused over, at that point the background image slides into place. Simplistic to use, no JavaScript required for the animation or preloading, just an idea.

UBERHOST.NET

Mar 17 2006, 12:40 AM

QUOTE(IAIHMB @ Mar 16 2006, 03:32 PM)

Basically, the lower half of the image isn't visble until it's moused over, at that point the background image slides into place. Simplistic to use, no JavaScript required for the animation or preloading, just an idea.

Yes, I use this method more often than the js approach since it is more accessable and very easy to code and understand.

IAIHMB

Mar 17 2006, 12:53 AM

I've attached an unobtrusive example, the JavaScript is as follows:

CODE

Basically, it finds all of the images in an element with the id "slides". On mouse over it changes the directory "color" to "desaturated", the reverse for one mouse out. This could be prettier (The fourth line is considered bad practice.), but it should give you the idea.

mini-me

Mar 18 2006, 09:24 PM

the same effect can be done without using Javascript but using css and onmouse events :

CODE

.link{
background-color: #FEFEFE;
padding : 3px;
}
/* you can use also background image */
}
.hover {
background-color: #CCCCCC;
padding : 3px;
color: #000000;
}

CODE

<span class="link" onmouseover="this.className=('hover')" onmouseout="this.className=('link')">ROLLOVER ME! </span>

IAIHMB

Mar 18 2006, 11:39 PM

onmouseover and onmouseout are JavaScript events.

Phil Mossop

Mar 18 2006, 11:49 PM

Oops forgot about this topic. Thanks IAIHMB, works a treat!

mini-me

Mar 18 2006, 11:52 PM

QUOTE(IAIHMB @ Mar 19 2006, 12:39 AM)

onmouseover and onmouseout are JavaScript events.

lol

sry

yes but onmouseover, onmouseout and css are a lot easier than

CODE

IAIHMB

Mar 19 2006, 12:01 AM

Phil Mossop: No problem.

mi-nime: It depends on how you look at it. First, it's good practice to separate the content from the presentation from the behaviour, you've gone about things the obtrusive way. Second, for each you will have to have add the onmouseover and onmouseout events, that's not the case with my example. Third, you've simply changed classes when images need be replaced. Niether of us bothered to preload the images, though I did support checks.

James Mathias

Mar 19 2006, 01:02 AM

This is a good topic for the "Artistic Outlaw" Journal.