Anzeige

jQuery: img-Element bei hover wechseln

jQuery: img-Element bei hover wechseln | PSD-Tutorials.de

Erstellt von MelanieCibura, 09.02.2012.

  1. MelanieCibura

    MelanieCibura Noch nicht viel geschrieben

    Dabei seit:
    18.09.2010
    Beiträge:
    30
    Geschlecht:
    weiblich
    Software:
    Photoshop CS5, Espresso
    jQuery: img-Element bei hover wechseln
    Hallo,

    ich bin schon seit Stunden auf der Suche, wie ich per jQuery ein img-Element bei .mouseenter wechsel. Das Bild dann wieder zurückzusetzten sollte dann ja ähnlich funktionieren nur mit dem alten Pfad zum Bild und .mouseleave

    Kann mir da eine weiterhelfen?

    Es geht um dieses Element hier: http://projekt01.melaniecibura.de

    Dort sollen bei mouseover die facebook, twitter, googleplus und email buttons jeweils wechseln.

    Vielen Dank schonmal für eure Hilfe!
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    jQuery: img-Element bei hover wechseln
    AW: jQuery: img-Element bei hover wechseln

    Warum nimmst die nicht als Hintergrundbilder für das a-Element und wechselst die per CSS? Ist um Einiges performanter und funktioniert auch ohne JS.
     
    #2      
  3. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    jQuery: img-Element bei hover wechseln
    AW: jQuery: img-Element bei hover wechseln

    Das Internet - und die Welt der Technik im Allgemeinen - ist größtenteils Englisch-dominiert. Übersetzt du deine Wünsche also in das Englische ("change img src jquery hover") und tippst sie in das englische Google ein bekommst du sofort mehrere passende Artikel:
    http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery
    http://stackoverflow.com/questions/...e-src-attribute-of-an-image-tag-on-link-hover
    http://www.shopdev.co.uk/blog/jquery-rollovers-using-this/
    http://www.yart.com.au/Resources/jQuery/jQuery---Auto-replace-image-on-hover.aspx

    etc.


    Duddle
     
    #3      
  4. Pascal Bajorat

    Pascal Bajorat Aktives Mitglied Kreativ-Flatrate-User

    Dabei seit:
    26.10.2005
    Beiträge:
    651
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Photoshop CC / Php Storm / Panic Coda
    Kameratyp:
    Canon EOS 450D
    jQuery: img-Element bei hover wechseln
    AW: jQuery: img-Element bei hover wechseln

    Hi,
    ich würde dir auch empfehlen es via CSS zu machen:

    Code (Text):
    1.  
    2. a{background:url(bild.png);}
    3. a:hover{background:url(bild2.png);}
    4.  
    falls es doch jQuery sein soll, dann am einfachsten so:

    Code (Text):
    1.  
    2. $(document).ready(function(){
    3.     $('a').hover(function(){
    4.         $(this).css('background', 'url(bild2.png)');
    5.     }, function(){
    6.         $(this).css('background', 'url(bild.png)');
    7.     });
    8. });
    9.  
    Das sind jetzt nur einfache Beispiele, es geht natürlich schöner und auch variabler.
     
    #4      
  5. MelanieCibura

    MelanieCibura Noch nicht viel geschrieben

    Dabei seit:
    18.09.2010
    Beiträge:
    30
    Geschlecht:
    weiblich
    Software:
    Photoshop CS5, Espresso
    jQuery: img-Element bei hover wechseln
    AW: jQuery: img-Element bei hover wechseln

    Wenn ich das mit CSS und :hover mache:

    Was mache ich dann falsch, dass das Hintergrundbild nur angezeigt wird, wenn ich in das a-Tag auch Text schreibe? Da soll ja nichts drüber stehen, sondern das a-Tag soll leer sein, doch dann wird gar nichts angezeigt.

    Grüße
    Melanie
     
    Zuletzt bearbeitet: 09.02.2012
    #5      
  6. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    jQuery: img-Element bei hover wechseln
    AW: jQuery: img-Element bei hover wechseln

    a ist ein inline-Element, du kannst ihm also keine Höhe/Breite zuweisen. Dafür musst du es erst in ein Block- bzw. inline-block-Element umwandeln.

    Und setz die bitte auch noch in Listenpunkte (li), a als Kind von ul ist nicht valide.
     
    Zuletzt bearbeitet: 09.02.2012
    #6      
  7. MelanieCibura

    MelanieCibura Noch nicht viel geschrieben

    Dabei seit:
    18.09.2010
    Beiträge:
    30
    Geschlecht:
    weiblich
    Software:
    Photoshop CS5, Espresso
    jQuery: img-Element bei hover wechseln
    AW: jQuery: img-Element bei hover wechseln

    Hey, super, danke jetzt klappt es ;)

    Das <ul> war noch drin, da ich es eben nochmal mit einer Liste ausprobiert hatte, die aber wieder herausgelöscht hatte und dann wieder hochgeladen habe. Die <ul>s habe ich wohl vergessen zu löschen ;)

    Aber vielen Dank. Ich habe das a jetzt auf display:block gesetzt und jetzt klappt es :)

    Grüße
    Melanie
     
    #7      
  8. mindraper

    mindraper me[code].Java(Script)

    Dabei seit:
    12.08.2007
    Beiträge:
    213
    Geschlecht:
    männlich
    Ort:
    Zuhause
    Software:
    Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil
    jQuery: img-Element bei hover wechseln
    AW: jQuery: img-Element bei hover wechseln

    hi

    hm, ich hab' ja k. A. ob du die <a>-tag jetzt frei irgendwo innerhalb eines <div>-tags rumfliegen hast, aber für semantische korrektheit solltest du sie immer in listen packen. aber das nur so am rande.

    evtl. nehme ich mir ja damit zu viel raus, aber die wissensangabe auf deiner page bzgl. html + css solltest du vielleicht nochmal überdenken, wenn du solche fragen stellen musst...

    nix für ungut
     
    #8      
x
×
×