Bildpopup per OnMouseOver auf Text / Textlink

SoWhat?!

Hallo, ich denke es gibt hier schon einen Beitrag wo es beschrieben ist, aber trotz langer Suche hab ich leider nix hilfreiches finden können.
Also mein Problem ist folgendes, ich möchte auf meiner Seite Bilder zu Produkten als Popup öffnen lassen wenn man mit dem Mauszeiger auf den dazugehörigen Link fährt. und bei verlassen das Links soll das Fenster wieder schliessen. das Fenster soll an der Stelle des Mauszeigers öffnen und die Größe der Bilddatei haben. Bitte helft mir mit einem Quelltext, Danke.

sejuma

Schreib mal das vor </head>:

Code

<style type="text/css">


a.bild1{
    position:relative;
    z-index:1; background-color:#ccc;
    color:#000;
    text-decoration:none}


a.bild1:hover{z-index:2; background-color:#ff0}


a.bild1 span{display: none;
background-image: url(bild1.jpg);
}


a.bild1:hover span{
    display:block;
    position:absolute;
    top:2em; left:2em; width:150px;height:200px;
    border:1px solid #0cf;
 color:#000;
    text-align: center}
</style>

Alles anzeigen

und das innerhalb des Body-Bereichs an die entsprechende Text-Stelle:

Code

Normaler Text [url='#']Hover Text mit Bildeinblendung<span></span>[/url] normaler Text

Das Ganze müsstest du jetzt für alle weiteren Bilder entsprechend wiederholen, was bei vielen bildern sicherlich sehr unübersichtlich wird. Eine einfachere Lösung hab ich aber nicht parat.

SoWhat?!

Das ist leider nicht ganz das was ich mir vorgestellt hab, denn es sind dann doch ein paar mehr Bilder die angezeigt werden sollen. Kann man event. nen Quellcode von ner OnMouseOver Bildvergrößerung umschreiben oder so damit halt die Artikelbezeichnung beim Drüberfahren mit der Maus nen Bild dazu bekommen?

HolyMarcell

Hallo,

koenntest du mir vielleicht die funktion von dem <span>-tag hier erklaeren? (also das was du mit dem zugehoerigen CSS-Code ereichen willst)

MfG,

sejuma

Mit der Theorie hab ich's nicht so, den Code hab ich mal irgendwo gefunden.
Beim ersten span "a.bild1 span" wird das Bild hinterlegt, ohne dass es zunächst erscheinen soll.
Der zweite span bewirkt, dass beim Hovern das Bild über die Klasse "a.bild1:hover span" mit Größenangaben und Positionierung erscheint.
Innerhalb des HTML-Span-Tags könntest du auch noch einen Text schreiben (das Bild dann evtl. weglassen), so dass beim Hovern eine Infoerklärung eingeblendet wird.