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";
}