Verweissensitive Grafik funktioniert nicht

So Be15

Hallo zusammen:

Ich bin neu hier und habe gleich mal eine Frage. Ich habe folgenden Code geschrieben:

HTML

<head>
<title>Fehlerseite 404</title>
<meta http-equiv="Content-Type" content="text/html;iso-8859-1"><meta name="description" content="HTML">
</head><body>
<div id="Hintergrund" style="position:absolute; left:0px; top:0px;width:100%; height:100%;z-index:1; visibility:visible"><img src="404_Fehlerseite_bären.jpg" width="100%" height="100%" border="0"></div>
<img src="404_Fehlerseite_bären.jpg" alt="Fehlerseite" usemap="#404" /><map name="404">  <area shape="rect" coords="127,372,66,397" href="http://www.tic-torgau.de" alt="TIC" title="TIC" /></map>
</body>

Mit diesem Code habe ich das Bild "404_Fehlerseite_bären.jpg" als Hintergrund definiert, da ich dieses Bild als 404-Fehlerseite anzeigen lassen möchte.
Zudem soll von dem Bild der Schriftzug "http://www.tic-torgau.de" verweissensitiv werden. D.h. klickt man auf diesen Textteil, soll zur genannten Webseite verlinkt werden.
Die Koordinaten sind höchstwahrscheinlich falsch. Aber wenn ich mit dem Mauszeiger das Bild absuche, finde ich nirgends dieses Rechteck mit dem Link. Die
Definition des verweissensitiven Bereiches scheint also nicht zu funktionieren. Aber wo liegt der Fehler? Wie kann ich diesen Bereich definieren? Übrigens befinden
sich die HTML-Datei mit dem oben eingefügten Code und die Bild-Datei auf meinem lokalen Rechner im gleichen Ordner.
Über möglichst schnelle Hilfe würde ich mich freuen. Habt schon mal vielen Dank!

djheke

Code

<div>
<img src="404_Fehlerseite_bären.jpg" alt="Fehlerseite" usemap="#404" style="width:100%;height:100%;">
<map name="404">  
<area shape="rect" coords="127,372,66,397" href="http://www.tic-torgau.de" alt="TIC" title="TIC" />
</map>
</div>

So Be15

Hallo djheke:

Danke für die schnelle Antwort!
Ich habe den Code entsprechend Ihrer Antwort geändert.
Zwar wird das Bild problemlos angezeigt. Der Link funktioniert aber immer noch nicht, wenn ich die HTML-Datei in Chrome öffne.
Oder funktioniert er nur, wenn die HTML-Datei und die Bild-Datei auf dem Server sind?
Mein Code sieht jetzt so aus:

HTML

<html>
<head>
<title>Fehlerseite 404</title>
<meta http-equiv="Content-Type" content="text/html;iso-8859-1"><meta name="description" content="Fireworks MX Splice HTML">
<!-- Fireworks MX Director HTML target.Created Mon Jun 20 21:03:48 GMT+0200 2005 -->
</head><body><div><img src="404_Fehlerseite_bären.jpg" alt="Fehlerseite" usemap="#404" style="width:100%;height:100%;"><map name="404">  <area shape="rect" coords="127,372,66,397" href="http://www.tic-torgau.de" alt="TIC" title="TIC" /></map></div></body></html>

Gastl

Sicher müssen die Dateien auf einem Server, im selben Ordner liegen. Der kann auch zu Hause stehen.

threadi

Eine pure HTML-Datei kann auch lokal ohne Server aufgerufen werden. Meine Vermutung weshalb der Link nicht anklickbar ist geht jedoch eher in Richtung des fehlerhaften HTML-Codes als Ursache. Ein Doctype fehlt z.B., dadurch könnten manche Browser den Code fehlerhaft interpretieren, was letztlich auch zu so einem Problem führen kann. Weiterhin sollte man als Name der Map keine reinen Zahlen verwenden - pass das mal z.B. zu "meinekarte" an, und beim Bild-Attribut usemap dann analog.

Gastl

HTML 5 bedarf, so weit mir bekannt, keiner angabe eines Doctypes.
Hast natürlich Recht was eine reine HTML-Datei angeht. Es bedarf keines Servers.

