Home Tutorial Jquery Popup on hover without plug-in

 
 

Share on Google+Share on Google+
Popup on hover without plug-in
Posted on: August 7, 2010 at 12:00 AM
Advertisement
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

Advertisement

Related Tags for Popup on hover without plug-in:


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.

Posted on: August 7, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com