Bildgröße Ändern

[csteidle]

Hallo ich habe folgendes Problem:
ich habe viele Bilder von denen ich die Größe per css stylesheet steuere. bei diesen Bildern ist jeweils eine area definiert mit 1. Hälfte für zurück zum vorherigen Bild und eine 2. mit vor zum nächsten Bild. Mein Problem ist wie definiere ich die Größe der area, dass diese sich der Bildgröße anpasst?

  
  <img src="Bild.jpg" alt="zzz" usemap="#Bild">  
  <map name="Bild">  
    <area shape="rect" coords="0,0,150,200"  
          href="xxx" alt="xxx" title="xxx">  
    <area shape="rect" coords="150,0,300,200"  
          href="yyy" alt="yyy" title="yyy">  
  </map>  

[Thomas Luethi]

Hallo,

Ich versteh ja nicht, warum Du die Bildgrösse per CSS änderst.
Normalerweise ist es das Beste, wenn man die Bilder genau in der Grösse ausliefert (vom Server zum Client), wie sie dargestellt werden sollen.
Wenn zu grosse Bilder ausgeliefert werden, ist das eine Verschwendung von Bandbreite, und die Bildqualität ist eventuell schlechter, wenn der Browser das Bild verkleinern muss, als wenn Du das Bild vorgängig mit einem anständigen Grafikprogramm auf die richtige Grösse bringst. Und Bilder, die eigentlich zu klein sind, vom Browser grösser darstellen zu lassen, ist eine noch schlechtere Idee ...

Aber nun zu Deinem "Problem":

Die HTML 4.01 Specification sagt im Absatz zu Client Side Image Maps:
"Coordinates are relative to the top, left corner of the object. All values are lengths."
Und das Wort lengths wiederum ist so definiert:
"Length: The value (%Length; in the DTD) may be either a %Pixel; or a percentage of the available horizontal or vertical space. Thus, the value '50%' means half of the available space."

Somit würde ich erwarten, dass auch Prozentangaben als Koordinaten zugelassen sind.
Ich hab eine kleine Testseite gemacht.

HTML (valide):

<p>  
  <img src="bild_512x384.jpg" width="256" height="192" alt="Bild" usemap="#bereiche3">  
  <map name="bereiche3">  
    <area shape="rect" coords="1,1,50%,100%" href="#links" alt="Links" title="Links">  
    <area shape="rect" coords="50%,1,100%,100%" href="#rechts" alt="Rechts" title="Rechts">  
  </map>  
</p>

Resultat:
(Firefox 9.0.1, MS IE 9 und Opera 11.60)
Nur zwei kleine Rechtecke von 50 Pixel Breite und 100 Pixel Höhe werden als Link aktiv, der Rest des Bildes ist inaktiv.
Das heisst, die Browser verhalten sich so, wie wenn statt Prozentangaben normale Pixelwerte dastehen würden, also so:

<area shape="rect" coords="1,1,50,100" href="#links" alt="Links" title="Links">  
<area shape="rect" coords="50,1,100,100" href="#rechts" alt="Rechts" title="Rechts">

Es spielt übrigens keine Rolle, ob man die obere linke Ecke mit "0%,0%" oder mit "1,1" definiert, und auch das Mischen von Pixel- und Prozentwerten ist hier nicht die Problemursache.

Dieses (IMHO) Fehlverhalten der Browser ist bekannt.
So schreibt z.B. Mark "Tarquin" Wilton-Jones:
"No major browsers understand percentage coordinates correctly, and all interpret percentage coordinates as pixel coordinates."
Und Jukka "Yucca" Korpela:
"The HTML specifications allow percentage values for coordinates too, so that e.g. COORDS='0,0,100%,100%' could be used when specifying a rectangle which covers the entire image. However, many popular browsers incorrecly treat such values as pixels, i.e. ignore the % sign. Thus, don't use percentages."

Für den OP heisst das:
Wenn Deine Bilder verschieden gross sind, musst Du wohl mit JavaScript die effektive Grösse herausfinden und dann die Imagemap entsprechend anpassen.

Freundliche Grüsse
Thomas

[Matthias Apsel]

Om nah hoo pez nyeetz, Thomas Luethi!

Normalerweise ist es das Beste, wenn man die Bilder genau in der Grösse ausliefert (vom Server zum Client), wie sie dargestellt werden sollen.
Wenn zu grosse Bilder ausgeliefert werden, ist das eine Verschwendung von Bandbreite, und die Bildqualität ist eventuell schlechter, wenn der Browser das Bild verkleinern muss, als wenn Du das Bild vorgängig mit einem anständigen Grafikprogramm auf die richtige Grösse bringst. Und Bilder, die eigentlich zu klein sind, vom Browser grösser darstellen zu lassen, ist eine noch schlechtere Idee ...

Ich habe die Erfahrung gemacht, dass die Browser inzwischen sehr gut die Bilder verkleinern können. Wenn man dasselbe Bild in mehreren Größen braucht, ist es darum besser, nur das große auszuliefern.

Matthias

[csteidle]

Hallo Thomas,

erst mal Danke für die Infos!

Das ändern der Bildgröße hat den grund, dass die Gallery auch auf Facebook erscheinen soll und die Bilder dafür zu groß waren. (Dabei wähle ich über php die jeweils benötigte css-Datei aus)

Kann mir irgendwer sagen wie ich mit JavaScript die effektive Bildgröße herausfinden kann? bzw. wie ich diese halbiere?

Danke Christian

[Thomas Luethi]

Hallo Christian,

Das ändern der Bildgröße hat den grund, dass die Gallery auch auf Facebook erscheinen soll und die Bilder dafür zu groß waren. (Dabei wähle ich über php die jeweils benötigte css-Datei aus)

Naja, das verstehe ich so halb. Egal.
Mit PHP hast Du ja auch Werkzeuge, um die Dimensionen von Bildern herauszufinden, z.B. getimagesize()

Kann mir irgendwer sagen wie ich mit JavaScript die effektive Bildgröße herausfinden kann? bzw. wie ich diese halbiere?

Ja, das kann Dir der gute alte Stefan Münz sagen: ;-)
SelfHTML -> JavaScript/DOM -> Objektreferenz -> http://de.selfhtml.org/javascript/objekte/images.htm@title=images
SELFHTML -> JavaScript/DOM -> Sprachelemente -> http://de.selfhtml.org/javascript/sprache/operatoren.htm@title=Operatoren

Und andere Poster hier können Dir dann noch zielgerichtete Links ins neue Wiki posten...

HTH, mfg
Thomas

[Csteidle]

Hallo Thomas,

erst mal Danke! Ich werd mich da mal hineinlesen da ich nicht wirklich Ahnung hab ;-)

[Csteidle]

so nun funktioniert´s und zwar so:

  
<!-- Bild -->  
       <img name="slide" src="${imagePath}" usemap ="#clickmap"/>  
        <map id ="clickmap" name="clickmap">  
<!-- zurück im Bild -->  
[code lang=javascript]  
         <script type="text/javascript">  
document.write('<area shape ="rect" coords="0,0,' + document.slide.width/2 + "," + document.slide.height + '"href ="${previousPage}"/>');  
        </script>  

<!-- weiter im Bild -->
        <script type="text/javascript">
          document.write('<area shape ="rect" coords="' + document.slide.width/2 + ",0," + document.slide.width + "," + document.slide.height + '"href ="${nextPage}"/>');
        </script>
      </map>
[/code]