threadi

HTML5 wird nur mit Doctype auch zu einem HTML5-Dokument und wird auch nur dann von Browsern richtig gerendet. Siehe:
http://www.w3.org/TR/html5/syntax.html#the-doctype

Gastl

Wenn du das meinst:
<!doctype html>

Zustimmung, mehr nicht.
HTML 5 erkennt aber wohl, wenn nicht mehr als <html> angegeben ist, es als HTML5. Läuft wohl drauf hinaus, es nicht engeben zu müssen. Das lese ich immer öfter und immer wieder. Und es funktioniert auch. Es war in der Geschichte von HTML schon immer so, das vieles definiert ist, aber auch sehr vieles einfach interpretiert und akzeptiert wird.

djheke

Der Link wird schon vorhanden sein, aber da x2 kleiner als x1 ist, ist die Startposition nicht 127px sondern 66px. Vielleich hoverst du einfach dran vorbei.

So Be15

Hallo zusammen:
Danke für die bisherigen Antworten.
Den Doctype habe ich jetzt auch eingefügt.
Der Code sieht jetzt so aus:

HTML

<!doctype html><html>
<head>
<title>Fehlerseite</title>
<meta http-equiv="Content-Type" content="text/html;iso-8859-1"><meta name="description" content="Fireworks MX Splice HTML">
<!-- Fireworks MX Director HTML target.Created Mon Jun 20 21:03:48 GMT+0200 2005 -->
</head><body><div><img src="404_Fehlerseite_bären.jpg" alt="Fehlerseite" usemap="#Fehlerseite" style="width:100%;height:100%;"><map name="Fehlerseite">  <area shape="rect" coords="127,372,66,397" href="http://www.tic-torgau.de" alt="TIC" title="TIC" /></map></div></body></html>

Leider funktioniert es immer noch nicht.
Im Anhang findet Ihr auch mal die html-Datei und die jpeg-Datei, um die es geht. Vielleicht kann sich ja einer von Euch
die Dateien möglichst umgehend mal anschauen und den oder die Fehler beheben, sodass ich dann eine funktionsfähige
html-Datei habe. ich brauche die Datei dringend!
Danke schonmal für Eure Hilfe!

MrMurphy

Hallo

Zitat

Leider funktioniert es immer noch nicht.

Doch, das funktioniert. Allerdings hast du zwei Probleme "eingebaut".

1. Die verweisintensive Fläche ist sehr klein.

2. Die Koordinaten für die verweisintensive Fläche sind absolut, die Bildgröße (100% Breite und Höhe) ist aber relativ. Als Ergebnis wandert die verweisintensive Fläche je nach Fenstergröße des Browsers, dem sogenannten Viewport, über das Bild.

Genauer: Die verweisintensive Fläche bleibt immer am gleichen Fleck, die Grafik darunter verschiebt sich.

Verweisintensive Grafiken sollten also eher bei festen Bildgrößen verwendet werden.

Gruss

MrMurphy

Gastl

Ich würde ohnehin nicht mit Koordinaten arbeiten, denn, was ist, wenn das Fenster eine andere Größe hat/bekommt? Dann stimmen deine Koordinaten nicht mehr.

Dein Fehler liegt in den Koordinaten. Die Koordinaten werden bei rect="x1,y1,x2,y2" folgender Maßen angegeben:

x1 linke obere x-Koordinate
y1 linke obere y-Koordinate
x2 rechte untere x-Koordinate
y2 rechte untere y-Koordinate

Das bedeutet immer, dass die ersten beiden Zahlen x1 und y1 zwangsläufig kleiner als das zweite Zahlenpaar sein müssen. Das ist bei dir nicht der Fall. Ändere deine Koordinaten und schon klappt es.

Nachtrag: fast zeitgleich

MrMurphy

Hallo

Code

Das bedeutet immer, dass die ersten beiden Zahlen x1 und y1 zwangsläufig kleiner als das zweite Zahlenpaar sein muss.

Hinweis: Nein, welche Ecke zuerst angegeben wird ist egal.

Gruss

MrMurphy

djheke

