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
Seite 1 von 1
[html] Bildervergrößern Mausedrauf --> Bild wird größer angezeigt??
#1
geschrieben 19. November 2005 - 17:40
je mehr käse, desto mehr löcher - je mehr löcher, desto weniger Käse
Ergo: Je mehr Käse, desto weniger Käse
größte Hackerdatenbank der Welt
Anzeige
#2
geschrieben 19. November 2005 - 17:46
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:
Und dann erweiterst du halt das Bildtag um einen Javascript-Code:
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, ...);"
#3
geschrieben 19. November 2005 - 18:00
... ohne "java script:", weil on*-Code immer JavaScript ist ...
#4
geschrieben 19. November 2005 - 18:16
Das ganze macht man mit CSS.
css Datei:
und in die html Datei kommt folgendes:
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.
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
Thema verteilen:
Seite 1 von 1