CSS PopUp
SimplyFred
- css
0 Karin0 SimplyFred0 Karin0 SimplyFred0 Karin
Hallo,
ich möchte ein CSS-Popup bei Mouseover:
Ich habe ein html-file, in dem eine Zeile steht, die mir aus einer Mysql-DB ein Listing liefert:
Diese Zeile hier
<td class="ergebniszeile"><a href="detail.php?a_id=<%$adressen.a_id%>"><%$adressen.a_name%></a></td>
Die gelistet Zeile sieht so aus:
rrr Deutschland Hamburg 040xxxxxx info@rrr.de
das "rrr" ist klickbar,d.h.
es ist exakt der Link:
http://servername/portal/detail.php?a_id=405
Dazu habe ich im entsprechenden html-file oben folgendes eingefügt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
position:absolute; top:450px; left:450px;
z-index:3;}
#box a {
color:#ffffff;
background:#33CC33;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}
#box a span {display:none;}
#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>
<div id="box"><a href="="detail.php?a_id=<%$adressen.a_id%>">INFOBOX<span></span></a></div>
</body>
</html>
Nun wird zwar die InfoBox angezeigt, aber ständig und nicht, wenn man mit der Maus über den Link geht, sondern immer - ausserdem kommt in der InfoBox nicht der gewünscht Inhalt.
Wie kann man dieses Problem lösen?
Hi,
Du solltest mal den clientseitigen Quelltext posten, folgendes funktioniert bei mir (FF2) tadellos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
position:absolute; top:450px; left:450px;
z-index:3;}
#box a {
color:#ffffff;
background:#33CC33;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}
#box a span {display:none;}
#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>
<div id="box"><a href="bla.php">INFOBOX<span>schubiduh</span></a></div>
</body>
</html>
LG
Hier ist der Orginal-Code:
So habe ich es jetzt eingebaut, es zeigt mir den Popup an, aber dafür stehen in der entsprechenden Spalte plötzlich keine Einträge mehr.
Wenn ich mit der Maus darüber gehe, werden die Zeilen schwarz
Der PopUp selbst besteht nur aus einer Zeile, die aber den Inhalt anzeigt.
[code lang=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#box {
position:absolute; top:250px; left:250px;
z-index:3;}
#box a {
color:#ffffff;
background:#33CC33;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}
#box a span {display:none;}
#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
</style>
</head>
<body>
<!-- <div id="box"><a href="">INFOBOX<span>Lorem ipsum dolor sit amet</span></a></div> -->
</body>
</html>
<!-- ##### Kopfzeile ##### -->
bla bla ...
irgendwann kommt diese Zeile:
<div id="box"><a href="detail.php?a_id=<%$adressen.a_id%>"><%$adressen.a_name%><td class="ergebniszeile"></td> </a> </div>
Hi,
Du solltest den clientseitigen Code posten.
Entnehme ich dem obigen Code, dass Du versuchst, 2 HTML-Dokumente in einem auszuliefern, oder wie soll ich das verstehen?
LG
Nein, es ist die gleiche Datei.
Ich habe eine vorgefertigte uebersicht.tpl.html
Die beginnt mit dem Eintrag
<!-- ##### Kopfzeile ##### -->
<%include_template('header.tpl.inc')%>
<%if (count(@adressen) > 0)%>
<%if (!empty($login_id) and $login_a_sendmail=='J')%>
<script type language="JavaScript">
bla bla
bla
so geht das 300 Zeilen kang. Leider kann ich das nicht hier anhängen, ist zuviel.
Ich habe einfach den DIV-Teil nach vorne kopiert.
Frag mich aber nicht, wie das Ganze aufgebaut ist - scheinbar mehr als komplex.
Mittlerweile habe ich mich an diese Version gewagt:
http://www.walterzorn.de/tooltip/tooltip.htm
<html>
<body>
<script text="text/javascript" src="wz_tooltip.js"></script>
</body>
<a href="../index.html" onmouseover="Tip('text')" onmouseout="UnTip()">Homepage</a>
</html>
Das funktioniert, wenn ich NUR diesen Teil in eine eigene Datei kopiere einwandfrei.
Sobald es in dieser ominösen "uebersicht.tpl.html" drinn steht, läuft es nicht
Ich versteh es auch nicht mehr ...
Hi,
Nein, es ist die gleiche Datei.
Das war nicht die Frage.
so geht das 300 Zeilen kang. Leider kann ich das nicht hier anhängen, ist zuviel.
Was hast Du an **client**-seitig nicht verstanden? Wenn das zuviel ist, stell ein Online-Beispiel zur Verfügung.
Ich habe einfach den DIV-Teil nach vorne kopiert.
Was heißt "nach vorne"? Wohin genau? Und was genau ist bei Dir "der DIV-Teil"?
Frag mich aber nicht, wie das Ganze aufgebaut ist - scheinbar mehr als komplex.
Dann frag uns aber auch nicht, wo der Fehler liegt...
Mittlerweile habe ich mich an diese Version gewagt:
http://www.walterzorn.de/tooltip/tooltip.htm
<html>
<body>
<script text="text/javascript" src="wz_tooltip.js"></script>
</body>
<a href="../index.html" onmouseover="Tip('text')" onmouseout="UnTip()">Homepage</a></html>
>
> Das funktioniert, wenn ich NUR diesen Teil in eine eigene Datei kopiere einwandfrei.
Also wohl das gleiche Problem, wie bei der CSS-Lösung, die alleine ja auch wunderbar funktioniert.
>
> Sobald es in dieser ominösen "uebersicht.tpl.html" drinn steht, läuft es nicht
>
Also bindest Du es in dieser wohl falsch ein...
LG