CODEWITHSUNDEEP
javascripthtmlcssdom-events
PrivateUser
PrivateUser

Reputation: 4524

How to achieve hover effect using javascript?

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

Upvotes: 0

Views: 1823

Answers (4)

Jules
Jules

Reputation: 7223

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

Upvotes: 1

Benny Tjia
Benny Tjia

Reputation: 4883

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.

Upvotes: 0

Blueboye
Blueboye

Reputation: 1494

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.

Upvotes: 0

switz
switz

Reputation: 25188

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>

Upvotes: 0

Related Questions