Problem bei Erzeugung von Imagemaps (php/html)

[Enrico]

Hallo,

ich erzeuge Imagemaps mittels php dynamisch und es klappt auch alles soweit einwandfrei (Grafik wird angezeigt), nur wird der verweissensitive Bereich (kreisförmiger Bereich für den "Fenster-schliessen"-Button) ignoriert, d.h. ich bekomme hierfür keinen "Link".

Der php-Code, der die Imagemaps erzeugt:

$Grafik = "../Grafiken/Formular__Meldung__" . $Meldung . ".png";

list ($Breite, $Hoehe) = getimagesize ($Grafik);

$css__width       = $Breite . "px";
     $css__height      = $Hoehe  . "px";
     $css__margin_left = "-" . (ceil ($Breite / 2)) . "px";
     $css__margin_top  = "-" . (ceil ($Hoehe / 2)) . "px";

switch ($Meldung)
     {
        case "Spambot":
        {
           $coords           = "433,24,14";
           $_SESSION ['Ban'] = "gesetzt";
           $Weiterleitung    = "Gaestebuch__Lesen.php";

break;
        }
     }

Die zugehörigen css-Definitionen (falls erforderlich):

<style type="text/css" media="screen">
        img#Meldung
        {
           background-image:  url('../Grafiken/Formular__Meldung__<?php echo $Meldung; ?>.png');
           background-repeat: no-repeat;
           height:            <?php echo $css__height; ?>;
           left:              50%;
           margin-left:       <?php echo $css__margin_left; ?>;
           margin-top:        <?php echo $css__margin_top; ?>;
           position:          absolute;
           top:               50%;
           width:             <?php echo $css__width; ?>;
        }
     </style>

Der Code zur Ausgabe der Imagemap:

<img id="Meldung" usemap="#Meldung_Grafik">
     <map name="Meldung_Grafik">
        <area shape="circle" coords="<?php echo $coords; ?>" href="<?php echo $Weiterleitung; ?>">
     </map>

Mir ist beim Ansehen des Quelltextes im Firefox aufgefallen, dass doppelte Anführungszeichen immer in blauer Schrift ausgegeben werden, nur bei der Link-Angabe sind sie schwarz:

<style type="text/css" media="screen">
        img#Meldung
        {
           background-image:  url('../Grafiken/Formular__Meldung__Spambot.png');
           background-repeat: no-repeat;
           height:            201px;
           left:              50%;
           margin-left:       -229px;
           margin-top:        -101px;
           position:          absolute;
           top:               50%;
           width:             457px;
        }
     </style>

...

<img id="Meldung" usemap="#Meldung_Grafik">
     <map name="Meldung_Grafik">
        <area shape="circle" coords="433,24,14" href="Gaestebuch__Lesen.php">
     </map>

Ob dies etwas zu bedeuten hat, kann ich nicht beurteilen, denn formal sieht (für mich) soweit alles richtig aus.

An welcher Stelle habe ich einen Fehler gemacht?

Vielen Dank für eure Mithilfe.

Gruß
Enrico

[Der Martin]

Hi,

ich erzeuge Imagemaps mittels php dynamisch und es klappt auch alles soweit einwandfrei (Grafik wird angezeigt), nur wird der verweissensitive Bereich (kreisförmiger Bereich für den "Fenster-schliessen"-Button) ignoriert, d.h. ich bekomme hierfür keinen "Link".

Der php-Code, der die Imagemaps erzeugt:

... ist im ersten Moment uninteressant. Wie lautet der erzeugte HTML/CSS-Quellcode, den der Client sieht?

Mir ist beim Ansehen des Quelltextes im Firefox aufgefallen, dass doppelte Anführungszeichen immer in blauer Schrift ausgegeben werden, nur bei der Link-Angabe sind sie schwarz:

Bei welcher Link-Angabe? Ich sehe in deinem Codeausschnitt keinen Link. Meinst du das href-Attribut des area-Elements?

<img id="Meldung" usemap="#Meldung_Grafik">
     <map name="Meldung_Grafik">
        <area shape="circle" coords="433,24,14" href="Gaestebuch__Lesen.php">
     </map>

Ist das der tatsächlich erzeugte Code? Das sieht okay aus. Passen die Koordinaten auch zum Bild? Möglicherweise gelten die Koordinaten relativ zur ursprünglichen Lage des Bildes, also ohne Berücksichtung von margin-left und margin-top.

So long,
 Martin

[Felix Riesterer]

Lieber Der Martin,

Möglicherweise gelten die Koordinaten relativ zur ursprünglichen Lage des Bildes, also ohne Berücksichtung von margin-left und margin-top.

wie meinst Du das? Der Browser nimmt ein Bild und legt dort links oben die Koordinaten 0,0 an. Der Rest ist dazu in Relation. Was Padding und Margin angeht, hat ja mit dem Bild nichts zu tun!

Liebe Grüße,

Felix Riesterer.

[Der Martin]

Hallo Felix,

Möglicherweise gelten die Koordinaten relativ zur ursprünglichen Lage des Bildes, also ohne Berücksichtung von margin-left und margin-top.
wie meinst Du das? Der Browser nimmt ein Bild und legt dort links oben die Koordinaten 0,0 an. Der Rest ist dazu in Relation. Was Padding und Margin angeht, hat ja mit dem Bild nichts zu tun!

ja, das ist in der Theorie richtig. In der Theorie ist ebenso richtig, dass coords-Angaben in % relativ zur Bildgröße sein sollten und so auch bei skalierten Bildern noch passen.
In der Praxis ist das aber bei manchen Browsern nicht der Fall; daher meine Mutmaßung, dass die Koordinaten auch bei einem margin-bedingten Offset des zugrundeliegenden Bildes nicht passen.

Ciao,
 Martin

[Enrico]

Hallo Martin (und Felix)

Meinst du das href-Attribut des area-Elements?

Ja, das meinte ich.

Passen die Koordinaten auch zum Bild?

Ich bin die gesamte Maß mit der Maus "abgefahren", kann aber keinen Link feststellen, der Mauszeiger ändert sich nicht.

Ich versteh's nicht, zumal ich mich 1:1 an die Anleitung von SelfHTML gehalten habe.

Gruß,
Enrico

[ChrisB]

Hi,

Passen die Koordinaten auch zum Bild?

Ich bin die gesamte Maß mit der Maus "abgefahren", kann aber keinen Link feststellen, der Mauszeiger ändert sich nicht.

Dann steppe doch mal per Tastatur die Links im Dokument durch (idR. per [Tab]-Taste) - wenn dann nirgendwo auf der Grafik eine Markierung für einen aktivierten Link erscheint, dann ist da wohl auch keiner. (Es sei denn, du hättest focus-Markierungen explizit wegformatiert.)

MfG ChrisB