Popup on hover without plug-in

Home Tutorial Jquery Popup on hover without plug-in

Popup on hover without plug-in
Posted on: August 7, 2010 at 12:00 AM

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

Related Tags for Popup on hover without plug-in:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics