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">und abspeichern
<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>
Onmouseover Beispiel
Diesen B basiert auf java skript
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