1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

JavaScript: class dynamisch in XHTML einfügen

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Migu, 07.02.07.

  1. Migu

    Migu Kaiser Wilhelm

    Dabei seit:
    14.02.04
    Beiträge:
    175
    Hallo Zusammen

    Habe folgendes Problem: entsprechend der Beschreibung auf http://www.alistapart.com/articles/imagegallery/ bin ich eine Website http://swiwi.co.nz/migu am Erstellen. In Apples Safari (nicht so beim Firefox) werden die Bilder im Hochformat in die Breite gezogen so dass sie ungewollt die gleiche Breite wie die Querformate besitzen. Im IE habe ich noch nichts getestet...

    Wie kann man das beheben? Vielleicht gibts ein Javascript dass Folgendes ermöglicht:

    wenn ich im <a>-tag welches das Thumbnail umschliesst zum Beispiel das Attribut name="hochformat" eingeben würde und eine css-class "hochformat" mit width=300px definieren würde,

    dann könnte mir ein javascript beim Mausklick auf das Thumbnail (onclick) in das <img>-tag des grossen Bildes das Attribut class="hochformat" reinschreiben.

    Falls das funktionieren kann, wie lautet das Javascript? Herzlichen Dank, Michael
     
  2. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    wenn die Höhe immer konstant ist, gib nur die Angabe ins CSS. Die Breite ergibt sich dann aus dem Seitenverhältnis.

    Gruß Stefan
     
  3. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Du kannst die Eigenschaft mit 'className' setzen oder auslesen. Also vielleicht so:
    Code:
    var dingdong = getElementById('irgendeineID');
    dinddong.className = 'hochformat';
    
     
  4. Migu

    Migu Kaiser Wilhelm

    Dabei seit:
    14.02.04
    Beiträge:
    175
    Hallo Stefan

    Habe ich auch gedacht und so ists im Moment eingestellt. Aber anders als im Firefox klappts im Safari nicht (sofern vor dem Hochformat ein Querformat geladen wurde).
     
  5. Migu

    Migu Kaiser Wilhelm

    Dabei seit:
    14.02.04
    Beiträge:
    175
    Hört sich schon mal gut an. Könntest du mir das Vorgehen noch etwas genauer erklären, habe nämlich keine Ahnung von Javascript.

    Thumbnail:
    Code:
    <a onclick="return showPic(this)" href="../photo/switzerland1.jpg" title="Text zum Bild"><img src="../thumbnail/switzerland1.jpg" alt="Text zum Bild" /></a>
    Foto in Grossansicht. Und da müsste jetzt entweder class="hochformat" oder class="querformat" rein, bestimmt durch ein im obigen Code XHTML-definierte Variable.
    Code:
    <img id="placeholder" src="../photo/switzerland1.jpg" alt="" />
    Javascript zur Darstellung des Bildes und Text zum Bild bei Mausklick:
    Code:
    //* http://www.alistapart.com/articles/imagegallery/ *//
    function showPic (whichpic) {
    if (document.getElementById) {
     document.getElementById('placeholder').src = whichpic.href;
     if (whichpic.title) {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
     } else {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
     }  return false; 
    } else {
     return true;
     }
    }
    Herzlichsten Dank, Michael
     
  6. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Du kannst mit Hilfe von getElementById() einen Zeiger auf das Objekt erhalten, welches die gefragte ID besitzt. Wenn also dieses Objekt dadurch bekannt ist, kannst Du diesem mit Hilfe der Eigenschaft className eine neue Klasse zuweisen.
     

Diese Seite empfehlen