Ändern Sie Bild alt mit Javascript onclick

Ich habe ein thumbnail-Bild, dass, wenn geklickt haben, ändert sich ein größeres Bild auf der Seite. Ich habe diesen Teil des Codes funktioniert nur durch ein ändern der .src mit onclick. Gibt es auch eine Möglichkeit, die alt-und title-Attribute mit onclick?

InformationsquelleAutor computersaurus | 2010-07-10

  1. 7

    Können Sie setAttribute oder setzen Sie die Unterkunft direkt. So oder so funktioniert, die setAttribute ist die standard-DOM Art und Weise, es zu tun, obwohl.

    el.onclick = function() {
    var t = document.getElementById('blah');

    //first way
    t.src = 'blah.jpg';
    t.title = 'new title';
    t.alt = 'foo';

    //alternate way
    t.setAttribute('title', 'new title');
    t.setAttribute('alt', 'new alt');
    t.setAttribute('src', 'file.jpg');
}
    Beide Wege sind absolut standard. src/alt/title angegeben ist, in DOM Level 1 HTML. Ich würde empfehlen, diese Eigenschaften über setAttribute da der Zugriff auf Sie ist viel klarer zu Lesen, und es gibt schwere bugs im IE für getAttribute/setAttribute wo die DOM-Eigenschaften unterscheidet sich von der HTML-Attribute.
    Ich persönlich nutze die DOM-0-Stil der direkten Einstellung der Eigenschaft selbst, und ja, es gibt bugs.
    Vielen Dank für die weitere Klärung dieser Frage bobince.

    InformationsquelleAutor meder omuraliev

  2. 4

    In genau der gleichen Weise..

    document.getElementById('main_image_id').title = 'new title'
document.getElementById('main_image_id').alt = 'new alt'

    InformationsquelleAutor James Gaunt

  3. 3
    img.onclick = function() {
  //old fashioned
  img.src = "sth.jpg";
  img.alt = "something";
  img.title = "some title";
  //or the W3C way
  img.setAttribute("src", "sth.jpg");
  img.setAttribute("alt", "something");
  img.setAttribute("title", "some title"); 
}​;

    Hinweis: egal, welche Anwendung Sie verwenden, solange Sie den Umgang mit standard-Parametern.

    In Bezug auf die browser-Kompatibilität ist der "old fashioned" und "W3C" Weise die gleichen?
    In diesem begrenzten Fall ja, aber im Allgemeinen Nein, der IE hat viele Probleme mit getAttribute / setAttribute - und so sollten Sie auf vermeiden diese Methoden, wenn überhaupt möglich. nb. Attribute und Eigenschaften sind verschiedene Dinge in vielen Fällen! In diesem Fall .src bei der Einstellung verhält sich der gleiche wie die Einstellung des Attributs src, aber auf das Lesen, es wird wieder die vollständige URL das Attribut zeigt auf, was wird anders sein für relative URLs. (Das geschieht nicht im IE, aufgrund der oben genannten, dass die Bugs.)
    bobince, ist richtig. Es gibt ein paar bugs mit dem IE Umsetzung. Die meisten die ich kenne, ist src/href url-Verwandtschaft, for, style und class.
    ...plus jede Immobilie, die aus mehreren Wörtern (Kapitalisierung/Bindestriche), und alles, was einen anderen Datentyp als String: alle numerischen und booleschen Eigenschaften, event-Handler, und auch setAttribute auf dem Formular-Felder' value/checked/selected Attribute nicht tun, was Sie vielleicht denken. Es ist ein Morast. Vermeiden.
    ja, ich habe selber nie benutzt, andere als für die Streicher, vor allem benutzerdefinierte Attribute.

    InformationsquelleAutor gblazex

Schreibe einen Kommentar