Hallo zusammen,
schreibe gerade an einem kleinen JSF Prototypen und möchte via Grafik ein Input Feld beschreiben.
Das Bild stellt den menschlichen Körper dar und soll beim Klick bspw. auf den Arm eine Vergrößerung des Arms anzeigen (neues Bild). Ein weiterer Klick auf die genaue Lokalisation soll dann den Namen der Lokalisation in ein Input Feld schreiben.
Dabei darf die Seite allerdings nicht neu geladen werden, somit ist denk ich Ajax oder eine Form von jQuery am besten geeignet. Hat jemand einen Ansatz oder Lösung für mein Problem? Muss keine der o.g. techniken sein, wenns anders einfacher ist

Ich weiß ohne Ansätze nach Hilfe zu fragen ist blöd, aber hab leider nicht einmal eine Idee für die Lösung.
Danke für eure Hilfe

Die Frage ist wo die genaueren Angaben gespeichert stehen.

Wenn es nicht zu viel Text ist, kannst du es mit einem einfachen JavaScript, einer ImageMap und dem onclick-Ereignis auf die Grafik lösen.

Code :

1 2 3

| dunkelgrau | hellgrau | | dunkelrot  | hellrot  | | dunkelblau | hellblau |

Wenn ich ein Bild wie oben nachgestellt habe, dann schreibe ich damit die angeklickte Farbe in das Textfeld.

HTML-Code:

<script language="javascript" type="text/javascript">
function text (text) {
	document.getElementById("beschreibung").value = text;
}
</script>
<img src="C:/xampp/htdocs/test/pic01.jpg" width="100" height="150" border="0" usemap="#map" />
<map name="map">
	<area shape="rect" coords="0,0,50,50" alt="dunkelgrau" onclick="text(this.alt);"/>
	<area shape="rect" coords="0,50,50,100" alt="dunkelrot" onclick="text(this.alt);"/>
	<area shape="rect" coords="0,100,50,150" alt="dunkelblau" onclick="text(this.alt);"/>

	<area shape="rect" coords="50,0,100,50" alt="hellgrau" onclick="text(this.alt);"/>
	<area shape="rect" coords="50,50,100,100" alt="hellrot" onclick="text(this.alt);"/>
	<area shape="rect" coords="50,100,100,150" alt="hellblau" onclick="text(this.alt);"/>
</map>
<br />
<input type="text" name="beschreibung" value="" size="20" maxlength="50" id="beschreibung"/>

Erst mal danke für den schnellen Beitrag.
Die Map wird sicherlich der Weg sein den ich nutzen muss. Allerdings die Frage, ob ich mit dem onClick event auch das Bild neu laden kann, ohne die Seite neu zu laden? Und dann entsprechend auch eine weitere ImageMap logischerweise dazu.

Jetzt kommt es wieder darauf an wie viele Bilder es insgesamt gibt.

Wenn es nicht zu viele sind, könntest du das "Startbild" in einen div-Container stecken und diesen mit style="display: block;" sichtbar machen. Das "Detailbild"/die "Detailbilder" blendest du vorerst mit Style="display: none;" noch aus. Beim Klicken änderst du die Sichtbarkeit der Bilder.

Ich hänge mal ein Beispiel dran wie ich es meine.