Erledigt - jQuery: Wie Bilddatei durch kleine Änderung des Dateipfads bei hover ersetzen?

[Niksda]

Hallo Freunde...
... ich steh' mal wieder auf'm Schlauch und das schlaucht einen sehr!

Problem:
Ich möchte mit jQuery den Dateipfad jeweils der Bilddatei die gerade gehovert wird bei mouseenter von 'dateiname.png' zu 'dateinameNEU.png' ändern (und andersrum wieder zurück). Der jeweils neue Dateiname ist bei mir der ursprüngliche mit einem '_' hinten angehängt. Wie man das bei einer einzelnen Datei macht ist mir klar.

nämlich so:

$('div').hover(function() {
    $(this).find('img').attr('src','/img/dateinameNEU.png');
}, function() {
    $(this).find('img').attr('src','/img/dateinameALT.png');
});

Wie muss ich vorgehen um den Unterstrich immer auf den Dateinamen des gerade gehoverten Bildes anzuhängen? Ich denke es geht irgendwie so:

$('div').hover(function() {
    var name = $(this).find('img').attr('src');

    $(this).find('img').attr(
            {src: name + '_' + '.png'}
});

Da ich vom Schlauch wieder runter will, dürft ihr mich gerne mit 'ner konstruktiven Antwort nass machen!

Zicke-Zack, Tzatziki,

~ Niksda

 

[Myhar]

Ja es geht so. Du musst den String zuerst noch am Punkt splitten, so dass du zwei Teile hast: Einerseits den Pfad + Dateiname und andererseits die Dateiendung.

btw, warum machst du das nicht mit sprites und CSS? Sind das zu komplizierte Bilder/Effekte, die du damit erreichen willst?

 

[Niksda]

Klar Sprites gehen immer. Ging mehr darum das Problem auf eine bestimmte Art zu lösen.
Was wären denn die richtigen Funktionen um den String vor dem Punkt zu splitten?

Ich bastle gerade an einer eigenen Referenzseite und lerne dabei neues jQuery-Zeug.

War jetzt nicht essentiell wichtig, aber vllt. kennst du das, wenn man beim rumprobieren sich was in den Kopf gesetzt hat und es einfach nicht klappen will.

~ Danke, Niksda

 

[gmartino27]

hallo

sollte so gehen oder?

$(document).ready(function() {
$('img').hover(function(){
var arr = $(this).attr('src').split('.');
var urlAbsolute = arr[0] + "_." + arr[1];
//alert(newName);
//alert(arr[1]);
$(this).attr("src", urlAbsolute)
alert(urlAbsolute);
});
});

 

[Niksda]

Danke dir, damit klappt's wunderbar!

Mein kompletter Code:

$('#header div div').hover(function() {
    $(this).addClass('transition');
  
    $(this).hover(function(){
        var path = $(this).find('img').attr('src').split('.');
        var newPath = path[0] + '_.png';
        var oldPath = path[0] + '.png';
    });
  
    $(this).find('img').attr('src', newPath);
  
}, function() {
    $(this).removeClass('transition');
    $(this).find('img').attr('src', oldPath);
});

~ Niksda