Log in

View Full Version : Looking for help with pop-up hover windows


Springbok
10-22-2011, 07:23 PM
I have a simple webpage with pictures of a group of friends. I want to have a pop-up window hover when someone places their mouse on the friends image. The pop-up window would contain text with their name and information about them. I've checked out various links on the Internet for the past 3 days, but can't find anything that I understand. The closest thing I came upon was a pop-up window that sat in the top left of my page and disappeared when I scrolled down the page. I just want the pop-up window to hover over the image, or on either side, depending on the image placement on the webpage. Thanks in advance for any help.
djr33
10-22-2011, 09:28 PM
The technology behind this is similar to a rollover or mouseover image changing-- but instead of a new image, you want to display a hidden part of the page. Note that this is not a "window", but just a div or other part of the current page. (A window means a new browser window-- with a close button, etc.)

If you're looking for something that is already made for this, then look at various "tooltip" scripts, including some on this website.

But it also would be fairly easy to make this yourself:
1. Create a hidden div positioned where you'd like with whatever contents you'd like. Use CSS properties (display:none;) to hide it.
2. Add an onmouseover event on the image to show the div by id. (display:block;)
3. Add an onmouseout event on the image to hide the div by id. (display:none;)
coothead
10-23-2011, 12:31 AM
Hi there Springbok,

and a warm welcome to these forums. ;)

Here is a CSS example for you to try...


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

<base href="http://www.coothead.co.uk/images/">

<meta charset="utf-8">

<title>css "tooltip"</title>

<style>

body {
background-color:#f0f0f0;
}

#container {
width:830px;
padding:5px;
margin:20px auto 0;
border:3px double #666;
box-shadow:#333 20px 20px 40px;
background-color:#fff;
overflow:hidden;
}

.friends {
position:relative;
float:left;
width:401px;
height:246px;
border:2px solid #333;
margin:5px;
cursor:pointer;
}

.friends:nth-of-type(1) {background-image:url(blood.jpg);}
.friends:nth-of-type(2) {background-image:url(grap.jpg);}
.friends:nth-of-type(3) {background-image:url(clouds.jpg);}
.friends:nth-of-type(4) {background-image:url(autumn.jpg);}

.friends span {
position:absolute;
top:-7px;
left:273px;
z-index:1;
display:none;
width:123px;
padding:5px;
border:1px solid #630;
background-color:#fdb;
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
color:#630;
box-shadow:#000 1px 1px 2px;
}

.friends:hover span {display:block;}

</style>

</head>
<body>

<div id="container">

<div class="friends">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus
ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate
fermentum sed eu arcu.
</span>
</div>

<div class="friends">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus
ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate
fermentum sed eu arcu.
</span>
</div>

<div class="friends">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus
ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate
fermentum sed eu arcu.
</span>
</div>

<div class="friends">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus
ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate
fermentum sed eu arcu.
</span>
</div>

</div>

</body>
</html>

coothead