diedVIPs

html knowhow

Bild zoomen und vergrößern












Mit dem Befehl "#vier" beschreiben Sie den Rand sowie die runden Ecken des Bildes. da es sinnvoll ist, das Bild in einen <table> einzubinden, können Sie einmal die Größe bestimmen und den Rand zur Umgebung. Da Ihr Originalbild in der Regel eine andere Größe hat, wie Sie es in der Webseite darstellen wollen, packen Sie es in <div> ... </div>.



Bild mit runden Ecken, Schatten und Größenanpassung

Mit dem Befehl
So sieht´s aus


Quellcode
<html>
<head>
Hier nichts
<style type="text/css">
#vier {border: 1px solid grey; border-radius: 5px;box-shadow: 5px 5px 5px white inset, 5px 5px 5px black;}
.auto-style84 {background-color: #D5FDA8;}
</style>
</head>

<body>
<table align="right" cellspacing="6" style="width: 30%">
<tr><td><div style="width: 100%; height: auto; background: #ffffff;"><a href="Info.html">
<img id="vier" src="Bilder/Fotos/T-Ratgeber.jpg" style="height: inherit; width: 100%; height: auto; float: right;" alt="Ratgeber" class="auto-style84" /></a></div></td></tr>
</table>

</body>
</html>




Bild mit dem Mausrad vergrößern

Mit dem Befehl
So sieht´s aus


Quellcode
<html>
<head>
<script>
var max = 1;
var mor = 1;
function zoom(event) {
event.preventDefault();
var wert = Math.floor(event.deltaY);
// Verringern
if (wert < 0) {
mor -= 1;
if (mor < 0) {
mor = 9;
max--;
}
}
// Erhöhen
if (wert > 0) {
mor += 1;
if (mor > 9) {
mor = 0;
max++;
}
}
if (max <= 0) {
max = 1;
mor = 0;
}
document.getElementById("bild").style.transform="scale(" + max + "." + mor + ", " + max + "." + mor + ")";
}
</script>

<style type="text/css">
img#bild {display: Block;margin: Auto;width: 444px;cursor: n-resize;}
</style>
</head>

<body>
<img src="../Bilder/life.jpg" id="bild" onwheel="zoom(event)" />
</body>
</html>




Bild auf Bild mit Link

Mit dem Befehl "#vier" beschreiben Sie den Rand sowie die runden Ecken des Bildes. da es sinnvoll ist, das Bild in einen <table> einzubinden, können Sie einmal die Größe bestimmen und den Rand zur Umgebung. Da Ihr Originalbild in der Regel eine andere Größe hat, wie Sie es in der Webseite darstellen wollen, packen Sie es in <div> ... </div>.
Quellcode So sieht´s aus
<html>
Hier nichts

<style type="text/css">
.bild_beschriftung { position: relative;}
.bild_beschriftung img { display: block;}
.bild_beschriftung span { position: absolute; bottom: 0px; right: 80px; width: auto; color: black; text-align: right; height: 2.5em; line-height: 2.5em;
border-top: 0px; background: transparent; background-color: transparent;}
</style>

<body>
<div style="width: 50%; height: auto; background: #ffffff;">
<p>Hans Busch im Impressum</p> <center><div class="bild_beschriftung">
<a href="Bilder/Hans Busch.jpg"> <img src="Bilder/Hans Busch.jpg" style="width:80%;height:inherit" alt="Hans Busch" /></a> <span>
<a href="Impressum.html"> <img class="auto-style183" src="Bilder/mehr.png" /></a> </span></div></a>

</body>
</html>

Hans Busch im Impressum

Hans Busch









Kontakt    Datenschutz   Impressum