Home/ Questions/Q 518767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:58:15+00:00

This is my index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Untitled Document</title>

  • 0

This is my index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fade.js"></script>
</head>

<body>
<div id="wrapper">
<div id="header"></div>
<div class="spacer"></div>
<div class="nav">
<a>&nbsp;</a>
<a href="" class="nav_menu" title="HOME">HOME</a>
<a href="" class="nav_menu" title="PORTFOLIO">PORTFOLIO</a>
<a href="" class="nav_menu" title="ABOUT ME">ABOUT ME</a>
<div class="clearer"></div>
</div>
</div>
</body>
</html>

I wanted to fade the navigation menu to an image that I made.

and this is my fade.js that is working.


$(document).ready(function(){
  $("a.nav_menu").hover(
    function() {
      $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
      $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

I already try this. But it’s not working.


$(function(){
  $("a.nav_menu")
    .mouseover(function(){
      $(this).stop().animate({'background-image':'url(nav_hover.jpg)'},3000);
    })
    .mouseout(function(){
      $(this).stop().animate({'background-image':'url(nav_.jpg)'},3000);
    })
});

Can someone help me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Take a look at this blog post: http://www.bendewey.com/blog/index.php/9/jquery-rollover-image

    Based on Daniel Roberts answer, the plugin is similar to his solution #2 in which I take a base link with an image on the bottom and then using relative positioning, I place the hover image on top. When the user hovers over the link the hover image on top fades from an opacity of 0 to 1, now depending on your image in the background, this could look nice and seamless, although, if your background image has a lot of contrast the results may have interesting results.

    • 0