Dan Murphy's Blog

Well laura wanted to do some roll over effects on one of her sites so I had to figure out how to do that.  Well after lots of searching this was the solution I came up with.

First download jquery.js and upload it to the server

Second add these lines of code to your header.php or scripts section of your site:

<script type='text/javascript' src='location of jquery script'></script>

<script type='text/javascript'>
 $(document).ready(function(){
 $("img.a").hover(
 function() {
 $(this).stop().animate({"opacity": "0"}, "slow");
 },
 function() {
 $(this).stop().animate({"opacity": "1"}, "slow");
 });
 });
 </script>

Then edit the CSS of your site and add these classes (styling may vary!):

div.fadehover {
 position: relative;
 height: 238px; /*this is to space your images*/
 width: 360px;
 }

img.a {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 10;
 border: 2px;
 border-style:solid;
 border-color: black;
 padding: 5px 5px 5px 5px;
 }

img.b {
 position: absolute;
 left: 0;
 top: 0;
 border: 2px;
 border-style:solid;
 border-color: black;
 padding: 5px 5px 5px 5px;
 }

Then you will just need to add these lines to your page:

<div class="fadehover">
 <img src="startimage.jpg" class="a" alt="" />
 <img src="endimage.jpg" class="b" alt="" />
 </div>

After doing that you should have your achieved effect of the roll over and image swap