Bildgröße bestimmen nach Wechsel des Bildes

[Kevin]

Hallo,

ich habe ein Seite, in der ich per DropDown die anzuzeigende Grafik auswähln kann. Das img-Tag wird dann mit
Bild.src= formular.GrafikDropDown.value;
gewechselt.
Nebenbei wird noch mit Bild.width bzw. Bild.height die Größe des Bildes bestimmt. Nun folgendes Problem:
Beim ersten Aufruf läuft alles glatt, das erste (default-)Bild steht im img-Tag und die Breite/Höhe werden korrekt ausgelesen+angezeigt.
Wenn ich jetzt aber das Bild per JS austausche (siehe oben), dann kann ich nicht einfach wieder
var breite = Bild.width
benutzen, denn das hat scheinbar nicht "bemerkt" dass ich das Bild ausgetauscht hab und zeigt die alten Werte vom ersten Bild an. Was nun? Wie komme ich an die Ausmaße des Bildes ran? Kann man das Auslesen von width/height irgendwie resetten, neu erzwingen, oder so?

Wäre dankbar für Tipps,

mfg. Kevin.

[code2i]

moin

http://selfhtml.teamone.de/javascript/objekte/images.htm
da kann dir gehofen werden.

Das Ändern der Eigenschaft width ist bislang nur im MS Internet Explorer und im Netscape 6.1 möglich.(steht da und wie das sonst geht auch)

Denke das hilft erschtmal a bissl.

cu

[Norbert Klein]

Was nun? Wie komme ich an die Ausmaße des Bildes ran? Kann man das Auslesen von width/height irgendwie resetten, neu erzwingen, oder so?

Du hast, vermute ich, im img-tag Breite und Höhe deines default-Bilds 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.

=> Dass du durch die Abfrage von Bild.width eben genau diese erste Größenangabe erhälst.

=> 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.

Gruß
Norbert

[Kevin]

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

Nein.

=> 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.

=> 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.
Hier mal der komplette code:

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

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

<SCRIPT LANGUAGE="JavaScript">

document.write("<img name='Bild' id='Bild' src=formular.BlockGrafik.value + "'>");
formular.BlockGrafikBreite.value=Bild.width;
formular.BlockGrafikHoehe.value=Bild.height;
var breite = Bild.width/5;
var hoehe = Bild.height/5;
Bild.width=breite;
Bild.height=hoehe;

function reloadBild()
{
Bild.src= formular.BlockGrafik.value;
var hoehe2 = Bild.width/5;
var breite2 = Bild.height/5;
Bild.width=breite2;
Bild.height=hoehe2;
formular.BlockGrafikBreite.value=Bild.width;
formular.BlockGrafikHoehe.value=Bild.height;
}

</script>

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.

mfg. Kevin.

[code2i]

moin

<SCRIPT LANGUAGE="JavaScript">

document.write("<img name='Bild' id='Bild' src=formular.BlockGrafik.value + "'>");
formular.BlockGrafikBreite.value=Bild.width;
formular.BlockGrafikHoehe.value=Bild.height;
var breite = Bild.width/5;
var hoehe = Bild.height/5;
Bild.width=breite;
Bild.height=hoehe;

function reloadBild()
{
Bild.src= formular.BlockGrafik.value;

Hier legst du die Höhe und Breite fest!!!

var hoehe2 = Bild.width/5;
var breite2 = Bild.height/5;

Is aber das gleiche wie oben ! Du hast ja nun nen neues Bild und musst die Werte erstmal für das neue ermitteln, sonst sind es die alten. Hast du ja auch gemacht aber zu spät.

Bild.width=breite2;
Bild.height=hoehe2;

.... hier holst du die neuen Werte ! ... zu spät!

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

</script>

Mal so probieren!!!

function reloadBild()
 {
 Bild.src= formular.BlockGrafik.value;
 formular.BlockGrafikBreite.value=Bild.width;
 formular.BlockGrafikHoehe.value=Bild.height;
 var hoehe2 = Bild.width/5;
 var breite2 = Bild.height/5;
 Bild.width=breite2;
 Bild.height=hoehe2;
 }

Habs aber nicht probiert!!!

cu

[Norbert Klein]

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

[Kevin]

Ja Klasse, funktioniert ganz wunderbar... Danke! Nur dass er ein etwas komisches Verhalten zeigt. Angenommen das erste Bild ist exakt 485x257px groß, ich wechsle aufs nächste Bild (das ist exakt genauso groß) und wieder zurück zum ersten, dann ist das erste plötzlich 486x324 groß....

Wenn Du das noch löst, bist Du heute mein Gott.... ;-)

mfg. Kevin.

[Norbert Klein]

Wenn Du das noch löst, bist Du heute mein Gott.... ;-)

Nur heute? - Naja, von mir aus.

Sagen wir, ich hab's komplett umgeschrieben:
--------------------------------------------
<html>
<head>
<title>Thumbnail-Vorschau</title>
<style type="text/css">
<!--
 body,select,option,input{ font-family:"Courier New",monospace; font-size:10pt; vertical-align:middle; }
 th { font-family:Tahoma,sans-serif; font-size:10pt; text-weight:bold; text-align:left; }
//-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
 function reload_thumbnail()
  {
   document.thumbnail.src = form.BlockGrafik.value
   document.thumbnail.width = Math.round(document.original.width/parseFloat(document.form.zoomfaktor.value));
   document.thumbnail.height = Math.round(document.original.height/parseFloat(document.form.zoomfaktor.value));
   document.form.original_width.value = document.original.width + " px";
   document.form.original_height.value = document.original.height + " px";
   document.form.thumbnail_width.value = document.thumbnail.width + " px";
   document.form.thumbnail_height.value = document.thumbnail.height + " px";
  }
 function reload_original()
  {
   document.original.src = form.BlockGrafik.value;
   window.setTimeout("reload_thumbnail()",100);
  }
//-->
</script>
</head>
<body onLoad="reload_original()">
<form name="form">
<table border="1">
 <tr>
  <th colspan="2">
Thumbnail-Vorschau von
<select name="BlockGrafik" onChange="reload_original()">
 <option value="bild1.gif">Bild 1</option>
 <option value="bild2.gif">Bild 2</option>
 <option value="bild3.gif">Bild 3</option>
</select>
  </th>
 </tr>
 <tr>
  <td>Originalgröße:</td>
  <td align="center"><input name="original_width" size="7"> x <input name="original_height" size="7"></td>
 </tr>
 <tr>
  <td>Anzeigegröße:</td>
  <td align="center"><input name="thumbnail_width" size="7"> x <input name="thumbnail_height" size="7"></td>
 </tr>
 <tr>
  <td>Zoomfaktor:</td>
  <td align="center">
   1:<select name="zoomfaktor" onChange="reload_original()">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5" selected>5</option>
</select>
  </td>
 </tr>
 <tr>
  <td colspan="2" align="center">
<script type="text/javascript" language="JavaScript">
<!--
 document.write("<img src="" + form.BlockGrafik.value + "" alt="" name="original" style="position:absolute; left:-2000px; top:-2000px; visibility:hidden;">");
 document.write("<img src="" + form.BlockGrafik.value + "" alt="" name="thumbnail">");
//-->
</script>
  </td>
 </tr>
</table>
</form>
</body>
</html>

Nimm raus was du nicht brauchst, mein Schäfchen ;-)

Gruß
Norbert