jpg als Mouseover

1. offizieller Beitrag

    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&auml;&szlig; 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

    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:


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

    So könnte es aber funktionieren.

    Drücken Sie die Any-Taste um fortzufahren!

    • Offizieller Beitrag

    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

    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