diedVIPs

html knowhow

Bildanimation mit hover










Bilderlupe 1

Mit diesem Modul vergrößern Sie das Bild mit einem runden Lupensymbol.
So sieht´s aus


Quellcode
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src='../scripte/okzoom.js'></script>

<SCRIPT LANGUAGE="JavaScript" name="lupe">
timeout =3; // Close window after __ number of seconds?
// 0 = do not close, anything else = number of seconds
function Start(URL, WIDTH, HEIGHT) {
windowprops = "left=50,top=50,width=" + (WIDTH+50) + ",height=" + (HEIGHT+50);
text = "<html><head><title>Preview</title></head><body bgcolor='white'";
if (timeout != 0) text +=" onLoad=\"setTimeout('window.close()', " + timeout*1000 + ");\"";
text += "><center><img src='" + URL + "'>";
if (timeout != 0) text +="<br><font face='arial, helvetica' size='-1'>Vorschau endet automatisch nach " + timeout + " Sekunden.</font>";
text += "</center></body></html>";
preview = window.open("", "preview", windowprops);
preview.document.open();
preview.document.write(text);
preview.document.close();
}
</script>
</head>
<body>
<center><img id="example" src="../bilder/life.jpg" width="560"/></center>
<script>
$(function(){
$("#logo").okzoom({

});
$('#example').okzoom({
width: 200,
height: 200,
border: "3px solid #666",
shadow: "0 0 5px #666"
});
});
</script>

</body>
</html>



Bilderlupe 2

Mit diesem Modul vergrößern Sie das Bild mit einem eckigen Lupensymbol.
So sieht´s aus





Quellcode
<html>
<head>
Hier nichts
<style type="text/css">
body, html {height:100%; margin:0; overflow:hidden; padding:10; width:auto; }
a img { border:none; }
div {position:relative; top:30%; width:auto; }
.demo { position:relative; left:200px}
.loupe { background-color:#555; background:rgba(0, 0, 0, 0.25); border:5px solid rgba(0, 0, 0, 0); cursor:url(blank.png), url(blank.cur), none; }
</style>
</head>

<body>
<div><img class="demo" src="../bilder/life.jpg" width="30%" height="auto" /></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.loupe.js"></script>
<script type="text/javascript">$('.demo').loupe();</script>
</body>

</html>









Kontakt    Datenschutz    Impressum