Mousover (text) => Bild einblenden.

Basierend auf Bruno Fassinos CSS-Popups habe ich mal ein alternatives Lösungsbeispiel erstellt:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pure CSS Popups with Auto Absolute Positioning</title>

<style type="text/css">
span.popup {
        display: none;
}

a {
        text-decoration: underline;
        color: #00C0FF;
}
a.textlink:hover {
        border-width: 0;
}

a.textlink:hover .popup {
        display: inline;
        position: absolute;
        background-color: #fff;
        border: 1px #000 solid;
}
img {
        border: none;
        cursor: pointer;
}
</style>

</head>
<body>

<ul>
    <li><a class="textlink" href="#">Textlink 1<span class="popup"><img src="http://download.openoffice.org/branding/images/logonew.gif" onclick="window.open('http://download.openoffice.org','Fenster')"></span></a> als Listenpunkt</li>
    <li><a class="textlink" href="#">Textlink 2<span class="popup"><img src="http://www.google.com/images/firefox/google.gif" onclick="window.open('http://www.google.com','Fenster')"></span></a> als Listenpunkt</li>
</ul>

<p><a class="textlink" href="#">Textlink 3<span class="popup"><img src="http://www.google.com/images/firefox/fox1.gif" onclick="window.open('http://www.firefox.com','Fenster')"></span></a> und ein sinnloser Text bis zu <a class="textlink" href="#">Textlink 4<span class="popup"><img src="http://www.google.com/images/firefox/light.gif" onclick="window.open('http://www.google.com','Fenster')"></span></a> innerhalb eines Textabsatzes.</p>
<p>Hier folgt ein Textabsatz, um zu demonstrieren, daß er sich beim Einblenden der CSS-Popups nicht verschiebt.</p>

</body>
</html>
 
Hallo michaelsinterface,

die Bildchen "zittern" beim mouseover im Firefox ziemlich wild umeinander,
ich werde Deinen Code mal genauer unter untersuchen - im Prinzip macht der ja das was ich mir vorstelle. Etwas "sanfter" wäre halt richtig .

Ich würde das Ergebnis - insofern ich es alleine hinbekomme, dann hier posten.
Beste Grüße und herzlichen Dank für die Unterstützung
Klasse Service
Pascal
 
Ich kann bei mir im Firefox 1.5.0.4 kein Zittern der Grafiken feststellen (OS: Win2000) :confused:
 
wow - das sind Reaktionszeiten!

kann evtl sein, dass mein Editor das nicht richtig verarbeitet.
Ich nutze Ultraedit und habs als html gespeichert.
 
Am Dateiformat (*.html oder *.htm) kann es nicht liegen, und was "Ultraedit" beim Speichern einer HTML-Datei mit dem Quelltext so anstellt, entzieht sich meiner Kenntnis, da ich mit dem "Notepad" und "HTML Editor Phase 5² " arbeite.
 
Perfekt!

kurze Rückmeldung und nochmals Danke für die Unterstützung.
Es lag tatsächlich and der Formatierung - ich bin wunschlos glücklich ;-)

Merci
Pascal
 
Wenn du wunschlos glücklich bist, markiere das gelöste Thema bitte auch als erledigt, indem du auf den "Status"-Button klickst.
 

Neue Beiträge

Zurück