homepage Welcome to WebmasterWorld Guest from 54.83.133.189
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
mouseover popup script
whatson




msg:4462074
 3:01 pm on Jun 6, 2012 (gmt 0)

I am looking for a mouseover popup script for text to appear when the cursor is over an icon.

I have found some, but they are not right. I want to make sure that when the text pops up, that it doesn't move with the cursor, and stays in a permanent position. Of course it also needs to disappear when the cursor moves off.

 

birdbrain




msg:4462091
 3:53 pm on Jun 6, 2012 (gmt 0)

Hi there whatson,

this can be achieved quite simply with CSS...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>CSS pop-up</title>

<style>
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:100%;
background-color:#fcfcfc;
}
#container {
width:960px;
margin:auto;
}
#hover-item {
position:relative;
cursor:pointer;
}
#hover-item span {
display:none;
position:absolute;
top:0;
left:20px;
z-index:1;
width:200px;
padding:10px;
border:1px solid #630;
border-radius:5px;
background-color:#fdb;
box-shadow:4px 4px 4px #999;
font-size:75%;
color:#630;
cursor:default;
}
#hover-item:hover span {
display:block;
}
</style>

</head>
<body>

<div id="container">

Hover over this...

<span id="hover-item">

<img src="http://www.webmasterworld.com/theme/default/gfx/wilk.gif" alt="">

<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis.
</span>

</span>

...to see some hidden text displayed.

</div>

</body>
</html>

birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved