Member Avatar for Brandon_7

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.

  • 3 Contributors
  • 2 Replies
  • 1K Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by mattster

Dani AI

Generated

used inline onmouseover/onmouseout to swap src (which is instantaneous), shows that swapping works, and 's jQuery suggestion is valid. The key fact: changing an <img> src is immediate, so a fade must either crossfade two images or fade the element out, swap the src when invisible, then fade it back in. Below is a compact single-image solution that fits the original markup pattern while giving a smooth transition and guarding against rapid toggles.

<!-- keep original DOM structure; call fadeSwap from handlers -->
<a href="#portfolio"><img id="nav-port" src="images/port-nav.png" alt="PORTFOLIO"></a>

<style>
#nav-port { transition: opacity 0.25s ease; display: block; opacity: 1; }
</style>

<script>
function fadeSwap(img, newSrc) {
  if (img.dataset.swapping) return;
  img.dataset.swapping = "1";
  img.style.opacity = 0;
  function onFadeOut() {
    img.removeEventListener('transitionend', onFadeOut);
    img.src = newSrc;
    requestAnimationFrame(function() { img.style.opacity = 1; });
    img.addEventListener('transitionend', function onFadeIn() {
      img.removeEventListener('transitionend', onFadeIn);
      delete img.dataset.swapping;
    });
  }
  img.addEventListener('transitionend', onFadeOut);
}
// Example inline usage: onmouseover="fadeSwap(this,'images/port-nav1.png')"
</script>

Notes: preload hover images to avoid flicker; for many items a CSS crossfade (two stacked images, change opacity on :hover) is simpler and faster; if using jQuery, use .fadeOut()/.fadeIn() and swap src in the callback.

Recommended Answers

All 2 Replies

Member Avatar for mattster

Use a javascript/jQuery function: Click Here

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

Edited by mattster
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.