Homepage selbermachen 7.850 Themen, 35.593 Beiträge

Verfolgung starten Optionen

Bildvergrößerung ohne Klick

wowa1 / 15 Antworten / Flachansicht Nickles

Hallo @all,

habe gerade eine bisher mir unbekannte Variante der Bildvergrößerung auf einer Homepage entdeckt. Beim Berühren mit dem Cursor verwandelt sich dieser wie üblich in eine Hand und das Bild erscheint in Großformat, ohne dass man geklickt hätte. Es legt sich einfach auf die Seite, ohne neues Fenster.
Wer hat dafür eine (auch für einen relativen Laien verständliche) Anleitung? Benutze für die Homepage CMS (contenido).

Gruß, Wolfgang

bei Antwort benachrichtigen
Bildvergrößerung ohne Klick Olaf19
@Olaf Gefunden habe ich die Bildvergrößerung auf: ... wowa1
Gibt zwei Möglichkeiten: Entweder mit CSS oder JavaScript. Die CSS-Version ... Borlander
@Borlander Danke für den Hinweis. Kannst du mir mitteilen, was deine VK ... wowa1
Visitenkarte von Borlander: Olaf19
VK ist die VisitenKarte. siehe hier: http://www.nickles.de/c/vcard/81978.htm Hausmeister Krause
Wenn Du nicht weiterkommst, dann schicke mir eine Private Nachricht hier ... Hausmeister Krause
Ich krieg nämlich jedesmal nen Krampfanfall, wenn ich hier im Forum HTML ... Borlander
Hausmeister Krause Borlander „ Hatte bislang gedacht Du würdest mehr aushalten... Ist doch nun wirklich nicht...“
Optionen
Hatte bislang gedacht Du würdest mehr aushalten...
Nicht wenn mein sensibler Part mal für einen Tag die Oberhand hat ;-)

naja, versuchen wirs einfach mal:

----------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
#fotobox {
width:100%;
margin:3px;
padding:3px;
color:#000;
}
#fotobox a img {
float:left;
height:94px;
width:125px;
border:1px solid #000;
margin:0px 6px 0px 0px;
}
/* Diese Anweisung für die Anzeige in Geckos, Safarie und Opera */
#fotobox img:hover {
width:300px;
height:225px;
}
/* Ohne diese Anweisung funktioniert das Zoomen im IE nicht */
#fotobox a:hover img {
width:300px;
height:225px;
}
/* Ohne diese Anweisung funktioniert das Zoomen im IE nicht */
#fotobox a:hover {
padding:0;
}
#fotobox p {
padding:0; margin:0;
font: 500 0.75em/1.5 verdana,arial,helvetica,sans-serif;
}
</style>


<body>
<div id="fotobox">
<a href="Bild.jpg" target="_blank"><img src="Bild.jpg" alt="Das Bild" /></a>
</div>
</body>
Wenn Du Sorgen hast, dann erzähle sie nicht Deinen Freunden, sondern Deinen Feinden, denn die freuen sich darüber. - Harald Lesch
bei Antwort benachrichtigen
Re: Bildvergrößerung ohne Klick ... mr.escape
HTML in Postings unterdrücken Olaf19
Die meisten Browser kommen zwar damit zurecht wenn Du die schließenden ... Borlander
Re: Bildvergrößerung ohne Klick ... mr.escape
Danke, ich habe genug hilfreiche Anregungen bekommen! P.S. Ich finde es ... wowa1
Das "Ampersand"-Zeichen Olaf19