• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bildwechsel eines SVG bei mouseover

jeffglennfox

New member
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
 
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.
 
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
 
Zurück
Oben