Bildertausch PHP/JS

[Tronjer]

Das ist eine kombinierte JS/PHP-Aufgabe, über die ich seit Stunden grüble. Es geht um ein solches Konstrukt:

<? $hoverpic = 'b2.png'; ?>

<div id="box">

/* $this->images kommt vom Controller */
<? foreach ($this->images as $image): ?>
    <img src="<? echo $image; ?>" /><br />
<? endforeach; ?>
</div>

<script>
$(document).ready(function() {
    $('#box img').mouseover(function() {
      $(this).attr('src', '<? echo $hoverpic; ?>');
    })
})
</script>

Wenn alles in einer Datei stehen würde, wäre es einfach, weil ich dann die PHP-Variable in der Mouseover-Funktion verwenden könnte. Bei meiner aktuellen Seite muss ich allerdings die Views für ein ZF-Projekt schreiben, und dafür gibt es einige Auflagen:

- Die Bildnamen müssen zwingend aus PHP bezogen werden. JS Stringmanipulationen oder ähnliches sind nicht erlaubt.
- Es darf keinerlei JavaScript (jQuery, Ajax) in den Views stehen. Das muss komplett in eine .js Datei verschoben und wieder inkludiert werden.

Problem ist nun, dass mein mouseover() bei Auslagerung in eine Datei mit der Endung .js nicht mehr funktioniert. Weil ich dort kein PHP schreiben und demzufolge auch keinen Zugriff mehr auf die Variablen habe.

Gibt es dafür einen Lösungsansatz?

 

[Banana_Jones]

Vielleicht den Namen des Hoverbildes in ein data-Attribut des Images schreiben?

 

[Cheffchen]

Hallo,

genau in html5 sein soll sonst gibts glaube ich problem
oder
in leeres unsichtbares element schreiben

<!-- <p id="hoverimage"><? echo $hoverpic; ?><p>-->

oder ganz duselig in ein hidden input.

Cheffchen

 

[Tronjer]

Vielleicht den Namen des Hoverbildes in ein data-Attribut des Images schreiben?

Dafür ein dickes Danke. :-D

An das data Attribut hatte ich jetzt nicht gedacht. Das hier funktioniert problemlos auch bei ausgelagertem JS.

<div id="box">
<? foreach ($images as $image): ?>
    <img data-hover="<? echo $hoverpic; ?>" src="<? echo $image; ?>" /><br />
<? endforeach; ?>
</div>


$(document).ready(function() {
    $('#box img').mouseover(function() {
        var img = $(this).attr('data-hover');
	    $(this).attr('src', img);
    })
})