nicht angemeldet
Hallo,
ich hoffe mir (newbe im Bereich CSS) kann jemand mit dem folgenden Code helfen:
Ich möchte gerne das der Text jeweils über oder unter einem Logo erscheint (welches oben links oder unten rechts ist), je nachdem auf welches Logo (oben links oder unten rechts) man klickt.
Gleichzeitig soll eine Grafik auf die jeweils andere Seite (Mitte links oder Mitte rechts) springen, je nachdem wo das Textfeld Grade geöffnet ist.
Damit die Grafik auf der jeweils anderen Seite ist.
<!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">
#box1 a span {display:none;}
#box1 a:hover span {
position:absolute; top:19%; left:5%; z-index:3;
display:block;
width:40%;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
padding:10px;}
#box2 a span {display:none;}
#box2 a:hover span {
position:absolute; bottom:19%; right:2%; z-index:3;
display:block;
width:40%;
right:5%;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
padding:10px;}
#box3 a span {display:none;}
#box3 a:hover span {
display:block;
}
#box4 a span {display:none;}
#box4 a:hover span {
display:block;
}
</style>
</head>
<body>
<div id="box1"><a href="http://www.test.de"><img src="BILD1.jpg" width="50%" height="17%" border="0" style="position:absolute; top:1%; left:1%; z-index:3; border:0" alt="BILD1"><span>Das ist der Text für Logo - Box 1</span></a></div>
<div id="box2"><a href="http://www.test2.de"><img src="BILD2.jpg" width="50%" height="17%" border="0" style="position:absolute; bottom:1%; right:1%; z-index:4; border:0" alt="BILD2"><span>Das ist der Text für Logo - Box 2.</span></a></div>
<div id="box3"><a href="http://www.test.de"><img src="BILD1.jpg" width="50%" height="17%" border="0" style="position:absolute; top:1%; left:1%; z-index:3; border:0" alt="BILD1"><span><img src="GRAFIK.jpg" width="15%" height="25%" border="0" style="position:absolute; bottom:25%; right:10%; z-index:0; border:2" alt="GRAFIK"></span></a></div>
<div id="box4"><a href="http://www.test2.de/"><img src="BILD2.jpg" width="50%" height="17%" border="0" style="position:absolute; bottom:1%; right:1%; z-index:4; border:0" alt="BILD2"><span><img src="GRAFIK.jpg" width="15%" height="25%" border="0" style="position:absolute; top:25%; left:10%; z-index:0; border:2" alt="GRAFIK"></span></a></div>
</body>
</html>
Momentan schaff ich es leider nur, dass die Grafik von links nach rechts springt oder, dass der Text von links nach rechts springt. Leider funktioniert beides zusammen nicht.
Kann mir jemand helfen?
Gruß
ck
Der Martin