Zum Inhalt springen

Bildgröße mit Javascript festlegen


Empfohlene Beiträge

Hallo Leute!

Für die Schule muss ich als Projekt eine Private Homepage machen, in der ich auch gerne eine Gallerie einbinden möchte. Da ich nicht einfach eine fertige "kopieren" wollte, habe ich mir javascript selbst angeschaut und jetzt auch eine einfache kleine Gallerie gebaut.

Jetzt zu meiner Frage, ich habe schon ziemlich viel gegoogelt und nachgeschaut und bin absolut am Verzweifeln: Wie kann ich die Größe des Bildes mit Javascript festlegen?

Gefunden habe ich: Image(Höhe, Breite), aber trotzdem ich hier die Größenangaben festgelegt habe, klappt es bei einigen Bildern nicht :(

Ich hoffe ihr könnt mir helfen!

Danke schonmal!

Viele Grüße

FlyingFire

Link zu diesem Kommentar
Auf anderen Seiten teilen

Naja, mit Javascript kannst du nur die Anzeigegröße der Bilder im Browser ändern. Mit der eigentlichen Größe der Bilder hat das nichts zu tun. Das bekommst du mit Javascript auch nicht hin.

Aber wenn dir das langt:



// Bilder eindeutig über ID indiziert

var myImg = document.getElementById("Image1");

myImg.height = 480;

myImg.width = 640;


// alle Bilder im Dokument

var myImgs = document.getElementsByTagName("img");


for each (var myImg in myImgs) {

  myImg.width = 640;

  myImg.height = 480;

}


ungetestet, also ohne Gewähr.

Nachtrag:

Dazu müssen natürlich alle Bilder vorhanden sein im Dokument. Also einfach im Header das ausführen bringt dir nichts. Das muss nach dem Laden des Dokuments ausgeführt werden. Nur dann sind alle Elemente auch wirklich da.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Mhhh.... jetzt muss ich aber nochmal nachhaken, weil leider habe ich nicht so wirklich die Ahnung von js :( Habe mir bisher nur so einige Teile zusammengesucht...

Mein Script sieht so aus:

/* Array für die Bildernamen*/

var name=new Array("image_my/fire1_3.gif","image_my/fire1_4.gif","image_my/nico316_1.gif","image_my/nico316_2.gif","image_my/nico316_3.gif","image_my/pocatello1_1.gif");


/*Array für die Bilder*/

var pictures=new Array();



/*Laden der Bilder*/

function load()

{

	var i

	for (i=0;i<6;i++)

	{

		pictures[i]=new Image();

		pictures[i].src=name[i];


	}

}


/*zeige Bilder*/

function show(nr)

{


	document.images[0].src=pictures[nr].src;

}


Und rufe das ganze dann im Body so auf:
<body style="direction: ltr;" onLoad="load();">


<!-- start header -->


<div id="header">

<h1></h1>


</div>


<!-- end header -->

<!-- start page -->

<div id="page"><!-- start content -->

<div id="content">

<div class="post">

<h1 class="title">Horses</h1>


<img src="image_my/fire1_3.gif" width="500" heigth="400">


<a href="javascript:show(0)">Picture1-</a>


<a href="javascript:show(1)">Picture2-</a>

<a href="javascript:show(2)">Picture3-</a>

<a href="javascript:show(3)">Picture4-</a>

<a href="javascript:show(4)">Picture5-</a>

<a href="javascript:show(5)">Picture6-</a>

An welcher Stelle müsste dann die Festlegung des Bildes zur Anzeige im Browser stattfinden? in der "function show"?

Grüße

Link zu diesem Kommentar
Auf anderen Seiten teilen

An welcher Stelle müsste dann die Festlegung des Bildes zur Anzeige im Browser stattfinden? in der "function show"?

In dem Fall sollte die Festlegung der Anzeigegröße schon vorher stattfinden, nämlich bei dir oder auf dem Server. Selbst wenn ein bild nur mit 600x400 angezeigt wird, wird zuerst das ganze Bild vom Browser geladen. Das ist unnötige Zeit- und Bandbreitenverschwendung wenn du die Bilder eh kleiner zeigen willst.

Fall du sie trotzdem auch noch in groß anzeigen lassen willst irgendwie, kannst du das immernoch über einen Link zur großen Version des bildes machen.

Ansonsten, wenn die alle dieselbe Größe haben sollen, dann kannst du das vorher festlegen. Ansonsten musst du das vom geladenen bild abhängig machen und das ist erst da, wenn das Bild geladen ist. In der Funktion show ist das zu früh.

Ich wüßte jetzt auch nichts anderes.

Ich hab das früher mal so gemacht, dass ich Bilder in einem eigenen Fenster anzeigen lasse, die Seite im neuen Fenster ist immer dieselbe und nur das bild wird per Javascript geändert. In dieser Seite war dann ein onload-script drin, welches das Fenster auf die Größe des bildes angepasst hat. Aber vor onload geht das nicht. Und etwas ähnliches hast du hier ja nicht mehr.

Das Zusammensuchen aus irgendwelchen Quellen ist immer blöd, wenn man selbst keine Ahnung hat. Nur selten hat man keine anderen Wünsche oder Vorstellungen als der Schreiber der Sachen.

Das einzige was du tun kannst und auch tun solltest ist die bilder von vorneherein auf die richtige Größe zu bringen.

Ich kenne noch zu gut die Leute, die mal schnell ein paar Bilder von ihrer neuen DigiCam zeigen wollten und dazu ein 3MP-Bild ins Internet stellten. :rolleyes:

Und du solltest deinen JAvascript aufruf etwas umschreiben:


<a href="javascript: void(show(0));">

Denn ein Aufruf ohne das casten auf void liefert ja irgendwas zurück was dann als Linkziel angesehen wird und es kann zu einem Fehler kommen dann. Ich weiß nicht mehr genau in welcher Situation, aber das hatte ich schonmal. So geht es auf jeden Fall.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...