Problem mit Bildskalierung bei "onklick" an gleicher Position

[tuningflex]

Hallo,


ich benutze einen JS Code um bei "onklick" auf ein Bild zu einem nächsten Bild zu wechseln.
Das sieht folgendermaßen aus:

Ich habe eine .png Grafik in einen DIV Tag Tag gepackt. Bei Klick auf dieses Bild erscheint an exakt gleicher Stelle via JS ein neues Bild. Klickt man auf dieses neue Bild erscheint wieder ein neues und so weiter. Eine kleine Diashow so zu sagen!

Jetzt gibt es aber folgendes Problem. Da ich möchte, dass man im Browser die Bilder "anzoomen" kann, habe ich sie mit "width = *** " skaliert.
Somit kann man z.B. im Browser mit STRG+ Scroll an die Bilder ranzoomen und sie bleiben schön scharf.

Das dumme ist aber, dass ich die Abmessungen irgendwie nur für das erste Startbild im Javascript bestimmen kann. Ich weis nicht wie ich die Dimensionen für die Folgebilder eintragen soll.
Denn wenn diese größer oder kleiner sind, dann werden sie schrecklich falsch verzerrt, da ja die Maßangaben des ersten Bildes genommen werden.

Hier mein Code:

<div class="container20"><script type="text/javascript" language="javascript">
var Dir = "pictures/";
var Bilder = Array("1a.png", "none.png", "1a80.png", "1tb.png", "1tw.png");
var i = 0;

function wechsel(Nr, k)
{
if(k == '+')
{
i++;
}
else
{
i--;
}
  
if(i>=Bilder.length)
{
i = 0;
}
else if(i<0)
 {
i = Bilder.length-1;
 }
  
window.document.images[Nr].src = Dir + Bilder[i];
}
  
</script><img src="pictures/1a.png" alt="b1"name="b1" width="73" height="93" id="b1" title="klick mich ..." onclick="wechsel('b1', '+')"/></div>

Ich habe schon versucht hier in diesem Aufzählungsbereich Größenanhaben zu setzen aber es funktioniert leider nicht.
"var Bilder = Array("1a.png", "none.png", "1a80.png" width = 70px, "1tb.png", "1tw.png");"


Ich hoffe ich konnte mein Problem verständlich schilder. Es muss ja irgendwie gehen nur bin ich noch zu unerfahren um das grad von allein herauszufinden (nicht, dass ich es nicht versucht hätte


Vielen Dank für die Hilfe

 

[kruschimappel]

Das Problem ist, dass du zwar die URL des Bildes änderst (das macht dein Script), aber nicht die Attribute von width und height.
Du solltest also zwei weitere Arrays anlegen, die die Breite und die Höhe beinhalten.

var Breite = Array("123", ...);
var Hoehe = Array("234", ...);

Diese weist du dann den Attributen zu, genau wie die URL:

window.document.images[Nr].width = Breite[i];
window.document.images[Nr].height = Hoehe[i];

lg
kruschimappel

 

[crash]

Wenn das Bild geladen ist, sind width und height bekannt. Gecko kennt zudem noch natrualHeight und natrualWidth.

Mit anderen Worten: Man braucht keine drei Arrays, zumal das eine schlechte Struktur ist. Statt Array oder new Array benutzt man die Literale:

var Bilder = ["1a.png", "none.png", "1a80.png", "1tb.png", "1tw.png"];

 

[DarkDragon193]

Kleine Info meinerseits...
Ich hab mir auch mal ne Slideshow gemacht, was zu Deutsch Diashow heißt. Unten eine Slide in der Thumbnails erstellt werden. Die waren im nachhinein aufgrund unterschiedlicher Auflösung alle verzerrt... Um das zu lösen habe ich die Bilder vorgeladen. JavaScript kennt dazu sogar das Objekt Image()! Indem du in dem Array statt lediglich die URLs speicherst, könntest du gleich die ganzen Bilder speichern und diese austauschen... dann hast du für jedes Bild auch gleich die "natürliche" Größe. Und damit du "zoomen" kannst, kannst du auch einfach einen Faktor einbauen, um den X- und Y-Größe skaliert wird.
Bei Bedarf kann ich auch genauere Infos geben, aber damit der Thread schön schrottfrei bleibt würde ich es bevorzugt per PM versenden... xD
JavaScript fasziniert mich zur Zeit irgendwie... Es ist wie eine Programmiersprache für's Internet.