Hilfe, Tricks und Tipps rund um den Computer

Bilder zoomen mit dem Super-Zoom 1+2

Mit einem neuen Script lassen sich Bilder sogar ins Unendliche zoomen.
Zur Zeit besteht noch keine Möglichkeit den Super-Zoom in die Symbol-Bar zu bekommen. Mit Hilfe des Scriptes kann der Super-Zoom aber fest ins Forum oder in die Homepage eingebaut werden!

Hier geht es zum manuellen Super-Zoom: Der Super-Zoom 1 in Aktion

Die Größe des Bildes kann manuell eingestellt werden. Ein Klick auf die Rückstell-Taste bringt das Bild in die Ausgangsposition!

Um das komplette HTML-Script für Zoom 1 zu sehen, bitte hier anklicken!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bild vergrößern, verkleinern, stoppen</title>

<script type="text/javascript">

var id, breite, schritt;
breite = 1;
schritt=0;
function vergroessern()
{
breite = breite + schritt;
if (breite > 100)
{
document.images[0].style.width = breite + "px";
}
else
{
clearInterval(id);
schritt=0;
}
}
function groesser()
{
if (schritt<=100)
{

if (schritt==-100)
{
clearInterval(id);
}
schritt = 100;
id = setInterval('vergroessern()', 0);
}
}
function kleiner()
{
if (breite > 100)

if ((schritt>=0) && (breite > 100))
{
if (schritt==100)
{
clearInterval(id);
}
schritt = -10;
id = setInterval('vergroessern()', 1);
}
}

</script>
</head>
<style type="text/css">

A:link { color: #FFFFFF;}
A:hover { color: #C30000; text-decoration: none }

</style>
<body style="background-color:0038A7; color:#FFFFFF; background-image: url(http://http://www.bilder-hochladen.net/files/1tys-1m.jpg);" onLoad="groesser()">
<div style="text-align:center;">
<h1> Der Super-Zoom</h1>
<br>

<form action="">
<p>
<input type="button" value="<" onClick="kleiner()">
<input type="button" value=">" onClick="groesser()">
</p>
</form>
<p>
<img src="http://http://www.bilder-hochladen.net/files/1tys-4f.gif" style="width:100px; border:2px solid #9DDBFF" alt="Vergrößern mit rechter Pfeiltaste, Grundstellung mit linker Pfeiltaste">
<br><br>
Mit der rechten Pfeiltaste läßt sich das Bild stufenweise vergrößern (Tast-Verzögerung ca. 1Sekunde).<br>
Mit der linken Taste geht es in die Ausgangsstellung zurück. <br><br>
</div>

<div style="align:"left;>
<table>
<tr><td>
<b>Zum Forum:</b> <a href="http://104774.homepagemodules.de/t65f31-Bilder-im-Forum-ansehen-mit-dem-Super-Zoom.html">http://104774.homepagemodules.de</a><br>
<b>Zur Homepage:</b> <a href="http://http://www.future-andres.de">http://www.future-andres.de</a>
</td></tr>
</table>
</div>
</p>
</body>
</html>

Schließen

Hier geht es zum automatischen Super-Zoom: Der Super-Zoom 2 in Aktion

Die Größe des Bildes nimmt automatisch zu. Kann gestoppt oder wieder verkleinert werden!

Um das komplette HTML-Script für Zoom 2 zu sehen, bitte hier anklicken!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="be">
<title>Der Super-Zoom 2</title>
<style type="text/css">

a:link { color: #FFFFFF;}
A:hover { color: #FF0000; text-decoration: none }

</style>

<script type="text/javascript">
var id, breite, schritt;
breite = 100;
schritt=0;
function vergroessern()
{
breite = breite + schritt;
if (breite > 100)
{
document.images[0].style.width = breite + "px";
}
else
{
clearInterval(id);
schritt=0;
}
}
function groesser()
{
if (schritt<=0)
{

if (schritt==-1)
{
clearInterval(id);
}
schritt = 1;
id = setInterval('vergroessern()', 1);
}
}
function kleiner()
{
if ((schritt>=0) && (breite > 100))
{
if (schritt==1)
{
clearInterval(id);
}
schritt = -1;
id = setInterval('vergroessern()', 1);
}
}
function stopp()
{
if (schritt!=0)
{
clearInterval(id);
schritt=0;
}
}
</script>
</head>

<body style="background-color:0038A7; color:#FFFFFF; background-image: url(http://http://www.bilder-hochladen.net/files/1tys-1m.jpg);" onLoad="groesser()">

<h1 style="text-align:center;">Der Super-Zoom 2</h1>
<br><br>
<table>
<tr><td align="left">
<b>Zum Forum:</b> <a href="http://104774.homepagemodules.de/t65f31-Bilder-im-Forum-ansehen-mit-dem-Super-Zoom.html">http://104774.homepagemodules.de</a><br>
<b>Zur Homepage:</b> <a href="http://www.future-andres.de">http://http://www.future-andres.de</a>
</td></tr>
</table>

<table align="center">
<tr><td>
<br><br>
Mit der rechten Pfeiltaste läßt sich das Bild automatisch vergrößern (Tast-Verzögerung ca. 1Sekunde).<br>
Mit der linken Pfeiltaste läßt sich das Bild automatisch verkleinern (Tast-Verzögerung ca. 1Sekunde).<br>
Mit der Stopp-Taste wird die Automatik unterbrochen. <br><br>
</td></tr>
<tr><td align="center">
<form action="">
<p>
<input type="button" value="<" onClick="kleiner()">
<input type="button" value="Stopp" onClick="stopp()">
<input type="button" value=">" onClick="groesser()">
<br>
</p>
</form>

<p><img src="http://http://www.bilder-hochladen.net/files/1tys-4f.gif" style="width:100px" alt="Der Super-Zoom"></p>

</td></tr>

</table>

</body>
</html>

Schließen

Ihr Admin
Wolfgang