Suchbild für den Browser

Guten Abend,

gleich vorweg ich bin ein Anfänger in Sachen HTML.

Es geht darum das ich für eine Arbeit ein Suchbild als kleines Browserspiel erstellen soll.
Das Spiel soll so Funktionieren das durch MousOver bei einer bestimmten Koordinate, das gesucht Objekt, durch einen Roten Kreis angezeigt wird.

Den Code hab ich durch googeln gefunden, er war eigentlich dafür gedacht auf einem Bild Links zu verstecken.

Bin jetzt soweit das ich auf meinem Suchbild eine area shape circle definiert habe wo der Fehler ist. Habe es auch hinbekommen das bei MousOver ein Roter Kreis angezeigt wird, aber leider unter meinem Suchbild und nicht über dem definierten Circle.
Es sollen später auch mehrere Objekte zu suchen sein, also nicht nur eins.

Auch wäre ich für eine Erläuterung des Scripts dankbar da ich noch nicht alles verstehe.

HTML-Code:

<body> <h1>Suchbild</h1> <p> <img src="suchbild.jpg" width="582" height="397" border="0" alt="Suchbild" usemap="#Suchbild"> <map name="Suchbild"> <area shape="circle" coords="247,178,10" href="" onMouseOver="document.redcircle.src='red_circle.png';"> <img src="" name="redcircle"> </map> </p> </body>

Gruß
Rammon

Dein JavaScript macht nichts anderes, als dem <img> zu sagen, wo die Bilddatei liegt. Du legst aber nie fest, wo das <img> platziert ist und damit erscheint es einfach im Fließtext.

Ich werde jetzt mal nicht eine Vorlesung über das Box Model halten und was für eine Art Element <img> ist; ich gebe dir nur ein paar Tips, wie du es besser machst.

Tip 1: Verwende richtiges HTML
Was du da hast, ist kein gültiges HTML. Es fehlen <html> und <head>/<title> und den Dokumenttyp hast du auch nicht definiert. So was ging 1998 noch, aber heutzutage kann man schon Besseres verlangen. Ich zeige dir mal, wie das korrekter aussieht:
Code (HTML5):
 
<!DOCTYPE html>
<html lang="de">
	<head>
		<title>Bla</title>
	</head>
	<body>
		<h1>Suchbild</h1>
 
		<p>
			<img src="suchbild.jpg" id="Suchbild_img" name="Suchbild_img" width="582" height="397" border="0" alt="Suchbild" usemap="#Suchbild">
			<map name="Suchbild">
				<area shape="circle" coords="247,178,10" alt="" onMouseOver="/*document.redcircle.style.top='red_circle.png';*/">
				<img src="red_circle.png" alt="" id="redcircle" name="redcircle">
			</map>
		</p>
	</body>
</html>
 
<!DOCTYPE> teilt dem Browser mit, was für ein Dokument du hast: HTML5, XHTML 1.1, HTML 4.01 Transitional und so weiter. So wie ich es angegeben habe, steht es für HTML5.
Jedes standardkonforme HTML-Dokument sollte einen <html>-Tag beinhalten, der alles bis auf <!DOCTYPE> umschließt. Bei HTML5 kann man da auch gleich die Sprache für das Dokument angeben.
Der erste Tag in <html> sollte <head> sein. Hier stehen im Wesentlichen Sachen, die nicht zum Dokumentinhalt gehören, aber das Dokument betreffen. Stylesheets beispielsweise. <head> enthält laut Standard immer <title>, welches den Titel des Dokuments angibt.

So viel zum neuen Kram. Ich habe aber auch was an deinem Code verändert:

Areas sollten ein alt-Attribut haben, welches leer sein darf.
Ich habe den Inhalt des onmouseover-Triggers auskommentiert; der wird gleich eh noch umgebaut.
<img> muß immer ein gefülltes src-Attribut haben. Ich habe das Bild gleich eingetragen, weil wir es sowieso ständig geladen brauchen.
Beide Bilder haben jetzt eine id, die wir gleich brauchen werden. Das obere Bild hat auch einen name.

Jetzt ist das Dokument valides HTML5. Das ist schon mal einiges wert. (Wenn du dir mal eine eigene Website baust, solltest du dich möglichst eng an die Standards halten; das erhöht die Chance, daß deine Seite mit jedem Browser gleich gut funktioniert.)

Tip 2: Verwende CSS
Du hast eine Menge Kram in deinem HTML, der nur dazu da ist, das Aussehen oder die Position von Elementen zu bestimmen. So was wird heutzutage in CSS gemacht, was erheblich flexibler ist. Mit CSS kannst du den Inhalt und das Aussehen der Seite voneinander trennen, was beispielsweise sehr nützlich ist, wenn du am Aussehen etwas ändern willst.
Code (HTML5):
 
<!DOCTYPE html>
<html lang="de">
	<head>
		<title>Bla</title>
		<style type="text/css">
			#Suchbild_img
			{
				width: 582px;
				height: 397px;
				border: none;
			}
 
			#redcircle
			{
				position: absolute;
				top: -99999px;
				left: -99999px;
			}
		</style>
	</head>
	<body>
		<h1>Suchbild</h1>
 
		<p>
			<img src="suchbild.jpg" id="Suchbild_img" name="Suchbild_img" alt="Suchbild" usemap="#Suchbild">
			<map name="Suchbild">
				<area shape="circle" coords="247,178,10" alt="" onMouseOver="/*document.redcircle.style.top='red_circle.png';*/">
				<img src="red_circle.png" alt="" id="redcircle" name="redcircle">
			</map>
		</p>
	</body>
