[R4mSiS]

Hallo Leute,

ich wollte fragen wie ich ein Bild verkleinert darstell, und wenn man mit der Maus draufzeigt das rechtsdaneben das Bild im einen ExtraFenster gezeigt wird..


mfg R4mSiS

[stefanra]

Also, normalerweise verkleinert man ja ein Bild dadurch, dass man ein Thumbnail erstellt. Man verkleinert also das eigentliche Bild und speichert es in der verkleinerten Version ab.

Ich nehme aber an, du willst die schmutzige Version nehmen, und das Bild mit HTML verkleinern. Das machst du so:

<img border="Rahmenbreite in Pixel " width="Breite in Pixel" height="Höhe in Pixel" src="Pfad zum Bild" />

Und dann erweiterst du halt das Bildtag um einen Javascript-Code:

onmouseover="javascript:window.open(url, ...);"

[W@yne]

... ohne "java script:", weil on*-Code immer JavaScript ist ...

[ichbines]

Das ganze macht man mit CSS.

css Datei:

body {
	background: #FFFFFF;
	color: #000000;
	font-family: verdana, arial, sans-serif;
	font-size: 0.8em;
	margin: 0px 0px 0px 0px;
	padding: 0;
	text-align: left;
}



.right {
	font-size: 1.0em;
	padding-right: 100px;
	text-align: right;
}


#pic {
	background-color: #FFFFFF;
	left: 10px;
	position: relative;
	top: 10px;
	width: 135px;
}

#pic a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -20px;
	position: absolute;
	top: -1px;
	width: 1px;
	
}

#pic a img {
	border: 0;
}

#pic a.p1, #pic a.p1:visited {
	background: #FFFFFF;
	border: 1px solid #000000;
	display: block;
	height: 140px;
	left: 0;
	text-decoration: none;
	top: 0;
	width: 180px;
}

#pic a.p1:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}

#pic a.p1:hover .large {
	border: 1px solid #000000;
	display: block;
	height: 450px;
	left: 192px;
	position: absolute;
	top: -143px;
	width: 600px;
}

#top {
	margin-left: 80px;
}

und in die html Datei kommt folgendes:

<div id="pic" class="visible">
		<a class="p1" href="#" title="thumbnail image"><img src="fotos/doppel05/k23.jpg" alt="Thumbnail image" width="180" height="135" title="Thumbnail image" /><img  src="fotos/doppel05/23.jpg" alt="Vergrößerte Darstellung" width="800" height="600" class="large" title="Vergrößerte Darstellung" /></a>
			  <a class="p1" href="#" title="thumbnail image"><img src="fotos/doppel05/k13.jpg" alt="Thumbnail image" width="180" height="135" title="Thumbnail image" /><img  src="fotos/doppel05/10.jpg" alt="Vergrößerte Darstellung" width="800" height="600" class="large" title="Vergrößerte Darstellung" /></a>
			  <a class="p1" href="#" title="thumbnail image"><img src="fotos/doppel05/k17.jpg" alt="Thumbnail image" width="180" height="135" title="Thumbnail image" /><img  src="fotos/doppel05/17.jpg" alt="Vergrößerte Darstellung" width="800" height="600" class="large" title="Vergrößerte Darstellung" /></a>
		<a class="p1" href="#" title="thumbnail image"><img src="fotos/doppel05/k09.jpg" alt="Thumbnail image" width="180" height="135" title="Thumbnail image" /><img  src="fotos/doppel05/09.jpg" alt="Vergrößerte Darstellung" width="800" height="600" class="large" title="Vergrößerte Darstellung" /></a>
			  
			</div>

Natürlich musst du das ganze noch anpassen. Diesen Code funktioniert perfekt. Leider weiß ich die orginale Quelle nicht mehr. Es gibt 2 versionen vom Bild, also mit Thumbnail. Das bild mit dem k ist das Thumbnail. Und es funktioniert in jedem Browser, auch IE.

Dieser Beitrag wurde von ichbines bearbeitet: 19. November 2005 - 18:19