text an img tag anhängen

[j4velin]

heyho,

ich will in js ne kleine funktion schreiben, die alle bilder auf ner seite, die zu groß sin, verkleinert. das funktioniert soweit auch schon ganz gut. nur wenn ich an jedes verkleinerte bild jetzt noch nen link anhängen will klappt das nich.

habs ma mit appendchild versucht, aber das scheint bei img tags nicht zu funktionieren:

postedimages_resize()
{
  var anz_elemente = document.getElementsByTagName("img").length;
  for(i=0;i<anz_elemente;i++)
 {
    var bild= document.getElementsByTagName("img")[i];
    if (bild.width > (0.75*window.innerWidth))
   {
      bild.width = 0.75*window.innerWidth;
      var zeile = document.createElement("p");
      var text = document.createTextNode("<a href='"+element.src+"'>[Volle Bildgröße]</a>");
      zeile.appendChild(text);
      bild.appendChild(zeile);
    }
  }
}

hat jmd ne alternative?

[Felix Riesterer]

Liebe(r) j4velin,

an jedes verkleinerte bild jetzt noch nen link anhängen

soll das heißen, dass das Bild anklickbar wird?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Hal3luj4]

Mit html weiss ichs...

<img src="Bla.dateityp" WIDTH="x" HEIGHT="x">
wobei x ne Zahl ist die die pixel angibt (Also: die Auflösung)

[j4velin]

soll das heißen, dass das Bild anklickbar wird?

ehm naja das wär natürlich auch ne möglichkeit ^^
wollte eigentlich nen "<a href=''>volle bildgröße</a>"-link direkt nach dem bild, aber wenn du mir sagen kannst wie ich die <a> tags um den img tag krieg, so dass das bild dann en link is, würd mir das auch weiterhelfen ;)

[Felix Riesterer]

Liebe(r) j4velin,

aber wenn du mir sagen kannst wie ich die <a> tags um den img tag krieg, so dass das bild dann en link is, würd mir das auch weiterhelfen ;)

das ist eigentlich ganz einfach: <a>-Element http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=erzeugen, vor das <img>-Element http://de.selfhtml.org/javascript/objekte/node.htm#insert_before@title=einhängen, das <img>-Element http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title="ausschneiden" und in das <a>-Element http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=einfügen.

Du solltest nur beachten, dass Du das <img>-Objekt nicht "verlierst", und dass Du das Elternelement des <img>-Objektes ermittelst.

Am Besten Du fängst so an:

function verlinken(img) {  
    // img enthält eine Referenz auf das entsprechende <img />-Element  
  
    var imgParent = img.parentNode; // Elternelement des Bildes  
  
    var link = document.createElement("a");  
    link.href = ".../pfad/datei..."; // Linkziel  
  
    imgParent.insertBefore(link, img); // Link vor dem Bild einfügen  
    imgParent.removeChild(img); // Bild ausschneiden  
  
    /* Normalerweise sollte man sich den Rückgabewert von removeChild  
    in einer Variablen merken, denn er enthält das eben "ausgeschnittene"  
    Element. Da "img" hier aber die ganze Zeit eh schon das Element  
    enthält, kann man sich das hier sparen. */  
  
    link.appendChild(img); // Bild in das <a>-Element einhängen - fertig.  
}

Ich habe den Code nicht getestet - das darfst Du jetzt machen. ;-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Struppi]

aber wenn du mir sagen kannst wie ich die <a> tags um den img tag krieg, so dass das bild dann en link is, würd mir das auch weiterhelfen ;)

das ist eigentlich ganz einfach: <a>-Element http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=erzeugen, vor das <img>-Element http://de.selfhtml.org/javascript/objekte/node.htm#insert_before@title=einhängen, das <img>-Element http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title="ausschneiden" und in das <a>-Element http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=einfügen.

Nur als Hinweis, ein onclick Event sollte hier reichen

Struppi.

[Felix Riesterer]

Lieber Struppi,

Nur als Hinweis, ein onclick Event sollte hier reichen

das war aber nicht die exakte Fragestellung, oder? Natürlich kann man mittels onclick auch einen Verweis realisieren. Man kann dem Bild sogar den passenden Cursor zuweisen... Aber wenn gefragt wird, wie man "die <a> Tags um das Bild" bekommt, dann muss ich doch wohl so antworten, oder?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Struppi]

das war aber nicht die exakte Fragestellung, oder? Natürlich kann man mittels onclick auch einen Verweis realisieren. Man kann dem Bild sogar den passenden Cursor zuweisen... Aber wenn gefragt wird, wie man "die <a> Tags um das Bild" bekommt, dann muss ich doch wohl so antworten, oder?

Naja, auch wenn es Unsinn ist?
Da wir von einer JS Lösung sprechen gibt es absolut keinen Grund so umständlich ein neues Element in das Dokument einzufügen, es reicht ein simples onclick.

Struppi.

[wahsaga]

hi,

das <img>-Element http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title="ausschneiden" und in das <a>-Element http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=einfügen.

"Ausschneiden" brauchst du nicht - wenn du ein bereits im DOM befindliches Element per appendChild/insertBefore woanders einhängst, wird es automatisch von seiner aktuellen Position entfernt. Also "umhängen" in einem Schritt.

gruß,
wahsaga

[Felix Riesterer]

Lieber wahsaga,

"Ausschneiden" brauchst du nicht - wenn du ein bereits im DOM befindliches Element per appendChild/insertBefore woanders einhängst, wird es automatisch von seiner aktuellen Position entfernt. Also "umhängen" in einem Schritt.

ich war mir nicht sicher, ob das in allen Browsern klappt. Aber wenn Du die Erfahrung gemacht hast, dass das in allen Browsern so gelingt, dann nehme ich Deinen Rat gerne an.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[MudGuard]

Hi,

ich war mir nicht sicher, ob das in allen Browsern klappt.

Das muß klappen - ein Element kann nur ein Elternelement haben:

parentNode: es kann nur einen geben - seit 1986 im Kino, mit Christopher Lambert ;-)

cu,
Andreas

[wahsaga]

hi,

habs ma mit appendchild versucht, aber das scheint bei img tags nicht zu funktionieren

Natürlich nicht - Bilder haben keine Kinder.

Entweder fügst du einen Link vor oder nach einem Bild ein - oder das Bild in einen Link.

gruß,
wahsaga