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
I like to keep a record of everything we have growing in our yard so we can remember what was planted. Here are the recent additions to the front yard, they are all perennial flowers and of course for me and Laura low maintenance!
This is a really cool website, it looks like most of these pictures take place in Russia as there are a lot of pictures from Chernobyl. There are also a bunch of pictures from nuclear test sites from the islands that the US was testing on which are really cool. Then there are a bunch of shipyard pictures too.
