Tuesday, July 6, 2010
jQuery
Today, I am going to make a black and white image fade into a colour image or vice versa on mouseover with jQuery. So, follow the steps below to use the effect in your blog. In this tutorial, I'm going to use two images, a colour image and its greyscale mode image.
You can create greyscale mode image of the original image using any image editing softwares. Or you can use free online image editors such as Online-Image-Editor, Fotoflexer, Pixlr, Picnik and more.
1. Styling – CSS
First log into Blogger > Design > Edit HTML. Search for the code ]]></b:skin> . And replace it with the codes below.
span.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
]]></b:skin>
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
]]></b:skin>
2. jQuery & Function
Now add the following jQuery script and function immediately before the </head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
//]]>
</script>
3. Wireframe – HTML
And here is the HTML code that you should place in your Blog posts. But, remember to add it in EDIT HTML mode and not in Compose mode in text editor.
<span class="fadehover">
<img src="URL_of_normal_image" alt="" class="a" />
<img src="URL_of_greyscale_image" alt="" class="b" />
</span>
<img src="URL_of_normal_image" alt="" class="a" />
<img src="URL_of_greyscale_image" alt="" class="b" />
</span>
UPDATE : You can decide whether you want the effect is from GREYSCALE to COLOUR or COLOUR to GREYSCALE by changing the image source in the HTML code above. The image with class='a' appears first and changes to image with class='b' on hover.
Subscribe to:
Post Comments (Atom)
14 comments:
Thanks man! This is great!
@Earl, welcome friend..
Work with IE too??
Yep,it works fine in IE also.
eonsofttech.com
web design company in uk
Hey, can you write a code to add a lightbox too? To this image. Is it possible?
Im tryin:)
Thanks in advance:]
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "type".
!!!ERROR!!!
Thank you for this detailed helpful review about sweet girls.
Time is going ahead and it shows that serious programs should pass test planning. The best direction for software development is connected with augmented reality development that allows to develop outsource applications for mobile phones.
I will try this one. thankz
--faceleakz
Hi! Great effect, but I can't find where to put the last code.. please help!
I was doing some other research where I found your Demo. Very Nice. Gives me something to look forward to in the future.
Thanks for great info. Let me mention about home insurance rates provided by house protection companies. Compare free rates on homeowners insurance.
Thanks for sharing with us this great posts. You have nice possibility to choose online affiliate programs. The best casino affiliate programs such as 32 Red affiliates and great poker rooms such as redbet.
Post a Comment