Ergebnis 1 bis 4 von 4

Thema: jpg als Mouseover

  1. #1
    HTML Newbie
    Registriert seit
    18.03.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard jpg als Mouseover

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Interessierte/r Avatar von AnyKey
    Registriert seit
    31.01.2016
    Ort
    Raum Oldenburg / Bremen
    Beiträge
    107
    Danke
    16
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jpg als Mouseover

    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;
    }

    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!

  3. #3
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.231
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: jpg als Mouseover

    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

  4. #4
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    146
    Danke
    9
    Bekam 11 mal "Danke" in 11 Postings

    Standard AW: jpg als Mouseover

    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

Ähnliche Themen

  1. mouseover
    Von annaBell im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 13.06.2013, 11:19
  2. mouseover
    Von sdfg im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.06.2013, 13:08
  3. mouseover mit CSS
    Von Kanila im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 16.07.2012, 20:29
  4. Mouseover
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 07.09.2008, 15:36
  5. Mouseover
    Von Gigazone im Forum HTML & CSS Forum
    Antworten: 31
    Letzter Beitrag: 25.05.2005, 23:00

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •