NAME oder ID einer grafik an funktion übergeben *schweißtropf*

[willie.de]

hallö zusammen,

ich sitze hier schon ne ewigkeit und versuche JavaScript und/oder mich selbst auszutricksen...

ich hab ne ziemlich lange liste von vorschaugrafiken, beim klick auf eine solche soll sich (ausschließlich) eine andere grafik ändern in eine große grafik (des geklickten bildes). ich möchte mir aber (und ladezeit) ersparen, in jeden funktionsaufruf die neue grafik hineinzuschreiben. mein hauptproblem liegt eigentlich darin, dass die wirklich vielen bilder keine einheitlichen bezeichnungen haben, dann wäre einiges einfacher.

mein plan ist folgender:

<img src="bild1.gif" alt="" onClick="xlbild(NAME);">
...............................................^
genau hier ist mein problem
   <img src="pic25.gif" alt="" onClick="xlbild(NAME);">
   <img src="pic26.gif" alt="" onClick="xlbild(NAME);">
[...]
   <img src="bildchen158.gif" alt="" onClick="xlbild(NAME);">
   <img src="bildchen159.gif" alt="" onClick="xlbild(NAME);">

<img src="empty.gif" alt="" id="foto">
in diesen dummy werden die großen grafiken geladen.

am ende weise ich allen grafiken ihre quelle als name (oder alternativ eine id) zu:

for(var i=0;i<document.images.length;i++) {
   var bildname=document.all.tags("img")[i].src;
   document.all.tags("img")[i].setAttribute("name",bildname,"false");
   }

das funxt schon mal. und dann möchte ich den namen (beim klicken) an die funktion übergeben, die so aussehen könnte:

function xlbild(NAME) {
   get_id("foto").src=document.getElementsByName(NAME)[0].src;
   }

die schreibweise wie hier '(NAME)' stimmt natürlich nicht. ich dachte, ich käme hier irgendwie mit 'this' oder 'eval()' weiter, aber klappt nicht.

vielen dank für eure hilfe und natürlich an den/die linksetzer ;-)

grüße!
willie.de *jemandderkeineahnunghat*

[Norbert Klein]

n'Abend.

am ende weise ich allen grafiken ihre quelle als name (oder alternativ eine id) zu:

for(var i=0;i<document.images.length;i++) {
   var bildname=document.all.tags("img")[i].src;
   document.all.tags("img")[i].setAttribute("name",bildname,"false");
   }

Soweit ich das weiß, erwartet setAttribute nur zwei Parameter, außerdem sollte false ohne Anführungszeichen übergeben werden, sonst isses nämlich eine Zeichenkette.
Dann solltest du aus document.all.tags("img")[i] document.getElementsByTagName("img")[i] machen.

das funxt schon mal. und dann möchte ich den namen (beim klicken) an die funktion übergeben, die so aussehen könnte:

function xlbild(NAME) {
   get_id("foto").src=document.getElementsByName(NAME)[0].src;
   }

get_id => document.getElementById

die schreibweise wie hier '(NAME)' stimmt natürlich nicht. ich dachte, ich käme hier irgendwie mit 'this' oder 'eval()' weiter, aber klappt nicht.

this.name müsste eigentlich funktionieren:

<img src="http://selfhtml.teamone.de/grafik/anzeige/cliparts/clip02.gif" alt="" onclick="alert(this.name)">
<script type="text/javascript">
<!--
 document.getElementsByTagName("img")[0].setAttribute("name",document.getElementsByTagName("img")[0].src);
//-->
</script>

