JavaScript: class dynamisch in XHTML einfügen

[Migu]

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

 

[stk]

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

 

[Hilarious]

Du kannst die Eigenschaft mit 'className' setzen oder auslesen. Also vielleicht so:

var dingdong = getElementById('irgendeineID');
dinddong.className = 'hochformat';

 

[Migu]

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

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).

 

[Migu]

Du kannst die Eigenschaft mit 'className' setzen oder auslesen. Also vielleicht so:

var dingdong = getElementById('irgendeineID');
dinddong.className = 'hochformat';

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:

<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.

<img id="placeholder" src="../photo/switzerland1.jpg" alt="" />

Javascript zur Darstellung des Bildes und Text zum Bild bei Mausklick:

//* 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

 

[Hilarious]

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.

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.