Html (Internet)

Von: DaDa

19.11.06 - 18:51

Hey jo!
Ich hät mal ne Frage und zwar bastle ich grad an meiner HP und wollt meine Bilder kleiner dastellen, die man beim Klicken vergrößern kann. Kann jemand mir den Html code geben oda ne seite zeigen wo der ist?
Danke schon mal.

Von: Gallimimus

21.11.06 - 15:59

Gibt da mehrere Möglichkeiten. Eine wäre folgende: Du kopierst dein Bild und machst es mit einem Bildbearbeitungsprogramm auf die richtige Größe. Das kleine etwa 100x100px und das große 300x300px. Wie du willst. Dann bringst du das mit dem Code auf die Webseite:

<img src="klein.jpg" onmouseover="this.src='groß.jpg'" onmouseout="this.src='klein.jpg'" alt="Bild" />

Das ist dann aber nicht per klick sondern per drüberfahren. Musst du noch ein wenig ändern. gug einfach mal mit onclick oder so.

Von: RonBan

21.11.06 - 18:36 (21.11.06 - 18:37)

Wenn du es bei Drüberfahren vergrößern willst, solltest du das per css machen. Ganz einfach aus dem Grund, dass nicht jeder JavaScript im Browser aktiviert hat.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>

<html>



<head>

<title>Bildvergrößerungstest</title>

<style type="text/css">

<!--

img#pic{width: 100px; height: 100px; border: 0px;}

img#pic:hover{width: 200px; height: 200px; border: 0px;}

-->

</style>

</head>



<body>

<div><img src="Link_Zum_Bild.Dateityp" alt="Alternativtext" id="pic"/></div>

</body>



</html>

Natürlich solltest du darauf achten, dass du das Bild auch proportional verkleinerst/vergrößerst, sonst könnte es leicht entstellt werden ;-)

Von: Flo

21.11.06 - 20:03

Sehr bandbreitenschonend ist diese Lösung aber nicht, wenn's viele Bilder sind. Läd man das Bild als Hintergrundbild (via background-image: url(<pfad>)) und ändert dieses samt Objekt Größe in der :hover-Pseudoklasse, so werden zuerst die Thumbnails geladen - dass man hier dann nicht den img-Tag nehmen sollte, ist klar ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>

<html>



<head>

<title>Bildvergrößerungstest</title>

<style type="text/css">

<!--

#pic{width: 100px; height: 100px; border: 0;

	background-image: url("<pfad zum thumbnail>") }

#pic:hover{width: 200px; height: 200px; border: 0;

	background-image: url("<pfad zum ganzen bild>") }

span.description { display: none }

-->

</style>

</head>



<body>

<div id="pic">

	<span class="description">Beschreibung</span>

</div>

</body>



</html>

Praktisch wäre, wenn der CSS Code automatisch generiert würde, also bspw. ein CSS Script alle Daten (Bilddimensionen etc.) ausliest und dann eigenständig hinschreibt.