wucher wichtel: onmouseover - Bilder vergrößern, ABER...

Beitrag lesen

Hallo!

[Quelltext]

Du musst das <div> korrekt schließen (also vor dem </td>). Verwendest du Tabellen, um das Layout deiner Seite zu bestimmen? Außerdem ist document.all veraltet. Benütze besser getElementById().

Ja, mit CSS geht das. Gib jedem Bild eine ID. Dieser ID weißt du display:none zu. Und diesen Wert kannst du dann per JavaScript verändern.

Entschuldige, Ich bin kein Programmierer, und habe keine Ahnung, was ich da mache. Ich such mir die Codes zusammen, und spiel damit rum, bis was einigermaßen passendes rauskommt!

Ich bin auch kein richtiger Programmierer. Noch jedenfalls :-)

Du meinst, ich muss jetzt quasi 2 mal den Code einbauen!? Einmal mit ID x und einmal mit y (z.B.)
Aber was dann? Einmal nur ein kleines Bild laden lassen?

Ich weiß nicht, was du damit meinst.

Und was meinst du mit CSS? Das ist doch das Stylesheet oder? Dort habe ich bisher keine Einträge diesbezüglich gemacht bzw machen müssen!

CSS ist das Stylesheet. Kann man so sagen. Ich würde dir raten, wenigstens ein bisschen im SELFHTML-Kapitel über CSS und JavaScript zu lesen. Dann hast du gute Grundlagen und es macht mehr Spaß :-)

Jetzt zu deinem Problem. Ich erkläre den Code ausführlich, damit du verstehst, was da passiert.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<!--Achte darauf, dass du deine Seite nicht in den [link:http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform@title=Quirks Modus] schickst-->  
  
<html>  
<head>  
 <title>Test</title>  
<script type="text/javascript">
~~~~~~javascript
  
function machGross(){  
 var ID = document.getElementById("bild"); // auf das Bild zugreifen  
 ID.style.width = "600px";  //per [link:http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objekt] auf CSS-Eigenschaften zugreifen und neue Größe festlegen  
 ID.style.height = "450px"; //dito  
}  
function machKlein(){  
 var ID = document.getElementById("bild");  
 ID.style.width = "300px";  
 ID.style.height = "225px";  
}  

~~~~~~html
  
</script>  
</head>  
  
<body>  
<p>  
 <a href="#" onmouseover="machGross()" onmouseout="machKlein()">Bild gro&szlig; machen</a>  
 <!--Per onmouseover und onmouseout die Funktionen aufrufen-->  
</p>  
<p>  
 <img src="test.jpg" id="bild" style="width:300px; height:225px" alt="">  
 <!--Dem Bild eine ID geben, damit darauf zugegriffen werden kann. Und die Größenangaben per style="" nicht vergessen-->  
</p>  
</body>  
</html>  

Um das Anzeigen der Bilder zu verhindern machst du folgendes:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
<style type="text/css">
img#bild{  
 display:none;

}

</style>  
<script type="text/javascript">
window.onload = zeigeBild(); //Wenn das Dokument geladen ist, werden die Bilder klein dargestellt  
  
function zeigeBild(){  
 var ID = document.getElementById("bild");  
 ID.style.display = "block"; // per style-Objekt Bild anzeigen  
}
</script>  
</head>  
  
<body>  
<p>  
 <img src="test.jpg" id="bild" style="width:300px; height:225px" alt="">  
 <!--Jedem Bild eine ID geben, damit dieses per CSS ansprechbar ist-->  
</p>  
</body>  
</html>  

Ich hoffe, es hilft etwas :-)

ciao, ww

--
sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)