How to achieve hover effect using javascript?

Question

I have 3 bullet images. 1 for active, 1 for hover and 1 for the rest links.

Here is my code:

<a href="#" class="toc selected" rel="2"><img src="images/othersdefdot.png" onclick="funcCaller('fund', 'images/reddot.png', 'local', 'images/othersdefdot.png', 'youthgames', 'images/othersdefdot.png')" name="fund"></a>

How to achieve hover effect in this link?

Check the demo page here

Answer 1

<a href="#" class="toc selected" onMouseover="showPic1()" onMouseout="showPic2()">
    <img id="link_img" src="/images/othersdefdot.png" />
</a>

Javascript:

function showPic1() {
    document.getElementById('link_img').src = "/images/img1.png";
}

function showPic2() {
    document.getElementById('link_img').src = "/images/img2.png";
}

Answer 2

I'm not exactly sure what you're asking, but you can use the onmouseover property.

<a href="#" class="toc selected" rel="2"><img src="images/othersdefdot.png" onclick="funcCaller('fund', 'images/reddot.png', 'local', 'images/othersdefdot.png', 'youthgames', 'images/othersdefdot.png')" onmouseover="javascriptFunction()" name="fund"></a>

Answer 3

You must be looking at the jQuery scrollable here:http://flowplayer.org/tools/demos/scrollable/plugins/index.html

I think this is what you want.

Answer 4

if its just for hover effect, there is no need to use javascript. You could just use css:

a img:hover{
   /*change background*/ 
}

however if you insist, you could attach event handler onmousedown to it. hope that helps.