JavaScript / Tipps / Bilder mit "Zoom"-Funktion[IE|M|O]

von: Werner Zenk

Dieses JavaScript zeigt Bilder animiert, mit einer Art "Zoom"-Funktion an.
Um die Animation zu starten klicken Sie auf ein Bild.



Wüstenlandschaft

Waldlandschaft

Wasserlandschaft

Schneelandschaft

Berglandschaft


Quelltext:
<script type="text/javascript">
// Bilder anzeigen mit "Zoom"-Funktion

var zaehler = 50;
function aufmachen(breite,ID) {
 if (zaehler < breite) {
  document.getElementById(ID).style.display="inline";
  document.getElementById(ID).style.width=zaehler+"px";
  zaehler += 10; 
  window.setTimeout("aufmachen("+breite+",'"+ID+"')",0);
 }
 else {
  document.getElementById("beschreibung-"+ID).style.display="block";
 }
}

function zumachen(ID) {
 document.getElementById(ID).style.display="none";
 document.getElementById("beschreibung-"+ID).style.display="none";
 zaehler = 50;
}
</script>

<style type="text/css">
.bereich {
 position: absolute;
 text-align: center;
 font-weight: bold;
}

.beschreibung {
 color: #FFFFFF;
 background-color: #000000;
 display: none;
}
</style>

<!-- Erstes Bild -->
<span class="bereich">
 <img src="gross1.jpg" style="display: none;" id="bild_1" border="1"
 onMouseOut="zumachen('bild_1');"><br>
 <span id="beschreibung-bild_1" class="beschreibung">
  Beschreibung 1
 </span>
</span>
<img src="klein1.jpg" border="1"
 onClick="aufmachen(250,'bild_1');" style="cursor: pointer;">

<!-- Zweites Bild -->
<span class="bereich">
 <img src="gross2.jpg" style="display: none;" id="bild_2" border="1"
 onMouseOut="zumachen('bild_2');"><br>
 <span id="beschreibung-bild_2" class="beschreibung">
  Beschreibung 2
 </span>
</span>
<img src="klein2.jpg" border="1"
 onClick="aufmachen(250,'bild_2');" style="cursor: pointer;">


          = Bild-ID
     = Bildbreite (großes Bild)
     = Bildbreite (kleines Bild)
     Wert erhöhen für einen schnelleren Zoom



Bilder mit "Zoom"-Funktion (ohne Animation)



Quelltext:
<script type="text/javascript">
function anzeigen(das){
 if(document.getElementById(das).style.display=="none") {
  document.getElementById(das).style.display="inline";
 }
 else {
  document.getElementById(das).style.display="none";
 }
}
</script>

<style type="text/css">
.bereich {
 position: absolute;
 text-align: center;
 font-weight: bold;
}

.beschreibung {
 color: #FFFFFF;
 background-color: #000000;
 display: block;
}
</style>

<!-- Erstes Bild -->
<span class="bereich" style="display: none;" id="bild1">
 <img src="gross1.jpg" border="1" onMouseOut="anzeigen('bild1');"><br>
 <span class="beschreibung">Beschreibung 1</span>
</span>
<img src="klein1.jpg" border="1" onClick="anzeigen('bild1');">

<!-- Zweites Bild -->
<span class="bereich" style="display: none;" id="bild2">
 <img src="gross2.jpg" border="1" onMouseOut="anzeigen('bild2');"><br>
 <span class="beschreibung">Beschreibung 2</span>
</span>
<img src="klein2.jpg" border="1" onClick="anzeigen('bild2');">

   = Bild-ID


Beispiele zum herunterladen: bilder_zoom_funktion.zip



Siehe auch: Bilder mit Sprechblasen
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?
Kommentare: 24 » aufmachen   
Sebastian:
Echt cooler Effekt. Aber wie kann man die Geschwindigkeit verändern?

Werner:
die Zahl 0 ändern! window.setTimeout("aufmachen("+breite+",'"+ID+"')",0);


fgrummel:
Hallo, ähm wie macht man es, dass sich die bilder schneller (viel schneller) aufbauen bitte um schnelle antwort

Werner:
Dazu muß ich erst ein anderes Script schreiben, und dieses Jahr (2006) wird wohl nichts mehr daraus!

Werner:
Ich habe noch ein anderes Script eingefügt. siehe: Bilder mit "Zoom"-Funktion (ohne Animation)

wDeluexxe:
Überall wo Bild 2 steht, muss da der link des bildes eingefügt werden?

Werner:
Nein. bild2 ist nur die ID (Identität) des Bildes die bei jeden neuen Bild erhöht werden muss. Z.B bild3, bild4, bild5 ... Den Link (Adresse) des Bildes fügst du bei "gross1.jpg" und "klein1.jpg" ein

Uwe K.:
Wie bekomme ich den unteren Quelltext bei NetFusion rein und wo kommen die großen und kleinen Bilderhin?

artur:
bei mir das foto kommt immer doppelt wie kann ich es ändern ich benutze netobjets 9 kann das da ran liegen?

Werner:
Wenn man schon solche Programme wie Netobjets benutzt, sollte man auch damit umgehen können. Eine Ferndiagnose ohne eine Webadresse ist sehr schwierig!