Image map kann nur absolute Koordinaten und keine Prozente. Somit stimmen diese nicht überein.
Hier mal eine andere Lösung.

HTML

<!doctype html>
<html>
<head>
<title>Image Map</title>
<style>
* { 
 margin:0;
 padding:0;
}


html,body {
 height:100%;
}


div {
 width:100%;
 min-height:100%;
 float:left;
 position:relative;
 background:url(fehlerseite404.jpg) no-repeat top center;
 background-size:100% 100%;
}


a {
 position:absolute;
 display:block;
 left:17%;
 top:33.3%;
 width:20%;
 height:5%;
 overflow:hidden;
}


a img {
 position:absolute;
 width:100%;
 height:100%;
 left:0;
 top:0;
}


</style>
</head>
<body>
<div>
<a href="http://www.tic-torgau.de"><img src="linktext.jpg" alt="zurück zur Homepage"></a>
</div>
</body>
</html>

Alles anzeigen

Obwohl es bissel verspielt ist. Erstell dir lieber eine vernümpftige Fehlerseite.
Beispiel: http://www.gipspferd.de/forumhilfe/feh…erseite404.html

http://www.gipspferd.de/forumhilfe/feh…erseite404.htmlIch war wohl wieder zu Spät?!

- - - Aktualisiert - - -

Zitat von MrMurphy
Hallo
Code
Das bedeutet immer, dass die ersten beiden Zahlen x1 und y1 zwangsläufig kleiner als das zweite Zahlenpaar sein muss.
Hinweis: Nein, welche Ecke zuerst angegeben wird ist egal.

Gruss

MrMurphy

Ja, aber ist verwirrend.

- - - Aktualisiert - - -

Zitat von MrMurphy
Hallo
Code
Das bedeutet immer, dass die ersten beiden Zahlen x1 und y1 zwangsläufig kleiner als das zweite Zahlenpaar sein muss.
Hinweis: Nein, welche Ecke zuerst angegeben wird ist egal.

Gruss

MrMurphy

Stimmt, kann aber sehr verwirrend sein.

Gastl

Zitat von MrMurphy
Hallo
Code
Das bedeutet immer, dass die ersten beiden Zahlen x1 und y1 zwangsläufig kleiner als das zweite Zahlenpaar sein muss.
Hinweis: Nein, welche Ecke zuerst angegeben wird ist egal.

Gruss

MrMurphy

Da widerspreche ich. In jeder HTML-Literatur wie z.B. Münz/Nefzger, in Selfhtml etc. steht es so drin. Und es ist auch logisch. Wie soll denn der Browser wissen, das mit x1 nicht x1, sondern y2 gemeint ist?
Du schreibst immer wieder, der Quellcode von So Be15 funktioniere. Tut er nicht. Erst wenn man die Koordinaten richtig setzt, funktioniert es.

Nachtrag: ich muss mich revidieren. Mit meinem Phase5 geht es nicht. Der dort verbaute Browser macht zicken. Starte ich mit Strg+F9 aber einen externen Browser wie Firefox, ist es egal welches Koordinatenpaar zuerst da steht. Sehr interessant. Phase5 nutze ich schon seit 2000, habe das aber so noch nicht erleben dürfen.

Wieder dazu gelernt

djheke

Wenn x2 oder y2 kleiner als x1 und y1 dann werden die Koordinaten nach lins/oben verschoben. Somite sind x2 und y2 eigentlich x1 und y1.

MrMurphy

Hallo,

einfach mal das folgende div außerhalb des bereits vorhandenen div hinzufügen. Das rote, recht kleine, div befindet sich dann innerhalb des verweisintensiven Bereichs, der mit einer Höhe von 25px und einer Breite von 61px, wie schon geschrieben, recht klein ist:

Code

<div style="background-color: red; position: absolute; width: 5px; height: 5px; left: 91px; top: 385px;"></div>

Gruss

MrMurphy

So Be15

Hallo an alle:

Riesen Dank an Euch alle für die schnelle Hilfe, vor allem an Dich djheke. Dein Code funktioniert genauso, wie ich Ihn brauche.
Deshalb setze ich das Theme auf den Status "gelöst".
Super, wie gut hier geholfen wird!
Danke nochmal!

Tags