Wobei der Name nicht wirklich zu gebrauchen ist (http://selfhtml.teamone.de/javascript/sprache/regeln.htm#namen), da er das ganze Pfad-Gewusel beinhaltet, d.h. du müsstest das Ganze aufbröseln, ungefähr so:

<img src="http://selfhtml.teamone.de/grafik/anzeige/cliparts/clip02.gif" alt="" onclick="alert(this.name)">
<script type="text/javascript">
<!--
 n = document.getElementsByTagName("img")[0].src
 n = n.substring(n.lastIndexOf("/")+1,n.lastIndexOf("."));
 document.getElementsByTagName("img")[0].setAttribute("name",n);
//-->
</script>

Gruß
Norbert

[willie.de]

hallo,

und vor allem: danke!

Soweit ich das weiß, erwartet setAttribute nur zwei Parameter, außerdem sollte false ohne Anführungszeichen übergeben werden, sonst isses nämlich eine Zeichenkette.
Dann solltest du aus document.all.tags("img")[i] document.getElementsByTagName("img")[i] machen.

ich war wir´klich schon ein bisschen müde. die schreibweise mit drei werten ist MS-syntax.

this.name müsste eigentlich funktionieren:

ganau das ist die lösung! (so einfach...)

Wobei der Name nicht wirklich zu gebrauchen ist (http://selfhtml.teamone.de/javascript/sprache/regeln.htm#namen), da er das ganze Pfad-Gewusel beinhaltet, d.h. du müsstest das Ganze aufbröseln, ungefähr so:

is schon klar. mein fertiges script (für MSIE4+, Mozilla und NN6+) sieht so aus:

zuerst ne allgemeine browser-abfrage ähnlich http://selfhtml.teamone.de/dhtml/beispiele/dhtml_bibliothek.htm, dann verkürzung der name-abfrage:

function get_name(name)
   {
   if(browser == "ie5x" || browser == "nn6" || browser == "Opera") return document.getElementsByTagName(name);
   else if(browser == "ie4") return eval("document.all." + name);
   }

zuweisung der namen:

for(var i=0;i<document.images.length;i++) {
   var bild=get_name("img")[i].src;
   var bildname=bild.substr(42,bild.length); //42 für nen langen pfad
   get_name("img")[i].setAttribute("name",bildname);
   }

die funktion selbst (vorher noch ein Opera-ausschluss):

function opic(bname) {
   get_id("foto").src="http://www.mein-pfad.de/" +bname;
   }

und in den images steht 'onClick="opic(this.name);"'

DANKE!!!
willie.de *jemandderkeineahnunghat*

ps: nebenbei drängt sich mir die frage auf, ob man ein "attribut" namens 'onClick' zuweisen kann. (funxt erstmal net)

[Lukas Hänel]

Hallo,

ps: nebenbei drängt sich mir die frage auf, ob man ein "attribut" namens 'onClick' zuweisen kann. (funxt erstmal net)

Weil ich das in Selfhtml auch nicht gefunden habe, bzw. es auch geschrieben steht, dass es das noch nicht mit Standard gibt, es aber zumindest in IE5.5 u. NN6 möglich ist, erwähne ich das hier:

[object].onclick = funktion;

function... Name einer Funktion, ohne "()".

z.B.:
get_name("img")[i].onclick=opic;

Man kann dabei aber keine Parameter übergeben. JS würde eine Anweisung der Form:
get_name("img")[i].onclick=opic(Name)
so interpretieren, dass du dem onclick-Event des Objektes den RückgabeWert("return 123") zuweisen willst. Wenn das aber keinen Sinn macht(wie z.B. bei deiner Funktion) gibt es einen Fehler.

Weil ich das Thema aber irgendwie im Moment spannend finde, noch mein zweiter Tip:
document.onclick = opic;
Bei jedem Klick auf die Seite würde dann die Funktion aufgerufen. Du müsstest dann überprüfen, ob das angeklickte Element(*1) ein Bild ist (*3) und in diesem Fall das große Bild mit dem bisschen verändertem(*4) src des angeklickten Elements belegen.

(*1) bei NS6 ist das e.target (*2), bei IE event.srcElement
(*2) Funktionsdefinition mit function opic(e)
(*3) [object].nodeName == "IMG"
(*4) Unterschied zwischen Vorschau Bild und Hochglanzgraphik

cu.Lukas

[Norbert Klein]

Hallo.

get_name("img")[i].onclick=opic;

Man kann dabei aber keine Parameter übergeben.

Man kann schon, entweder so:

function a(){opic(this.name)}
 get_name("img")[i].onclick = a;

oder so:

get_name("img")[i].onclick = function(){opic(this.name)};

Gruß
Norbert

[Lutz T.]

Hallo Willie,
man soll sich's nicht unnötig kompliziert machen und dann den Code auch möglichst so gestalten, daß ihn auch ältere nicht-IE-Browser interpretieren können:
document.all.tags kann nur IE, getElementsByName können nur die neueren Browser, deshalb würd ich das mal lieber weglassen.
Hier mal ein Vorschlag:

<html>
<head>
</head>
<body>
<img src="bild1.gif" onclick="ClickImg(this)">
<img src="bild2.gif" onclick="ClickImg(this)">
<script>
function ClickImg(anImg)
{ for (var i=0; i<document.images.length; i++)
    if (document.images[i]==anImg) alert(i);
}
</script>
</body>
</html>
Anstelle von alert(i) kann man die Funktion zum Bildanzeigen aufrufen
und die Bildnamen dazu aus einem Array holen.
( anstelle von
for(var i=0;i<document.images.length;i++) {
var bildname=document.all.tags("img")[i].src;
document.all.tags("img")[i].setAttribute("name",bildname,"false");
}
machst Du
Bildname=new Array();
for(var i=0;i<document.images.length;i++) Bildname[i]="...";
)
MfG. Lutz T.

[willie.de]

hallo,

man soll sich's nicht unnötig kompliziert machen und dann den Code auch möglichst so gestalten, daß ihn auch ältere nicht-IE-Browser interpretieren können:
document.all.tags kann nur IE, getElementsByName können nur die neueren Browser, deshalb würd ich das mal lieber weglassen.

ja. alte gewohnheit: ich schreibe beim testen immer noch für M$ und stelle erst wenns funxt für Mozilla etc. um. tschuldigung!

Anstelle von alert(i) kann man die Funktion zum Bildanzeigen aufrufen
und die Bildnamen dazu aus einem Array holen.

ich bin dem anderen tipp gefolgt, ich war ja schon auf der 'this'-fährte. trotzdem danke!

grüße!
willie.de *jemandderkeineahnunghat*