PDA

Click to See Complete Forum and Search --> : Popups

SuzanneB
07-23-2006, 04:51 AM
I have a web site that uses some popups to add information to some graphics. I would like to replace the popups with some css divs that contain the information. These would have to appear when the reader hovers their mouse over the graphic and only vanish when they remove their mouse from over the graphic. I must admit that I am feeling lazy and would like to see an example of this, rather than try to work out my own way of doing it. Anyone got an example?
Centauri
07-23-2006, 06:08 AM
Here's a good one:

http://www.cssplay.co.uk/menu/balloons.html

Cheers
Graeme
SuzanneB
07-23-2006, 09:01 AM
That's nice! Well, thats what I want to replace the pop-ups with.
Some of this CSS, I am not sure what it is doing. Anyone have a simpler example?
Centauri
07-23-2006, 11:26 AM
Here is a little something I played with, and is a bit simpler than the link I listed before, but uses similar principles. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
border: 0;
margin: 0;
padding: 0;
}
.popup {
margin-top: 20px;
text-align: center;
}

.popup a {
position: relative;
}
.popup img {
border: 0;
}
.popup span {
display: none;
}
.popup a:hover span {
display: block;
border: 1px solid black;
width: 150px;
background-color: #FFFFCC;
text-decoration: none;
color: #000000;
position: absolute;
left: 100px;
top: -100px;
padding: 5px;
}
.popup a:hover {
display: inline; /* Needed to make it work in IE6 */
}
-->
</style>
</head>

<body>

<div style="margin-top:200px">

<div class="popup"><a href="http://www.webdeveloper.com/forum/index.php?"><img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" alt="WebDeveloper Forum" /><span>WebDeveloper.com Forums - a collection of realy nice people who help others ... </span></a></div>

<p></p>
<div class="popup"><a href="http://www.microsoft.com/windows/ie/default.mspx"><img src="http://www.microsoft.com/library/media/1033/windows/ie/images/ie7/home/ie7_thumb_logo.gif" alt="WebDeveloper Forum" /><span>MSIE - A buggy browser inexplicably popular..</span></a></div>
</div>
</body>
</html>


Cheers
Graeme
:D
SuzanneB
07-24-2006, 01:00 PM
Yep, that's an ideal starter. Lets me see what is going on, and will do for the moment, until I learn how to tweak things. Many thanks!
SuzanneB
07-27-2006, 05:11 AM
One question, the alt is a bit of a pain, but I am nervous about excluding it, because it is a requirement for a graphic to have the alt text. Whats the best way of dealing with the alt?
SuzanneB
07-27-2006, 05:14 AM
If I set alt to alt="" is that legal so to speak? If you do that, the alt text is not displayed, which is great, but I am concerned about the validity of the resulting document.