Dirk:
Was mach ich wenn der Benutzer Javascript deaktiviert hat?

Werner:
Was mach ich wenn der Benutzer den Browser nicht eingeschaltet hat?

Steffi:
geiles teil. ich hab nur eine frage: was mach ich wenn ich auf ein großes bild mehrere solche vergrößerungen haben will? also wenn ich z.b. eine landkarte von Deutschland habe und wenn ich auf z.B. Bayern klicke sich Bayern vergrößert oder wenn ich auf NRW klicke, sich nur NRW vergrößert, geht das irgendwie? Mit Hotspots eventuell?

NomadSoul:
tolles script! im internet explorer 7 funktioniert das script MIT ANIMATION leider nicht, bzw. muss man da irgendwie die gròsse vom bild das sich òffnet angeben. ich verwende aber das ohne animation und das làuft super

Eugen:
Wie macht man , wenn das Bild nicht na rechts zoomen soll, sondern von recht nach links und von unten nach oben.

Werner:
Dafür habe ich leider keine Lösung gefunden!

Eugen:
Habe Lösung gefunden, wie man macht , um von rechts nach links zu zoomen. Wenn nötig , ich kann schreiben wie. Ist ganz einfach

Arne:
Hallo Eugen, dann erzähl doch mal kurz!

Ivonne:
Eugen hat doch die Lösung gefunden, kann sie mir jemand geben?

Patrick:
Wie mach ich das, damit das Bild an einer anderen Stelle aufgeht, statt ind er ecke des kleinen Bildes? Würde das auch von einem Anker aus gehen?

Werner:
Zwei Möglichkeiten habe ich gefunden:  
<!-- Erstes Bild -->
<span class="bereich" style="margin-left: 30px;">
 <img src="gross1.jpg" style="display: none;" id="bild_1" border="1"
 onMouseOut="zumachen('bild_1');"><br>
 <span id="beschreibung-bild_1" class="beschreibung">
  Beschreibung 1
 </span>
</span>
...
ODER:
<!-- Erstes Bild -->
<div class="bereich" style="position: absolute; top: 150px; left: 200px;">
 <img src="gross1.jpg" style="display: none;" id="bild_1" border="1"
 onMouseOut="zumachen('bild_1');"><br>
 <span id="beschreibung-bild_1" class="beschreibung">
  Beschreibung 1
 </span>
</div>


Reimund:
Bei mir kommen nur rote kreuze.Weiß auch nicht wie ich den link zum bild einfügen muß.MFG Reimund

Gerhard:
super Sache - echt - Bin froh das es Menschen wie dich gibt die soetwas machen - Danke Frage: wovon hängt die Größe des gezoomten Bildes ab?

Werner:
Von der Bildgröße des großen Bildes!

Stefan:
Echt cool diese Funktion. Frage: Viele Websiten haben dann auch so einen Mauszeiger. Wie kann man den anzeigen lassen?

red bull:
Zum Thema Geschwindigkeit des Bildzooms erhöhen: Einfach das Inkrement um 2 (3...) statt 1 ausführen!

Werner:
Danke an "red bull", ich habe das erste Script entsprechend geändert.

Monika:
Danke! einfach Klasse!

Frostbeule:
Super, ich habe schon Monate lang nach so einem Script gesucht und jetzt habe ich es endlich gefunden. Super

Olli:
Hallo,super Script, gefällt mir sehr. Gibt es eine Möglichkeit das die Bilder von unten rechts oder links nach oben aufgehen??? Würde mich über eine Antwort freuen. Danke, Olli

Werner:
Nein.

Lou-mina:
Wie bekommt man größere bilder größer angezeigt?

Werner:
Für Beispiel 1: Die großen Bilder sollten eine einheitliche Breite und Höhe haben den Wert "250" im Javascript entsprechend anpasssen.
Für Beispiel 2: Es können ohne weiteres größere Bilder angezeigt werden.

Ursula:
Das ist echt ein cooler Effekt - respekt!

Karo:
Hallo, ich würde die Zoomfunktion gerne auf meiner Homepage verwenden. Die Animation funktioniert super, nur wird sie vom Rest der Seite überlagert, sie ist also im Hintergrund. Wie kann ich das beheben?

Werner:
<style type="text/css">
.bereich {
 position: absolute;
 text-align: center;
 font-weight: bold;
 z-index: 99;
}

.beschreibung {
 color: #FFFFFF;
 background-color: #000000;
 display: block;
}
</style>


Thomas:
Weitere Beispiele: http://www.ajax-zoom.com/index.php?cid=examples
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Datum - Anzeige des Datums  Formularfelder dynamisch hinzufügen  Guten Tag - Wenn jemand die Seite öffnet erscheint ein "Guten Tag".  Rahmen entfernen  JS-Index - Objekteigenschaften  Lichtregler  JavaScript Bausteine 9  Info - Mit Links kann man auch Javascript ausführen.  Menü der Webseite in der Suchleiste des Browsers anzeigen  Die aktuelle Position ermitteln - Das Script ermittelt die aktuelle Position des Mauszeigers.  Checkboxen mit JavaScript überprüfen - Mit diesem JavaScript lassen sich Checkboxen (von unterschiedlicher Anzahl) überprüfen ob der Benutzer diese ausgewählt hat.  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner