Hi friends,
In this tutuorial I am going to told how to zooming the image when you mouseover on that image .
Now a days the Jquery beaten the flash.This is one best example for that.
In this tutorial I am using the Jquery plugin bubbleup.
Here all the credits goes to AEX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / >
<title >Learning jQuery: Your First jQuery Plugin is BubbleUP</title >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" ></script >
<script type="text/javascript" src="js/bubbleup.jquery.js" ></script >
<script type="text/javascript" >
$(function(){
$("ul#menu li img").bubbleup({tooltips: true});
});
</script >
<style type="text/css" >
<!--
body {
background-color: #EDEDED;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
margin: 0px;
padding: 0px;
}
div#content {
width: 1024px;
margin: 50px auto 0px auto;
text-align: center;
}
h3 {
margin-bottom: 50px;
}
ul#menu {
margin: 5px 0px;
}
ul#menu li {
padding: 0px;
display: inline-block;
*display: inline; /* IE 7 and below */
position: relative;
margin-left: 5px;
margin-right: 5px;
width: 48px;
height: 48px;
}
ul#menu li img {
width: 48px;
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0 8px 0 0;
border: none;
}
-- >
</style >
</head >
<body >
<div id="content" >
<ul id="menu" >
< li > <a href="http://feeds2.feedburner.com/prlamnguyen" ><img src="images/feed.png" alt="Full RSS Feed" ></a > </li >
< li > <a href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" > <img src="images/email.png" alt="E-Mail Delivery" ></a > </li >
< li > <a href="http://twitter.com/" > <img src="images/twitter.png" alt="Follow me on Twitter" ></a > </li >
< li > <a href="http://facebook.com/" > <img src="images/facebook.png" alt="I'm on FaceBook" ></a > </li >
< li > <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/, 'delicious','toolbar=no,width=550,height=550'); return false;" > <img src="images/delicious.png" alt="Save it!" ></a > </li >
< li > <a href="http://technorati.com/" > <img src="images/technorati.png" alt="Favorite this blog" ></a > </li >
</ul >
</div >
</body >
</html >
Here is jquery
(function($){
$.fn.bubbleup = function(options) {
//Extend the default options of plugin
var opts = $.extend({}, $.fn.bubbleup.defaults, options);
var tip = null;
return this.each(function() {
//Set the option value passed here
var $tooltip = opts.tooltips;
$(this).mouseover(
function () {
if($tooltip) {
tip = $('' + $(this).attr('alt') + '');
tip.css({
fontFamily: 'Helvetica, Arial, sans-serif',
color: '#333333',
fontSize: 12,
fontWeight: 'bold',
position: 'absolute',
zIndex: 100000
});
tip.remove().css({
top: 0, left: 0,
visibility: 'hidden',
display: 'block'
}).appendTo(document.body);
//Get the width and height of current image item
var position = $.extend({}, $(this).offset(), {
width: this.offsetWidth,
height: this.offsetHeight
});
//Get the width and height of the tip element
var tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight;
//Set position for the tip to display correctly
//Postion: top and center of image
tip.stop().css({
top: position.top - tipHeight,
left: position.left + position.width / 2 - tipWidth / 2,
visibility: 'visible'
});
tip.animate({
top: "-=24",
}, 'fast');
}
$(this).stop();
$(this).css({'z-index' : 100, 'top' : 0, 'left' : 0, 'width' : 48}).animate({
left: "-=24",
top: "-=24",
width: 96
}, 'fast');
}
).mouseout(
function () {
if($tooltip) {
tip.remove();
}
$(this).stop();
$(this).animate({
left: 0,
top: 0,
width: 48
}, 'fast', function() {
$(this).css({'z-index' : 0});
}
);
}
);
});
};
$.fn.bubbleup.defaults = {
tooltips: false
}
})(jQuery);
you can download original files with image from here
Leave the comment to improve us....
0 comments: