Share on Google+Share on Google+

Popup on hover without plug-in

Ads
In this tutorial , we will discuss about using popup on hover without using plug-in.

Popup on hover without plug-in

In this tutorial , we will discuss about using popup on hover without using plug-in. In this example , we have a logo/picture . When we hover mouse on it, it will display a popup. The back ground image of popup is set using css style sheet.

popupwithoutplugin.html

<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

<title>jQuery RSS Popup Bubble Effect</title>

<style type="text/css">
* { margin: 0; padding: 0; border: 0; }

.rss-popup {
margin: 80px;
padding: 0;
width: 100px;
position: relative;
}

div.rss-popup em {
background: url(bubble.png) no-repeat;
width: 100px;
height: 60px;
position: absolute;
top: 120px;
left: 120px;
text-align: center;
text-indent: 3px;
z-index: 1;
display: none;
}

#rss-icon {
width: 231px;
height: 60px;
background: url(logo.gif) no-repeat 0 0;
text-indent: -9999px;
margin: 0;
display: block;

}
</style>


<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate(
{opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "60"}, "fast");
});

});
</script>

</head>

<body>


<div class="rss-popup">
<font color="purple">
<a href="http://www.roseindia.net/" id="rss-icon">RSS Feed
</a>
<em>click on logo to connect to Roseindia</em>
</font>
</div>


</body>

</html>

OUTPUT

When we hover mouse on image :

Download Source Code

Click here to see demo

Advertisements

Posted on: August 7, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Advertisement