Links mittels onclick erzeugen - was mache ich falsch?

[Yadgar]

High!

Für eine Navigationsleiste,

<Disclaimer>
Jaaa, ich weiß, Navigationselemente mit Javascript erzeugen ist pfuibäh, aber was will man machen, wenn die Dinger an möglichst viele Bildschirmauflösungen anzupassen sind und übermorgen Deadline ist?
</Disclaimer>

die komplett mit Javascript generiert wird, sollen den einzelnen Button-Bitmaps mittels des onClick-Eventhandlers Zieladressen (also sozusagen Links) zugewiesen werden. Anscheinend habe ich aber hinsichtlich des Attributcharakters von Eventhandlern irgendwas missverstanden, jedenfalls werden zwar die Buttons angezeigt, ich kann aber per Klick auf sie nicht zu den Zieladressen springen. Was mache ich falsch?

Hier ist der Code:

[javascript]
function navFormat_German()
{
  var w=screen.width;
  for (i=0; i<8; i++)
  {
      var iw=w/13.06;
      var ih=iw/3.5;
      var lnk=document.createAttribute("onClick");
      var img=document.createElement("img");
      switch(i)
      {
        case 0:
          lnk.nodeValue="start-d_text.html";
          img.src="bstart-d.png";
          break;
        case 1:
          lnk.nodeValue="bio-d.html";
          img.src="bbio-d.png";
          break;
        case 2:
          lnk.nodeValue="albums-d.html";
          img.src="balbum.png";
          break;
        case 3:
          lnk.nodeValue="gallery-d.html";
          img.src="bgallery-d.png";
          break;
        case 4:
          lnk.nodeValue="news-d.html";
          img.src="bnews.png";
          break;
        case 5:
          lnk.nodeValue="events-d.html";
          img.src="bevents.png";
          break;
        case 6:
          lnk.nodeValue="fanclub-d.html";
          img.src="bfanclub-d.png";
          break;
        case 7:
          lnk.nodeValue="contact-d.html";
          img.src="bcontact-d.png";
          break;
      }

img.width=parseInt(iw);
      img.height=parseInt(ih);
      img.setAttributeNode(lnk);
      document.getElementsByTagName("td")[i].appendChild(img);
  }
}
[/javascript]

[ingo]

Hi,

lnk.nodeValue="start-d_text.html";

Ich denke mal du hast schon fast alles richtig gemacht.
Onclick erwartet einen javascript-befehl.

wenn du immer

lnk.nodeValue="location.href = 'start-d_text.html'";

schreibst sollte es klappen.

schöne grüße
ingo

[Yadgar]

High!

Hi,
wenn du immer

lnk.nodeValue="location.href = 'start-d_text.html'";

schreibst sollte es klappen.

Das tut es... bis auf den Umstand, dass die Zieldatei natürlich nicht im Frame der Navigationsleiste, sondern im Hauptframe geöffnet werden soll - wie bekomme ich in onclick die target-Angabe unter?

Bis bald im Khyberspace!

Yadgar

[Karin]

Hi,

Das tut es... bis auf den Umstand, dass die Zieldatei natürlich nicht im Frame der Navigationsleiste, sondern im Hauptframe geöffnet werden soll - wie bekomme ich in onclick die target-Angabe unter?

Gar nicht. Setze den Link auf hauptframe.location.href="...".

LG

[Der Martin]

Hallo,

<Disclaimer>
Jaaa, ich weiß, Navigationselemente mit Javascript erzeugen ist pfuibäh, aber was will man machen, wenn die Dinger an möglichst viele Bildschirmauflösungen anzupassen sind und übermorgen Deadline ist?
</Disclaimer>

"eigentlich" ganz einfach: Man gibt deren Größe über CSS relativ an, etwa in %, eventuell auch in em, dann sind sie relativ zur Schriftgröße. Und die Bildschirmauflösung hat nun wirklich nichts damit zu tun; was du meinst, ist allenfalls die Fenstergröße.
Vielleicht möchtest du also die fast fertige Javascript-Variante nur als Provisorium sehen, das dringend noch eine JS-freie Fallback-Lösung braucht, eventuell sogar ein komplettes Redesign.

Was mache ich falsch?

Ich sehe mehrere gemeine Fehler.

var w=screen.width;

Wie schon gesagt: Die Größe des Bildschirms interessiert dich eigentlich nicht, was du suchst, ist höchstens die Fensterbreite (body.offseWidth).

var lnk=document.createAttribute("onClick");

Hier hängst du dem document-Objekt ein Attribut namens onClick an. Erstens meinst du wahrscheinlich gar nicht das  document-Objekt, sondern eins deiner img-Objekte. Zweitens ist die Vorgehensweise mit setAttribute() problematisch, besser ist <objekt>.<eigenschaft>=<wert>.
Drittens wird sich kein Browser der Welt um eine Eigenschaft namens onClick kümmern - du meinst ganz bestimmt onclick. Javascript ist case-sensitive.

lnk.nodeValue="start-d_text.html";

Hier weist du dem onclick-Handler (ich nehme an, den hast du in Wirklichkeit gemeint) den String "start-d_text.html" zu. Und das ist Unsinn. Ein Eventhandler ist eine Javascript-Funktionsreferenz, kein String, der zufällig aussieht wie eine URL.

So long,
 Martin

[Yadgar]

High!

"eigentlich" ganz einfach: Man gibt deren Größe über CSS relativ an, etwa in %, eventuell auch in em, dann sind sie relativ zur Schriftgröße. Und die Bildschirmauflösung hat nun wirklich nichts damit zu tun; was du meinst, ist allenfalls die Fenstergröße.

Na gut, später mal...

Hier hängst du dem document-Objekt ein Attribut namens onClick an. Erstens meinst du wahrscheinlich gar nicht das  document-Objekt, sondern eins deiner img-Objekte.

Ach, man kann die Attributknoten direkt in schon definierten Objekten erzeugen? Das wusste ich nicht...

Bis bald im Khyberspace!

Yadgar

[Struppi]

Ach, man kann die Attributknoten direkt in schon definierten Objekten erzeugen? Das wusste ich nicht...

Nein, die Attribute existieren bereits. Du musst sie nicht erzeugen.

Struppi.

[Struppi]

[javascript]
function navFormat_German()
{
  var w=screen.width;
  for (i=0; i<8; i++)
  {
      var iw=w/13.06;
      var ih=iw/3.5;
      var lnk=document.createAttribute("onClick");

Das ist unnötig , da jedes HTML Element bereits ein onclick Attribut hat.

var img=document.createElement("img");

Einfach nur:

img.onclick = function() {  
window.location.href = '....';  
}  

Struppi.