Ergebnis 1 bis 3 von 3
  1. #1
    jeffglennfox ist offline Mitglied
    registriert
    08-08-2008
    Beiträge
    34

    Bildwechsel eines SVG bei mouseover

    Hallo,

    ich möchte einen Bildwechsel durchführen, wenn der User mit der Mouse über einen Link fährt. Also letztendlich soll sich die SVG-Grafik passend von blau (up-arrow.svg) nach rot (up-arrow-hover.svg) ändern beim mouseover.

    Technisch passiert dass durch einen Bildwechsel, der leider beim IE 11 nicht zuverlässig funktioniert (dass heißt der aktuelle Zustand (blau oder rot) der SVG-Grafik wird nicht immer erkannt).

    Woran kann das liegen oder wie könnte ich das ggf. noch vereinfachen ?

    Code:
    <div id="go-top"><a href="#top" class="icon-hover" id="go-to-top"><img src="up-arrow.svg"></a></div>
    Code:
    var items = document.getElementsByClassName('icon-hover');
    
    for (var i = 0; i < items.length; i++) {
    
      items[i].addEventListener('mouseover', hoverIcon);
    
      items[i].addEventListener('mouseout', hoverIcon);
    }
    
    
    function hoverIcon() {
     
    var icon =  document.getElementById(this.id).firstElementChild.src; 
    
    var current_icon = icon.substring(icon.lastIndexOf("/")+1);
    
    var icon_status = current_icon.indexOf("-hover."); 
    
    var icon_name = current_icon.split(".");
    
    if (icon_status == -1) { document.getElementById(this.id).firstElementChild.src = icon_name[0]+'-hover.'+icon_name[1]; } 
    
    else { document.getElementById(this.id).firstElementChild.src = icon_name[0].replace("-hover", "")+'.'+icon_name[1]; }                 
     
    }
    Gruss

    von Markus

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.612

    AW: Bildwechsel eines SVG bei mouseover

    Warum machst du das überhaupt mit JS und nicht mit CSS? Ist in meinen Augen einfacher, leichter zu lesen und funktioniert auch, wenn JS deaktiviert ist.
    CSS:
    Code:
    .icon-hover .normal, .icon-hover:hover .hover {
        display: initial;
    }
    .icon-hover:hover .normal, .icon-hover .hover {
        display: none;
    }
    HTML:
    Code:
    <div id="go-top"><a href="#top" class="icon-hover" id="go-to-top"><img src="up-arrow.svg" class="normal"><img src="up-arrow-hover.svg" class="hover"</a></div>
    PS: document.getElementById(this.id). kann einfach durch this ersetzt werden.

  3. #3
    jeffglennfox ist offline Mitglied
    registriert
    08-08-2008
    Beiträge
    34

    AW: Bildwechsel eines SVG bei mouseover

    Zitat Zitat von kkapsner Beitrag anzeigen
    Warum machst du das überhaupt mit JS und nicht mit CSS? Ist in meinen Augen einfacher, leichter zu lesen und funktioniert auch, wenn JS deaktiviert ist.
    Gute Frage, wahrscheinlich habe ich einfach zu umständlich gedacht. Danke für den Vorschlag und den Hinweis -> (this.id).

    Ist wahrscheinlich wirklich schlauer, das so zu realisieren.

    Gruss von Markus

Ähnliche Themen

  1. Antworten: 6
    Letzter Beitrag: 20-02-2012, 15:29
  2. Bildwechsel bei mouseover
    Von echidna im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 02-10-2006, 21:44
  3. Bildwechsel bei mouseover
    Von ernst_stavro_b. im Forum Allgemeines
    Antworten: 2
    Letzter Beitrag: 08-12-2004, 18:41
  4. bildwechsel mit mouseover
    Von schwerminator im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 20-03-2004, 21:40
  5. Bildwechsel bei Mouseover
    Von JensHT im Forum Allgemeines
    Antworten: 2
    Letzter Beitrag: 17-11-2002, 20:11

Lesezeichen

Berechtigungen

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