Tag først et kig på den her side:
http://www.meyerweb.com/eric/css/edge/popups/demo.html (meget imponerende
ting, han har de andre steder også).
Jeg har prøvet at rode lidt med den effekt, han bruger, men jeg kan ikke få
den til at makke ret. Her er lidt copy&paste (indhold redigeret væk) fra
det, jeg roder med:
INDEX.HTML:
=====================================================================
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-
strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="./common.css" type="text/css">
</head>
<body>
<div id="headline">
<h1>Headline</h1>
</div>
<div id="sidebar">
<p><a href="./index.html">Main<span>Go to the root of the problem. The
place where everything begins</span></a></p>
<p><a href="./page1.html">Page1<span>Let's go dance and slap each other in
the face with some fishes</span></a></p>
<p><a href="./page2.html">Page2<span>And there was much rejoicing (yay!)
</span></a></p>
</div>
<div id="maintext">
<h3>Teh news!:</h3>
<p>
It's alive. It's alive!
</p>
</div>
</body>
</html>
=====================================================================
COMMON.CSS:
=====================================================================
#headline {
width: 80%;
text-align: center;
}
#sidebar {
float: left;
width: 10%;
margin-top: 3.2em;
}
#maintext {
float: left;
width: 70%;
}
div#sidebar a span {display: none;}
div#sidebar a:hover span {display: block;
position: absolute; top: 300px; left: 0; width: 10%;
padding: 5px; margin: 10px; z-index: 100;
color: #000000;
font: 0.7em trebuchet, verdana, arial, sans-serif; text-align: center;}
body { background-color: #F8F8FF;
margin: 2em 2em 2em 2em; }
a { font-family: trebuchet, verdana, arial, sans-serif; }
a:link { color: #8888BB; }
a:active { color: #444499; background-color: #F0F0F8; }
a:visited { color: #000066; }
a:hover { color: #444499; }
h1,h2,h3,p
{ color: #000000;
font-family: trebuchet, verdana, arial, sans-serif;
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1em; }
p { font-size: 0.9em;
=====================================================================
Text-zoom dur selvfølgelig ikke, når man har værdier angivet i px, så det
skal rettes på et tidspunkt, men det store problem er, at den ikke vil vise
pop-up teksten uden text-decoration eller den rigtige farve.
Hvis jeg kan få det her til at du, så spekulerede jeg på, om man kunne
bruge noget lignende til en slags ordbogsfunktion, hvor man flytter
markøren hen over det ord, man vil have forklaret, og der kommer så en
forklaring op. Jeg har set et par løsninger baseret på DHTML, og jeg synes,
at de er meget uelegante.