zugriff auf alle img-tags über mouseover

[flying sheep]

ich möchte, dass eine funktion immer dann ausgelöst wird, wenn über ein img-tag gemouseovert wird, das einen bestimten string am ende seiner source hat.
beispiel:
ein img, das die funktion auslösen soll hat src="../images/blablubb_klein.jpg"

alle bilder die nicht angesprochen werden sollen haben das "_klein" nicht im namen.
ich hab mir schon folgendes überlegt:

[js]
???.onmouseover = enlarge(this);

function enlarge(imgvariable){
var L = imgvariable.length
if(imgvariable.src.substring(L-9,L)==_klein.jpg){...}
}
[/js]

aber wie drücke ich "???" aus?

Philipp

[Struppi]

[js]

Code Tags sehen hier so aus:
``

???.onmouseover = enlarge(this);

Das ist falsch, du willst:
???.onmouseover = enlarge;

function enlarge(imgvariable){

Die imgvariabel kannst du wegschmeissen, der Parameter ist entweder nichts (im IE) oder ein Eventobjekt (den meisten anderen Browser)

Aber das gesuchte Imageobjekt ist in dieser Funktion gleich this.

Struppi.

[flying sheep]

bin jetzt so weit:

  
this.onmouseover = enlarge;  
  
function enlarge(e){  
var L = e.length  
 if(e.src) {  
  *  
  if (e.src.substring(L-9,L)=='_klein.jpg'){}  
 }  
}  

aber mein firefox sagt (ich habe statt * ein "alert(e.src);" reingetan), dass es kein e.src gibt.
schade eigentlich, aber wieso nicht was stimmt denn nun schon wieder nicht?

[Struppi]

bin jetzt so weit:

so hab ich dir das aber nicht erklärt.

function enlarge(e){

e bedeutet Event, Firefox übergibt hier ein Event Objekt

var L = e.length
if(e.src) {

Was du willst ist this

Struppi.

[flying sheep]

bin jetzt so weit:

damit meinte ich, dass ich bis zu diesem punkt vorgedrngen bin, nicht fertig!

Was du willst ist this

aha.
ich komme leider mir dem event-ojekt nicht klar, trotz der selfhtml-erklärung.

also: ruft man über this.[event] = function; eine function(e) auf, kann man in dieser funktion per this auf das auslösende objekt zugreifen?
nach diesem schema hab ich jetzt mein script gebaut, aber es tut immer noch nix.
[script lang=javascript]
this.onmouseover = enlarge;

function enlarge(e){
 var L = this.length
 if(this.src) {
  alert(this.src)
  if (this.src.substring(L-10,L)=='_klein.jpg'){

}
 }
}
[/script]
tut mir leid, dass ich so begriffsstutzig bin, aber vielleicht könnte ich aus einer korrigierten version des scripts mehr lernen als mit verbesserungsvorschlägen, nach denen ich zurückkommen und nochmal nachfragen muss.

[Struppi]

also: ruft man über this.[event] = function; eine function(e) auf, kann man in dieser funktion per this auf das auslösende objekt zugreifen?

Nein, this in einer Funktion ist immer das Objekt des Kontext in dem die Funktion aufgerufen wird. Normalerweise ist das window, aber z.b. bei Eventfunktion ist es das Objekt das den Event aufruft.

this.onmouseover = enlarge;

Hier ist this gleich window, also
window.onmouseover = enlarge;

Du musst statt this dein Objekt angeben.

function enlarge(e){
var L = this.length

Hmm? Ein Image Objekt hat keine Eigenschaft length.

Struppi.

[flying sheep]

Hmm? Ein Image Objekt hat keine Eigenschaft length.

ups, ich meinte this.src.length

ich werde die ratschläge mal befolgen und schauen was ich hinkriege.

[JürgenB]

Hallo flying,

this.onmouseover = enlarge;

wer soll hier "this" sein? Du musst den onmouseover an das entsprechende Element hängen. Dieses geht z.B. im Tag mit <img onmouseover= oder per document.getElement... . Die getElement...-Methoden funktuionieren aber nur, wenn das Element schon erzeugt ist, also z.b. in einer Funktion, die per onload des body aufgerufen wird.

Nach dem Laden des Dokumentes kannst du auch mit dem Image-Objekt auf alle Bilder zugreifen. http://de.selfhtml.org/javascript/objekte/images.htm

Ein möglicher Algorithmus wäre:

Prüfe in einer Schleife die src aller Bilder, und wenn der Name deine Bedingung erfüllt, gebe dem Bild ein onmouseover-Event, das den src ändert.

Gruß, Jürgen

[ChrisB]

Hi,

this.onmouseover = enlarge;

wer soll hier "this" sein? Du musst den onmouseover an das entsprechende Element hängen. Dieses geht z.B. im Tag mit <img onmouseover=

In _diesem_ Fall hast du aber innerhalb der Funktion ueber this keinen Zugriff auf dieses Image-Objekt.

MfG ChrisB

[JürgenB]

Hallo ChrisB,

wer soll hier "this" sein? Du musst den onmouseover an das entsprechende Element hängen. Dieses geht z.B. im Tag mit <img onmouseover=

In _diesem_ Fall hast du aber innerhalb der Funktion ueber this keinen Zugriff auf dieses Image-Objekt.

stimmt. Aber für flying sheep ist die Lösung, die Events im Javascript zu setzen, sowieso die bessere.

Gruß, Jürgen

[flying sheep]

[script lang=javascript]onload = function () {
 var i = 0;
 while (i <= 99) {
  var L = document.images[i].src.length;
  if (document.images[i].src.substring(L-9,L)=='_klein.jpg'){
   document.images[i].onmousover = enlarge;
  }
  i++;
 }
}

function enlarge(e){
 alert('muh');
}[/script]

ist mein aktueller stand.
aber: "document.images[i] has no properties"

[JürgenB]

Hallo flying,

aber: "document.images[i] has no properties"

hast du wirklich 100 Bilder? Warum benutzt du nicht document.images.length?

Existieren die Bilder schon, wenn das script aufgerufen wird? Script im Head, wenn nicht in Funktionen eingekleidet, laufen sofort, bevor die Seite und damit die Bilder da sind. Lege dein Script in eine Funktion und starte sie über den onload des body.

Gruß, Jürgen

[Struppi]

[script lang=javascript]onload = function () {
var i = 0;
while (i <= 99) {
  var L = document.images[i].src.length;
  if (document.images[i].src.substring(L-9,L)=='_klein.jpg'){
   document.images[i].onmousover = enlarge;
  }
  i++;
}
}

function enlarge(e){
alert('muh');
}[/script]

ist mein aktueller stand.
aber: "document.images[i] has no properties"

Ein weitverbreitetes Problem - du kannst überprüfen was du verwendest und hast die Möglichkeit zu erkennen was dein Fehler ist.

Wobei aber das wesentlich allgemeingültiger ginge:

for( var i = 0; i < document.images.length; i++) {  
if(document.images[i]) {  
var L = document.images[i].src.length;  
if (document.images[i].src.substring( L - 9, L) == '_klein.jpg') document.images[i].onmousover = enlarge;  
}  

Struppi.

[flying sheep]

Wobei aber das wesentlich allgemeingültiger ginge

ich bin inzwischen so weit, dass code, der an der stelle * ausgeführt wird, auch wirklich af das bild angewendet wird. nur leider wird dem mouseover der bilder nichts zugeordnet.
also: wenn ich statt * schreibe "document.images[i].src='';", dann werden alle bilder, die ich haben will leer.
aber wenn ich den code (ohne *) ausführen lasse und mit der maus über ein bild gehe, passiert nix. (auch ein textalert statt dem klassenwechsel nicht)

onload = function(){  
 for(var i=0; i<document.images.length; i++) {  
  if(document.images[i]) {  
   var L = document.images[i].src.length;  
   if (document.images[i].src.substring(L-10,L) == '_klein.jpg' || document.images[i].src.substring(L-10,L) == '_klein.JPG') {  
    *  
    document.images[i].onmousover = enlarge;  
    document.images[i].onclick = close;  
   }  
  }  
 }  
}  
function enlarge(e){  
 if(this.className=='v'){  
  this.className = 'vbig';  
 } else {  
  this.className = 'hbig';  
 }  
}

[Struppi]

document.images[i].onmousover = enlarge;
    document.images[i].onclick = close;

Das sollte exakt so funktionieren. wie sieht es mit Fehlermeldungen aus?

Struppi.

[Struppi]

document.images[i].onmousover = enlarge;
    document.images[i].onclick = close;

Nachtrag: Bennen close um es gibt bereits eine Funktion window.close()
sollte aber egal sein.

Struppi.

[flying sheep]

Das sollte exakt so funktionieren. wie sieht es mit Fehlermeldungen aus?

mein hirn gibt nach einer halben stunde die fehlermeldung aus, dass ich
onmousover durch
onmouseover ersetzen sollte -.-

danke euch allen. mein letztes script + ein "e" funktioniert

[Struppi]

mein hirn gibt nach einer halben stunde die fehlermeldung aus, dass ich
onmousover durch
onmouseover ersetzen sollte -.-

Hab ich doch gleich gesagt ;-)

Nee, nicht gesehen. Das sind so blöde Fehler, die sich kaum vermeiden lassen.

Struppi.