</html>
 
Folgendes ist passiert:

Das erste Bild hat nicht mehr im HTML stehen, welche Größe es hat und ob es einen Rahmen gibt.
Es gibt jetzt im Header einen <style>-Tag, der CSS beinhaltet:

#Suchbild_img (also das Element mit der id Suchbild_img hat eine definierte Höhe und Breite und keinen Rahmen. Beachte, daß man in CSS verschiedene Maßeinheiten verwenden kann und deshalb angibt, was für Einheiten man verwendet. In diesem Fall sind die Angaben in Pixeln.
#redcircle hat position: absolute. Das bedeutet, dass ich genau angebe, wo die Position ist. left: 10px bedeutet also "10 Pixel Abstand vom linken Seitenrand".
#redcircle hat für top und left extreme Minuswerte und erscheint damit irgendwo weit außerhalb der Seite. Damit ist es egal, dass das Bild bereits geladen ist; man kann es nicht mehr sehen.
Es gibt elegantere Wege, etwas mit CSS zu verstecken, aber da wir später sowieso die Position setzen müssen, können wir uns das auch sparen.

Damit haben wir jetzt zumindext vom Markup her eine Seite, die durchaus modern ist. Jetzt müssen wir nur noch den roten Kreis anzeigen. Dafür brauchen wir etwas mehr JavaScript.

Das hier ist gar kein Tip
Code (HTML5):
 
<!DOCTYPE html>
<html lang="de">
	<head>
		<title>Bla</title>
		<style type="text/css">
			#Suchbild_img
			{
				width: 582px;
				height: 397px;
				border: none;
			}
 
			#redcircle
			{
				position: absolute;
				top: -99999px;
				left: -99999px;
				width: 10px;
				height: 10px;
			}
		</style>
		<script type="text/javascript">
			function moveCircle(x, y, width, height)
			{
				// Wir holen uns die beiden Bilder und speichern Verweise auf sie als Variablen.
				var img = document.Suchbild_img;
				var circle = document.redcircle;
 
				// Wir verrechnen die angegebenen Koordinaten mit den Koordinaten des oberen Bildes.
				x += img.offsetLeft;
				y += img.offsetTop;
 
				// Wir positionieren den Kreis und passen seine Größe an.
				circle.style.left = x + "px";
				circle.style.top = y + "px";
				circle.style.width = width + "px";
				circle.style.height = height + "px";
			}
		</script>
	</head>
	<body>
		<h1>Suchbild</h1>
 
		<p>
			<img src="suchbild.jpg" id="Suchbild_img" name="Suchbild_img" alt="Suchbild" usemap="#Suchbild">
			<map name="Suchbild">
				<area shape="circle" coords="247,178,10" alt="" onMouseOver="moveCircle(242, 173, 10, 10);" onmouseout="moveCircle(-99999, -99999, 0, 0);">
			</map>
			<img src="red_circle.png" alt="" id="redcircle" name="redcircle">
		</p>
	</body>
</html>
 
Drei Änderungen:

Es gibt im Header jetzt einen <script>-Tag mit einer JavaScript-Funktion. In dieser Funktion positionieren wir den roten Kreis relativ zum oberen Bild. Das tun wir, indem wir die angegebenen Koordinaten mit der Position des Bildes verrechnen (offsetLeft und offsetTop bezeichnen bei einem Element seine Position auf der Seite). Außerdem setzen wir die Höhe und Breite des Kreises. Das ist zwar nicht unbedingt nötig, aber so kannst du auch Dinge einkreisen, die nicht 10x10 Pixel groß sind.
Der onmouseover-Trigger der <area> rift jetzt die eben definierte Funktion auf. Beachte, dass die angegebene Position um fünf Pixel nach links oben verschoben ist: Die Koordinaten bei einer Kreisform für eine <area> bezeichnen den Mittelpunkt, aber die Koordinaten unseres Kreisbildes bezeichnen dessen obere linke Kante.
Es gibt einen onmouseout-Trigger, der den Kreis wieder aus der Seite schiebt.

Prinzipiell funktioniert jetzt alles und ich hoffe, dass ich dir vermitteln konnte, warum es funktioniert.

Es gibt ein paar Nachteile bei dem ganzen Kram.

Wenn man mit der Maus über einer <area> ist, neigt das Kreisbild dazu, herumzublinken. Das liegt daran, dass das Bild den Fokus von der <area> nimmt und damit wieder versteckt wird, womit die <area> wieder den Fokus kriegt usw. Dieses Problem kann man auch umgehen, das erfordert dann aber entweder experimentelles (= noch nicht überall unterstütztes) CSS oder eine andere Seitenstruktur. Bei derartigen Hover-Effekten werden Imagemaps in der Regel nicht eingesetzt.
In richtigem Webdesign würde man auch die beiden name-Attribute weglassen und in der JavaScript-Funktion die Elemente über document.getElementById() ansprechen – oder gleich eine JavaScript-Bibliothek verwenden. Ich habe das hier der Einfachheit halber drin gelassen.

Das wäre so, was mir spontan zu deinem Problem eingefallen ist.

Hey, vielen dank.
Ja ich denke ich werd über deinen Tip2 weiter machen.