Bildwechsel eines SVG bei mouseover

[jeffglennfox]

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 ?

<div id="go-top"><a href="#top" class="icon-hover" id="go-to-top"><img src="up-arrow.svg"></a></div>

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

 

[kkapsner]

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:

.icon-hover .normal, .icon-hover:hover .hover {
    display: initial;
}
.icon-hover:hover .normal, .icon-hover .hover {
    display: none;
}

HTML:

<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.

 

[jeffglennfox]

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