jpg als Mouseover

Kaiipad

Schaut mal bitte auf hier:
hinter dem grünen Pfeil unter dem Preis ist ein Link zur Anzeigen einer Grafik.
Einfacher html-Link - nicht sehr elegant.
high Power MATRIX-Modul Cluster 21x 5630 LEDs warmweiß 24V 640lm

Link hab ich so geschrieben:
<p align="right"><img onclick="window.open('http://www.leds24.com/images/SL-X25D-XXL.jpg', 'Energieeffizienzlabel','width=250,height=400,scro llbars=no').focus()" title="Energieeffizienzlabel gemäß EU-Verordnung 874/2012" alt="Popup" src="http://www.leds24.com/images/A+.jpg" width="50" height="20" /></p>

Ich hätte es lieber, wenn die darunterliegende Grafik SL-X25D-XXL.jpg angezeigt wird, wenn man mit der Maus auf das grüne A+ Symbol geht.
Wie zum Beispiel hier:
https://www.wohnlicht.com/leuchten/a...m-klar-dimmbar

Habt ihr bitte einen Tip für mich, wie so ein Link aussehen könnte?
Freue mich auf eine Antwort,
Kai

AnyKey

Hmm, ich bin jetzt ein wenig durcheinandergekommen, welche Grafik jetzt beim Mouseover tatsächlich angezeigt werden soll, trotzdem versuche ich es mal mit einem ganz allgemeinen Beispiel:

(bei responsivem Design lieber mit Prozentwerten herumdoktorn)

Nehmen wir mal an, dass Du eine Grafik von "A+.png" mit einer Größe von w:60px und h:30px .

Die Mouseovergrafik "A+mouseover.png" hat eine Dimension von w:200px und h:300px .

Jetzt der HTML-Teil:

Code

<a href="a+.html">
   <div id="a+link-mouseoff"><img src="A+.png">
        <div id="a+link-mouseover"><img src="A+mouseover.png">
        </div>
   </div>
</a>

Der CSS-Teil:

Code

#a+link-mouseoff {
}
#a+link-mouseoff div {
display:none;
}
#a+link-mouseoff:hover div {
display:block;
}
#a+link-mouseover img {
     display:block;
     margin:-180px auto auto -200px;
     position:absolute;
}

Alles anzeigen

Ich gebe jetzt keine Gewähr, dass ich an alles gedacht habe.

So könnte es aber funktionieren.

Arne Drews

Hallo,

Einfach das Bild in einem SPAN oder DIV relativ zum Button ins Dokument setzen und auf display:none; schalten.
Per CSS dann einfach ein :hover verwenden, bspw.:

Code

SPAN.dasbild:hover { display:inline-block; }

Wenn es animiert und nachladbar sein soll, würde ich zu jQuery und $.post greifen, anstatt reines CSS.

Gruß Arne

modem-kind

Du hast das ja sehr gut gemacht Anykey ..
aber deine id namen mit einem + dazwischen funktioniert
glaub ich nur aus Glück .. weil es vom Browser ignoriert wird..

in der css kann man ein + benutzen - sowie auch > ~ und space
als Kombinations Selektoren ..
aber im SelektorNamen ist das nicht richtig nur A-Z a-z 0-9

Grundsätzlich ist Hovern ja sowieso durch die Smartys u Co´s Problematisch..
da muss man immer einen Button zum wieder schließen
des auftauchenden Elements anbieten sonst ist es nich gute usability

auf der Beispielseite von Wohnlicht wurde das gemacht (mit nem script )
wenn auch nicht ganz klar, für den User das es der ist.

Okay schönen Samstag Abend allen
Gruß modem-kind

Tags