Mouse Over 2 Bilder einblenden

Status
Nicht offen für weitere Antworten.
Moin,

ich hab dir mal ein kleines Beispiel gestrickt, das dir solch ein CSS-Popup demonstriert :)

Beim Überfahren des grafischen Links (mittels eines Hintergrundbildes) wird zum einen sein Hintergrundbild getauscht, und zum anderen an einer festgelegten Position im Viewport ein CSS-Popup eingeblendet, das ein weiteres Bild (als Hintergrund) enthält.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_HTTT</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

ul#listmenu {
margin:50px 0 0 50px;
list-style:none;
}

ul#listmenu li a.bpc1:link, ul#listmenu li a.bpc1:visited {
display:block;
width:70px; /* Grafik-Breite */
height:70px; /* Grafik-Höhe */
background:url(grafik_1.png);
text-decoration:none;
color:#000;
}

ul#listmenu li a.bpc1:hover {
background:url(grafik_2.png);
border:none;
}

ul#listmenu li a.bpc1 span.popup {
display:none;
}

ul#listmenu li a.bpc1:hover span.popup {
display:block;
position:absolute;
left:400px;
top:400px;
width:70px; /* Grafik-Breite */
height:70px; /* Grafik-Höhe */
background:url(grafik_3.png);
text-decoration:none;
}
-->
</style>

</head>
<body>

<ul id="listmenu">
   <li><a href="#" class="bpc1"><span class="popup"></span></a></li>
</ul>

</body>
</html>
Alternativ zu dieser skizzierten Variante mit dem Hintergrundbild für das CSS-Popup, liesse sich die Grafik auch als herkömmliches img-Grafikelement einbinden - das Markup würde dann so aussehen:

Code:
<ul id="listmenu">
   <li><a href="#" class="bpc1"><span class="popup"><img src="grafik_3.png" alt=""></span></a></li>
</ul>
und das abgewandelte Stylesheet folgendermaßen lauten:

Code:
ul#listmenu li a.bpc1:hover span.popup {
display:block;
position:absolute;
left:400px;
top:400px;
text-decoration:none;
}

ul#listmenu li a.bpc1:hover span.popup img {
border:none;
}
Vielleicht kommt dir ja eine dieser beiden Techniken für dein Vorhaben entgegen.

So, mir ist sehr viel daran gelegen, mich bei dir ausdrücklich zu entschuldigen, dass du dich von mir harsch angegangen gefühlt hast, denn das war nicht meine Absicht, und ist normalerweise auch nicht meine Art, sei's hier im Forum, oder "draußen" im wahren Leben. Ich hatte einfach dein Anliegen durch die Umschreibung "2 Bilder an verschiedenen Stellen einblenden" zunächst völlig falsch eingeschätzt / interpretiert, und war mir daher meiner Sache sicher, dass dies mit CSS nicht möglich ist. Großes Sorry! :-(

mfg Maik,
der ein einsichtiger Mensch / Mod ist, und zu seinen Fehlern steht
 
Hi!
Entschuldigung wird natürlich angenommen!

der CCS-Code ist super so gehts und so hatte ich es mir auch vorgestellt!!

DANKE
 
Status
Nicht offen für weitere Antworten.
Zurück