Norbert Klein: Bildgröße bestimmen nach Wechsel des Bildes

Beitrag lesen

Du hast, vermute ich, im img-tag Breite und Höhe deines default-Bilds angegeben.
Nein.

Stimmt, du hast sie nicht im img-tag angegeben.

=> Dass sich jedes andere Bild, was in diesem img-tag angezeigt wird, an diese erste Größenangabe, d.h. die Größe deines default-Bilds, hält und dementsprechend skaliert wird.
Wie gesagt, hab ich nicht.

Hast du doch, aber nicht im img-tag, sondern in deinem Script. Du hast die Höhe und Breite des Bilds jeweils auf 1/5 der Größe des ersten Bilds gesetzt, das gleicht der Angabe von width und height im img-tag. Mit jedem Bild, was ausgewählt wurde, hat sich die Größe dann um 4/5 reduziert, bis 1x1 Pixel erreicht waren.

=> Dass, wenn du im img-tag width und height weglässt, bei jedem Bildwechsel das jeweilige Bild seine Originalgröße erhält, welche somit auch korrekt durch Bild.width und Bild.height abgefragt werden kann.
Genau das funktioniert nicht.

Solange man die Größe nicht anderweitig angibt, geht das.

Hier mal der komplette code:

Ich hab ihn ein bissel angepasst und ein paar Sachen hinzugefügt, damit er funktioniert, kannst das ganze ja deinen Wünschen entsprechend abwandeln:

<form name="formular">

<select name="BlockGrafik" onChange="reloadBild()">
<option value="bild1.gif"></option>
<option value="bild2.gif"></option>
<option value="bild3.gif"></option>
</select>

<input name="BlockGrafikBreite" size="4"> x <input name="BlockGrafikHoehe" size="4">
</form>

[Wobei die Dateinamen dynamisch von ASP ins Select-Feld kommen, daher jetzt erst die generierung des img-Tags]

Macht nichts.

<SCRIPT LANGUAGE="JavaScript">

<!--
// Hier wird getrickst, das selbe Bild wird nochmal in seiner Originalgröße und versteckt in die Seite eingebunden.
document.write("<img name="hiddenBild" id="hiddenBild" src="" + formular.BlockGrafik.value + "" style="position:absolute; visibility:hidden;">");

document.write("<img name='Bild' id='Bild' src=formular.BlockGrafik.value + "'>");

// ^- Da scheint ein Syntax-Fehler drin zu sein, darum:
document.write("<img name="Bild" id="Bild" src="" + formular.BlockGrafik.value + "">");

formular.BlockGrafikBreite.value=Bild.width;

// ^- Das ersetzen wir:
formular.BlockGrafikBreite.value = hiddenBild.width;

formular.BlockGrafikHoehe.value=Bild.height;

// ^- Das auch:
formular.BlockGrafikHoehe.value = hiddenBild.height;

var breite = Bild.width/5;

// ^- Und das:
var breite = hiddenBild.width/5;

var hoehe = Bild.height/5;

// ^- Und das hier auch:
var hoehe = hiddenBild.height/5;

Bild.width=breite;
Bild.height=hoehe;

function reloadBild()
{

// Hier muss auch die source des versteckten Bilds geändert werden:
hiddenBild.src= formular.BlockGrafik.value;

Bild.src= formular.BlockGrafik.value;

var hoehe2 = Bild.width/5;

// ^- Das muss ersetzt werden:
var hoehe2 = hiddenBild.width/5;

var breite2 = Bild.height/5;

// ^- Das muss auch ersetzt werden:
var breite2 = hiddenBild.height/5;

Bild.width=breite2;
Bild.height=hoehe2;
formular.BlockGrafikBreite.value=Bild.width;
formular.BlockGrafikHoehe.value=Bild.height;
}

//-->

</script>

So geht's.

Wie man sieht ist das so ne Art Thumbnail-Vorschau, daher die Werte dividiert durch 5. Ist nur fürs Intranet, daher keine Dateigrößenprobleme.

Und wenn im Intranet der IE benutzt wird, funktioniert es auch.

Gruß
Norbert