JS-Hover global für eine Seite

[peaceman]

Hallo Forenuser!

Ich habe ein Script angedacht, dass alle Bilder auf der Seite
mit einem möglichen Hover-Austausch versieht. Alle Bilder sind
"bildname_up.jpg" benannt, alle zugehörigen HoverImages mit
"bildname_over.jpg". Leider habe ich anscheinend Tomaten auf den
Augen, und weiß nicht, wo hier der Haken ist. Hier der
zugehörige Quelltext:

Beispiel IMG-Tag in der Seite:

<img src="/images/image1_up.jpg" onmouseover="imghover(this, 'over');" onmouseout="imghover(this, 'up');">

Eingebundenes JS:

function imghover(imgobj, dir) {

if (dir = 'over') {
  var oldsrc = imgobj.src;
  var newsrc = oldsrc.replace(/_up/, "_over");
  imgobj.src = newsrc;
 }
 if (dir = 'up') {
  var oldsrc = imgobj.src;
  var newsrc = oldsrc.replace(/_over/, "_up");
  imgobj.src = newsrc;
 }
}

Vielen Dank für Tipps und Schubser in die richtige Richtung.

[Cheatah]

Hi,

Leider habe ich anscheinend Tomaten auf den
Augen, und weiß nicht, wo hier der Haken ist.

ja, das sehe ich genauso.

if (dir = 'over') {

Und, hat diese Zuweisung wohl geklappt?

Vielen Dank für Tipps und Schubser in die richtige Richtung.

Beim nächsten Mal unterstütze Deine potenziellen Helfer bitte mit einer Fehlerbeschreibung. Nicht immer - um nicht zu sagen fast nie - ist das Problem so offensichtlich.

Cheatah

[peaceman]

Leider habe ich anscheinend Tomaten auf den
Augen, und weiß nicht, wo hier der Haken ist.

ja, das sehe ich genauso.

»»

ok, es war halt ein langer Tag ;)

if (dir = 'over') {
Und, hat diese Zuweisung wohl geklappt?

*kopfkratz* machmal sieht man den Wald vor lauter Bäumen/Code nicht...

Beim nächsten Mal unterstütze Deine potenziellen Helfer bitte
mit einer Fehlerbeschreibung. Nicht immer - um nicht zu sagen
fast nie - ist das Problem so offensichtlich.

Na klar, ich werd dran denken.

Dennoch - Muchas Gracias

peaceman

[Gunnar Bittersmann]

Hello out there!

function imghover(imgobj, dir) {

if (dir = 'over') {
  var oldsrc = imgobj.src;
  var newsrc = oldsrc.replace(/_up/, "_over");
  imgobj.src = newsrc;
}
if (dir = 'up') {
  var oldsrc = imgobj.src;
  var newsrc = oldsrc.replace(/_over/, "_up");
  imgobj.src = newsrc;
}
}

Vom '=='-Problem abgesehen:
Wenn die Bedingung der ersten Abfrage erfüllt ist, kann man sich die zweite Abfrage sparen. Die zweite sollte also im Else-Zweig der ersten stehen:

function imghover(imgobj, dir)  
{  
 if (dir == 'over')  
 {  
  var oldsrc = imgobj.src;  
  var newsrc = oldsrc.replace(/_up/, "_over");  
  imgobj.src = newsrc;  
 }  
 else if (dir == 'up')  
 {  
  var oldsrc = imgobj.src;  
  var newsrc = oldsrc.replace(/_over/, "_up");  
  imgobj.src = newsrc;  
 }  
}

Wenn dafür gesorgt ist, dass der Parameter 'dir' nur mit den Werten 'over' bzw. 'up' gefüttert wird, kann die zweite Abfrage auch ganz entfallen. Und gemeinsame Codezeilen müssen nicht doppelt notiert werden:

function imghover(imgobj, dir)  
{  
 var oldsrc = imgobj.src;  
  
 if (dir == 'over')  
 {  
  var newsrc = oldsrc.replace(/_up/, "_over");  
 }  
 else  
 {  
  var newsrc = oldsrc.replace(/_over/, "_up");  
 }  
  
 imgobj.src = newsrc;  
}

Dann bietet sich die einfache Entweder-Oder-Abfrage an:

function imghover(imgobj, dir)  
{  
 var oldsrc = imgobj.src;  
 var newsrc = (dir == 'over' ? oldsrc.replace(/_up/, "_over") : oldsrc.replace(/_over/, "_up"));  
 imgobj.src = newsrc;  
}

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

function imghover(imgobj, dir)

{
var oldsrc = imgobj.src;
var newsrc = (dir == 'over' ? oldsrc.replace(/_up/, "_over") : oldsrc.replace(/_over/, "_up"));
imgobj.src = newsrc;
}

  
Wobei die vielen Zuweisungen nicht notwendig sind:  
  
~~~javascript
function imghover(imgobj, dir)  
{  
 imgobj.src = (dir == 'over' ? imgobj.src.replace(/_up/, "_over") : imgobj.src.replace(/_over/, "_up"));  
}

Statt des Parameters dir mit den Werten 'over' und 'up' ließe sich auch ein Parameter isOver mit den Werten true bzw. false verwenden:

<img src="/images/image1_up.jpg" onmouseover="imghover(this, true);" onmouseout="imghover(this, false);">

Die Funktion dann:

function imghover(imgobj, isOver)  
{  
 imgobj.src = (isOver ? imgobj.src.replace(/_up/, "_over") : imgobj.src.replace(/_over/, "_up"));  
}

See ya up the road,
Gunnar