Toni: Zweispaltiges Layout

Beitrag lesen

Hallo Felix,

Zuallererst darf nach "onmouseout" kein Leerzeichen vor dem Istgleichzeichen stehen, da Leerzeichen innerhalb eines Tags als Trennzeichen zwischen den Attributen und ihren Werten verstanden werden.

Das war in der Originalversion nicht der Fall. Habe es (leider) zur besseren Übersichtlichkeit hier im Forum geändert.

Dass Du den <body> am Ende nicht ordnungsgemäß geschlossen hast, ist unsauberer Stil. Ob das bei HTML4.01 strict etwas ausmacht, weiß der Validator besser als ich. Und dass ein <img>-Element kein Kindelement von <body> sein darf (da es ein Inline-Element ist, das ein umgebendes Blockelement braucht), solltest Du auch berücksichtigen!

Nach diesen Änderungen hat sich aber auch nichts verändert.

Gruß
Toni

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title>Bildwechsel</title>  
<script type="text/javascript">  
var txtBild1 = '<h1>Überschrift<\/h1>Text Bild1 Zeile 1<br>Text Zeile 2<br><br>und ...'  
var txtBild2 = '<h1>Überschrift<\/h1>Text Bild2 Zeile 1<br>Text Zeile 2'  
  
function tauschen (BildNr,BildName,Text)  
  {window.document.images[BildNr].src=BildName;  
   document.getElementById('Text').innerHTML = Text;  
  }  
</script>  
  
<style type="text/css">  
  img#Bild {  
    float: left;  
    width: 515px height: 372px;  
    margin: 0; padding: 0;  
    border: 1px dashed silver;  
  }  
  
  div#Text {  
    margin-left: 515px;  
    height: 372px;  
    padding-left: 1em; padding-top: 80px;  
    border: 1px dashed silver;  
  }  
</style>  
</head>  
<body>  
  
<div>  
<img id="Bild" src="Bild1.jpg" width="515" height="372" alt=""  
     onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)"  
     onmouseout="tauschen (0, 'Bild1.jpg', txtBild1)">  
  
  
<div id="Text"  
     onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)"  
     onmouseout="tauschen (0, 'Bild1.jpg', txtBild1)">  
     <h1>Überschrift</h1>Text Bild1 Zeile 1<br>Text Zeile2<br><br>und ...  
</div>  
</div>  
</body>  
</html>