Div Inhalte ändern mit JavaScript

[Patrick Andrieu]

Hallo 09az!

Das es "bbackground" oder "hide" nicht gibt, ist mir auch bewusst. Sehe es als temporäre "Abschaltung" dieser Attribute - sie sind ja auch für das vorliegende Problem nicht relevant, oder?

Das mag sein, aber wenn Du Dich nicht jetzt dran gewöhnst, sauber zu arbeiten, willst Du es nie lernen. Später werden deine Seiten schwer zu warten oder zu debuggen sein - glaub mir ;)

Hier also nochmal mein Ansatz eines erweiterten Div-Containers mit 2 Bildern, wobei sich eines anklicken lässt (bilddrei) und sich daraufhin das zweite Bild ändert (bildeins in bildzwei):

<div id="f0">
  <div style="width:9000px">
   <img src="bildeins.jpg" style="float:left; width:auto" alt="work">
   <a href="javascript:neuesBild()"><img id="Bild" src="bilddrei.jpg" alt="Bild 3" title="Bild 3"></a>
</div>
</div>

Hier sind zwei DIVs überflüssig. Du kannst dem DIV "f0" ebenso die Breite geben, die es nehmen soll (9000px). Die Breite des Bildes "bildeins" würde ich nicht mit width: auto definieren, sondern gar nicht mit CSS auf konventionelle Weise width="Maße" - height="hoehe" auch nicht vergessen!

Warum arbeitest Du nicht mit IDs:

HTML:

<div id="f0">  
 <img id="to_change" src="bildeins.jpg" width="..." height="..." alt="work" title="">  
 <img id="Bild" src="bilddrei.jpg" alt="Bild 3" title="Bild 3">  
</div>

CSS:

div#f0 { width:9000px; }  
img#Bild { cursor: pointer; } /* damit man erkennt, dass man klicken soll */  

JavaScript:

function pic_change {  
  document.getElementById('Bild').onclick = function () {  
    document.getElementById('to_change').src = "bildzwei.jpg";  
    document.getElementById('to_change').title = "was auch immer";  
  }  
}  
window.onload = pic_change;

Bei dem Beispiel sparst Du Dir ein a-Element mit einem Link zu nix und dem unschönen Pseudo-Protokoll »javascript:«. Beim Hovern des Bilds »Bild« ändert sich der Cursor zur Hand (cursor:pointer <- ist irritierend, aber pointer ist tatsächlich die Hand) und der User erkennt, dass er klicken kann.

Viele Grüße aus Frankfurt/Main,
Patrick