Bild-Zoomen


Ein Zoom Beispiel


Dieses Beispiel basiert auf CSS angaben

Code
in Extras---> <head>
einfügen

<style>
/*Zoom  Galery */
.zoom_img img {
    margin: 5px;
    height: 300px ;
    width: 450px;
    -moz-transition: -moz-transform 0.5s ease-in;
    -webkit-transition: -webkit-transform 0.5s ease-in;
    -o-transition: -o-transform 0.5s ease-in;
}
.zoom_img img:hover {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
}
</style>

Die angaben zu breite und Höhe kann man beliebig eingeben ..(width und height ) auch das margin (Abstand bei mehreren Bilder )
Das Speichern nicht vergessen

auf die Text Seiten in HTML Modus ( quelcode ) diesen Code einfügen

Galerie für 6 Bilder
<div class="zoom_img">
<img src="hier kommt das Bild URL" alt="Name" />

<img src="hier kommt das Bild URL" alt="Name" />
<img src="hier kommt das Bild URL" alt="Name" />
<img src="hier kommt das Bild URL" alt="Name" />
<img src="hier kommt das Bild URL" alt="Name" />
<img src="hier kommt das Bild URL" alt="Name" /> </div>
und abspeichern

Onmouseover Beispiel



Diesen B basiert auf java skript

blume blume blume blume

Code zum mit nehmen

in Extras ---><head> diesen Code einfügen


<script>
function bigImg(x) {
    x.style.height = "300px";
    x.style.width = "450px";
}

function normalImg(x) {
    x.style.height = "100px";
    x.style.width = "180px";
}
</script>

Auf Speichern
auf die beliebige Textseite in HTML Modus (Quelcode ) diesen Code einfügen


<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="Hier das  Bild URL einfügen" alt="Smiley" width="180" height="100">

Die Angaben zu breite und Höhe sind nach Wunsch zu ändern width und height
Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden