Linuchs: Image Map

Hallo,

vor Urzeiten habe ich mal mit image maps experimentiert, als die Bildergrößen noch in festen Pixel angegeben wurden.

Jetzt möchte ich beim Übermausen (mouseover) eines Gruppenfotos Namen von Personen anzeigen. Doch je nach Viewport beim Leser hat das Bild eine unbekannte Größe in Pixel.

Mit Prozentangaben kommt http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=map wohl nicht zurecht?

Linuchs

  1. hier eine Idee:

      
    <div style="position:relative">  
    <img src="havelschipper.jpg" alt="Havelschipper">  
    <div style="position:absolute; left:12%;width:6%; top:50%;height:15%; border:2px solid #ccc;" title="N.N., Gitarre"></div>
    

    Das Gesicht wird "umrahmt", damit ist auch gleich erkennbar, dass Informationen vorliegen.

    Leider kenne ich die Möglichkeit nicht, in Gimp eine Prozent-Skala statt der Pixel-Skala einzustellen, um das Bild auszumessen.

    Pro Person ist ein aufwändiges "Try and Error" notwendig. Bei 20 - 30 Personen pro Bild nicht machbar.

    Linuchs

    1. Om nah hoo pez nyeetz, Linuchs!

      Leider kenne ich die Möglichkeit nicht, in Gimp eine Prozent-Skala statt der Pixel-Skala einzustellen, um das Bild auszumessen.

      Pro Person ist ein aufwändiges "Try and Error" notwendig. Bei 20 - 30 Personen pro Bild nicht machbar.

      Arbeite mit Pixelwerten. Rechne diese in Prozent um. Kein „Try and Error“.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kart und Kartoffelsalat.

    2. Pro Person ist ein aufwändiges "Try and Error" notwendig. Bei 20 - 30 Personen pro Bild nicht machbar.

      Bei 20-30 Personen auf einem Bild und einem responsivem Design, das mobile Geräte unterstützt würd' ich wirklich einen anderen Lösungsansatz versuchen.

  2. Jetzt möchte ich beim Übermausen (mouseover) eines Gruppenfotos Namen von Personen anzeigen. Doch je nach Viewport beim Leser hat das Bild eine unbekannte Größe in Pixel.

    Für dein Vorhaben gibt es Javascript-Klassen/Plugins. Unter Suchmaschine: "responsive image maps" findest du verschiedene Beispiele. Wie performant derartige Lösungen sind kann ich allerdings nicht beurteilen.

    Du solltest berücksichtigen, dass, wenn dein Design Responiv sein soll, du auf Touch-Geräten kein "onmouseover" oder :hover zur Verfügung hast. Demnach ist eine derartige Umsetzung für Geräte mit Touch-Screen eher ungeeignet.

    Oftmals wird das so gelöst, dass man eine Feature-Erkennung mit Javascript (Modernizr) macht und wenn das Anzeigende Gerät ein Touchdevice ist ersetzt man das onmouseover (oder :hover) durch einen Klick (touchstart). Dann muss der Anwender 2x klicken. Ein erstes Mal um den onmouseover-Effekt zu triggern und ein zweites Mal um das eigentliche Klick-Event auszuführen.

    Ich finde diesen Lösungsansatz für deine Anwendung (Anzeige von Namen in einem Gruppenfoto) jedoch vom Aufwand her übertrieben. Es wäre evtl. sinvoller Profilfotos der Gruppenmitglieder zu erstellen und den Namen gleich mit anzuzeigen. Das wäre auch für ein Responsive-Design leichter umzusetzen und hätte auch für den Anwender den Vorteil, dass er gleich an die gewünschte Information kommt. Aber das ist nur meine Bescheidene Meinung und geht an deiner Fragestellung vorbei.

    lg
    mark

    1. Hallo mark,

      danke für deine ausführlicihe Stellungnahme.

      Ich habe inzwischen experimentiert, das Bild auf 1000 x 1000 Pixel zu verzerren. Die x, y Koordinaten eines Punktes geteilt durch 10 ist die Prozentangabe.

      Für dein Vorhaben gibt es Javascript-Klassen/Plugins.

      Ja, habe ich gesehen. Aber da das Bild das onresize-Event gar nicht feuert, sehe ich keinen Sinn in Javascript. Ich habe den Viewport verschmälert, damit wird auch das Bild in der Größe verändert. <img ... onresize="alert('Größe verändert')"> zeigt nichts an.

      Du solltest berücksichtigen, dass, wenn dein Design Responiv sein soll, du auf Touch-Geräten kein "onmouseover" oder :hover zur Verfügung hast. Demnach ist eine derartige Umsetzung für Geräte mit Touch-Screen eher ungeeignet.

      Tja, muss ich drüber nachdenken.

      Ich finde diesen Lösungsansatz für deine Anwendung (Anzeige von Namen in einem Gruppenfoto) jedoch vom Aufwand her übertrieben.

      Recht hast du. Vielleicht schreibe ich den Personen eine Zahl auf das Gesicht (aber dazu muss ich ja auch die Position des Gesichts ermitteln) und dann unter dem Bild die Zuordnung ...

      Linuchs

      1. Ja, habe ich gesehen. Aber da das Bild das onresize-Event gar nicht feuert, sehe ich keinen Sinn in Javascript. Ich habe den Viewport verschmälert, damit wird auch das Bild in der Größe verändert. <img ... onresize="alert('Größe verändert')"> zeigt nichts an.

        Bei onresize auf Elementen verhalten sich die Browser recht unterschiedlich, jediglich das window-Objekt feuert  ein Event in fast allen Browsern. Das ist aber auch ausreichend um dein Vorhaben mit Javascript umzusetzen.

        Ich habe inzwischen experimentiert, das Bild auf 1000 x 1000 Pixel zu verzerren. Die x, y Koordinaten eines Punktes geteilt durch 10 ist die Prozentangabe.

        Hab' mich jetzt ein wenig umgeschaut und schon öfters gelesen, dass das mit der Prozentangabe in image maps nicht hinreichend funktioniert. Hier hat das mal jemand untersucht. Funktioniert bei mir in keinem einzigen Browser.

        Also Vorsicht damit.

        lg
        mark

        1. Bei onresize auf Elementen verhalten sich die Browser recht unterschiedlich, jediglich das window-Objekt feuert  ein Event in fast allen Browsern. Das ist aber auch ausreichend um dein Vorhaben mit Javascript umzusetzen.

          Das Element img soll aber auf onresize reagieren. Im FF tut es das nicht, also für mich gestorben. Habe nicht die Zeit, Forschung zu betreiben, welcher Browser sich wann und in welcher Version wie verhält.

          Ich habe inzwischen experimentiert, das Bild auf 1000 x 1000 Pixel zu verzerren. Die x, y Koordinaten eines Punktes geteilt durch 10 ist die Prozentangabe.

          Hab' mich jetzt ein wenig umgeschaut und schon öfters gelesen, dass das mit der Prozentangabe in image maps nicht hinreichend funktioniert. Hier hat das mal jemand untersucht. Funktioniert bei mir in keinem einzigen Browser.

          Nein, nicht image maps, sondern auf das Bild gelegte divs (position:absolute mit %), deren Position wird bei resize des Bildes mitverändert.

          Bin dabei, per Javascript-Klick auf das Bild die x. y Position in % ausgeben zu lassen. Das wäre dann für 30 Personen ein überschaubarer Aufwand.

          Linuchs