Questions & Answers

[luettel]

Hallo Zusammen,

ich habe ein Problem mit Javascript und FS.

Wir haben im Projekt folgenden JS-Code. Der Code tauscht ein Bild "bild.png" gegen "bild_over.png" aus, wenn man ein Mouseover macht.

$(function() {
     $('.partner_logo')
     .mouseover(function() { 
     var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
     $(this).attr("src", src);
     })
     .mouseout(function() {
     var src = $(this).attr("src").replace("_over.png", ".png");
     $(this).attr("src", src);
     });
});

Im Klick-Dummy funktioniert der Code wunderbar. Nur in FS nicht. Kann mir jemand einen Tipp geben?

Im Chrome wirft mir immer folgende Fehler, wenn man das Generat startet.

Failed to load resource: the server responded with a status of 404 (Not Found)  
Failed to load resource: the server responded with a status of 404 (Not Found) 

Im Click-Dummy steht der Img-Tag so

 <img src="images/logo_ibm.png" class="partner_logo"/>

Im Generat steht der Img-Tag so:

<img src="../../../media/layout/images/logo_ibm.png" class="partner_logo">

Gruß

Daniel Lüttel

[jan-tilo]

Hallo Daniel,

der reguläre Ausdruck den Du nutzt, gibt dir als Ergebnis die Zeichen bis zum erreichen des ersten Punkts. Da Du relative Pfade nutzt, ist das erste Zeichen bereits ein Punkt.

Entweder Du stellst an der Stelle auf absolute Pfade um, somit werden keine Punkte am Anfang generiert, oder Du baust den regulären Ausdruck um, oder (was ich präferieren würde) Du generierst gleich die korrekten Pfade in Dein JS (Hierdurch wird sichergestellt, dass die Bilder auch wirklich mit generiert werden, bei Deiner jetzigen Lösung musst Du hoffen, dass beide Grafiken auf dem WebServer liegen).

$(function() {
     $('.partner_logo')
     .mouseover(function() { 
     var src = '$CMS_REF(media:"bild_over")$';
     $(this).attr("src", src);
     })
     .mouseout(function() {
     var src = '$CMS_REF(media:"bild")$';
     $(this).attr("src", src);
     });
});
 

Der Beispielcode geht jetzt davon aus, dass im Mediastore ein Bild mit der Referenznamen "bild" und ein weiteres mit dem Referenznamen "bild_over" existiert.

Viele Grüße

Jan Tilo

[luettel]

Hallo Jan,

vielen Dank für die Hilfe.

Ich werde das dann umbauen. Das Problem ist nämlich noch, dass 5 img-Tags die Klasse verwenden. Also es gibt 5 Bilder.

Bild1
Bild1_over
Bild2
Bild2_over
Bild3
Bild3_over
....

Es kann aber auch theoretisch nur 3 geben. Also das muss variabel sein.

Gruß

[luettel]

Hallo Jan,

ich würde mir das jetzt dynamisch zusammen bauen lassen. Damit binde ich eine script in die js. Datei ein.

Laut der Ausgabe habe ich jetzt ein SiteProduction als context. Wie kommt man jetzt am besten an die Absatzvorlage dran, wo die Informationen liegen?

Gruß

Daniel Lüttel

[zava]

Hallo Daniel,

infos als imgs tag attribute speicher

<img class="swapImage" src="$CMS_REF(media:"normal_image", abs:1)$" data-normal="$CMS_REF(media:"normal_image", abs:1)$" data-over="$CMS_REF(media:"over_image", abs: 1)$" alt="" title=""  />

und danach infos im JS benutzen wie Jan geschriben hat.

[luettel]

Hallo Antonio,

verstehe ich leider nicht so ganz.

[zava]

Hi Daniel,

du hast 5 bilder und 5 mouseover bilder, jeden image tag hat als data attribute welche bild als src benutzen und welche mouseover bild benutzen muss...

<img class="swapImages" src="$CMS_REF(media....)$" data-out="$CMS_REF(media...)$" data-over="$CMS_REF(media...)$" />

$(function() {
     $('.swapImages')
     .mouseover(function() { 
     var src = $(this).attr("data-over");
     $(this).attr("src", src);
     })
     .mouseout(function() {
     var src =  $(this).attr("data-out");
     $(this).attr("src", src);
     });
});
 

ich kann das nicht besser erklären sorry

ciao

zava

[luettel]

HI,

habe es jetzt über ein Render-Template gelöst. Hier wird mit einfach der Javascript-Code öfters ausgegeben. 😉

Gruß