Bild grösser werdern lassen, dabei Text verschieben

Hi,

du kannst zwei Bilder zur Verfügung stellen - eine kleine Vorschau und das Orginalbild. Beide werden in einem Array verwaltet, wobei jede Bildgruppe einen eigenen Index erhält. Innerhalb eines Index wird ein assoziatives Array mit den Schlüsselwerten klein und gross angelegt, wo die entsprechenden Pfad- und Dateiangaben zu den Bildern notiert werden.

Beim Klick auf einen Link wird der Index der gewünschten Bildgruppe übergeben. Daraus wird neben dem Auslesen der Bilder auch das Zusammensetzen der Bild-ID realisiert.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var arrBilder = new Array();
arrBilder[0] = new Array();
arrBilder[0]['klein'] = "bild1_klein.gif";
arrBilder[0]['gross'] = bild1_gross.jpg";
arrBilder[1] = new Array();
arrBilder[1]['klein'] = "bild2_klein.gif";
arrBilder[1]['gross'] = "bild2_gross.jpg";

function Lupe(intID){
  var objImg = document.getElementById("img_"+intID);

  if(objImg.big == 1){
    objImg.src = arrBilder[intID]['klein']+"?"+new Date().getTime();
    objImg.big = 0;
  }else{
    objImg.src = arrBilder[intID]['gross']+"?"+new Date().getTime();
    objImg.big = 1;
  }
}
</script>

</head>
<body>
<img id="img_0" src="bild1_klein.gif" alt="" />
<a href="#" onclick="Lupe(0); return false;">Lupe</a>

<img id="img_1" src="bild2_kleingif" alt="" />
<a href="#" onclick="Lupe(1); return false;">Lupe</a>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück