nicht angemeldet
Benötige Hilfe bei Hover-Effekt
0 0 0 
Der Martin
Benötige Hilfe bei Hover-Effekt
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
-
Om nah hoo pez nyeetz, ck1982!
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.
Hover ist ohne klick.
Die Logos werden ebenfalls Hintergrund von passenden Elementen , z.B. h1
dein HTML sieht dann so aus.
<h1><span>Text</span></h1> <h1 id="zweitlogo"...><span>Text</span></h1> <img ... die zusätzliche Grafik>
CSS
h1 span {außerhalb des sichtbaren Bereichs} h1:hover span {sichtbar} h1 ~ img {so positionieren, wie gewünscht} #zweitlogo ~ img {anders positionieren}
Das wäre ein Ansatz.
btw: test.de gehört dir?
Matthias
--
-
Om nah hoo pez nyeetz, Matthias Apsel!
Die Logos werden ebenfalls Hintergrund von passenden Elementen , z.B. h1
ebenfalls streichen
Hintergrund oder Inhalt von passenden Elementen
Matthias
--
-
Hallo,
btw: test.de gehört dir?
ganz bestimmt nicht.
Und die Stiftung Warentest wird darüber ebensowenig erfreut sein.So long,
Martin--
Most experts agree: Any feature of a program that you can't turn off if you want to, is a bug.
Except with Microsoft, where it is just the other way round.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-