I am attempting to make a transition/fade effect when a user hovers over a link. I am trying this technique... however I cannot figure out how to do this technique. I know how to do it with css, but I want to know how to do it with the following code:

<div id="navigation">
<a href="#portfolio"><img src="images/port-nav.png" onmouseover="this.src='images/port-nav1.png'" onmouseout="this.src='images/port-nav.png'" alt="PORTFOLIO" 

/></a><a href="#resume"><img src="images/resu-nav.png" onmouseover="this.src='images/resu-nav1.png'" onmouseout="this.src='images/resu-nav.png'" alt="RESUME" 

/></a><a href="#contact"><img src="images/cont-nav.png" onmouseover="this.src='images/cont-nav1.png'" onmouseout="this.src='images/cont-nav.png'" alt="CONTACT" 

/></a><a href="#articles"><img src="images/arti-nav.png" onmouseover="this.src='images/arti-nav1.png'" onmouseout="this.src='images/arti-nav.png'" alt="ARTICLES" 

/></a>


</div>

Thank you.

Recommended Answers

All 2 Replies

Use a javascript/jQuery function: Click Here

You will just have to adjust the selectors to suit your needs

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.