Auflösung eines Bildes innerhalb des Browser erkennen

takidoso

Erfahrenes Mitglied
Bin recht neu im Thema HTML etc.
Ich habe da das Bedürfnis Bilder mit Click-Funktionalität auszustatten, wobei es je nachdem wo der User klickt eine andere Funktion angesprochen werden soll. Diese Bilder sind welche die ein User selbst hoch lädt.
Ds ganze funktioniert schon fast gut, ich habe es mit Image-Maps gelöst (außerdem verwende ich JSP)
Nun aber das Problem: Ich möchte das Bild in die verschiedenen Zonen einteilen und bestimme daher z.Z. server-dynamisch die linke bzw die rechte Hälfte des Bildes. Leider geht dies nicht immer, da bei der Darstellung des Bildes nicht klar ist welche Größe es auf dem Bildschirm hat. Ich brrauche also einen Umrechnungsfaktor der sowohl bei kleineren Bildern als auch bei größeren Bildern funkioniert.

hier der html-code der von meinem jsp ereugt wird:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<h1>Benutzerdaten ändern</h1>
	<br>user 'JarJar' updates his/her data</br>
	<form
  	action="/CMKRisikoWeb/LoginOrRegister"
  	method="post"
	>
		<fieldset>
          <table>
          <tr>
              <td>
                   <label>Benutzer:</label></td>
              <td> 
                  JarJar</td>
              <td style="width: 60%">
                 <img src="user-images/JarJar_HB02.jpg" alt="Bild" usemap="#func_map" style="width: 60%" >
                 <map name="func_map">
                    <area shape="rect" coords=0,0,150,500
                          href="http://www.google.de/" alt="Links" title="Google">
                 <area shape="rect" coords=151,0,300,500
                          href="http://dict.leo.org/" alt="Rechts" title="Leo">
                 </map>
              </td>
            </tr>
		    <tr>
		      <td><label for="email">Email:</label></td>
		      <td><input
		        id="email"
		        type="text"
		        size="20"
		        maxlength="100"
		        name="email"
		        value="jarjar@bings.de"
		        title="wird benötigt wenn Passwort in Vergessenheit geraten sein sollte."
		      ></td>
		    </tr>
		  
		    <tr>
		      <td><label for="password">altes Passwort:</label></td>
		      <td><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="Pflichtfeld"
		      ></td>
		    </tr>
		  
		    <tr>
		      <td style="width: 20%; "><label for="*password">neues Passwort 1:</label></td>
		      <td style="width: 20%; "><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="nur bei Passwortänderung Pflichtfeld"
		      ></td>
		    </tr>
		  
		    <tr>
		      <td style="width: 20%; "><label for="*password">neues Passwort 2:</label></td>
		      <td style="width: 20%; "><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="nur bei Passwortänderung Pflichtfeld"
		      ></td>
		    </tr>
		  </table>
		  
		  <input
		    id="update-button"
		    name="update.submit.button"
		    type="submit"
		    value="&Auml;ndern"
		    class="submit"
		    title="zum abändern der Benutzerdaten"
		  /> 
		  <input
		    id="cancel-button"
		    name="cancel.submit.button"
		    type="submit"
		    value="Abbrechen"
		    class="submit"
		    title="zurück zur Hauptseite"
		  />
		</fieldset>
	</form>
</html>


Wenn die Bilder größer sind als die Fläche, die ihnen innehalb der html-seite ihnen zur Verfügung gestellt wird, funktioniert es tadel los. Sind Sie kleiner, bedeutet es eine Vergrößerung und die 60%, die ich für die linke udn rechte Hälfte im JSP für die "areas" in der Image-Map berechne wirkt verkleinernd.
Ich vermute ich muss das gane irgendwie clientseitig für die Image-Map veranstalten, aber wie?

Gibt es dafür ein Java-Script-rezept?

Zur Vollständigkeit hier die JSP-Seite:
Code:
<%@page import="java.io.File"%>
<%@page import="javax.swing.ImageIcon"%>
<jsp:useBean
  id="user"
  class="de.cmk.web.bean.User"
  scope="session"
/>
<jsp:setProperty
  name="user"
  property="*"
/>

<%
ImageIcon ic              = new ImageIcon(getServletContext().getRealPath("/user-images")+"/"+user.getImageName());
int       imageLeftStart  = 0;
int       imageLeftEnd    = ic.getIconWidth()/2 *60/100;
int       imageRightStart = imageLeftEnd+1;
int       imageRightEnd   = ic.getIconWidth() *60/100;


%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<h1>Benutzerdaten ändern</h1>
	<br><%=request.getParameter("msg")%></br>
	<form
  	action="<%=response.encodeURL(request.getContextPath()+"/LoginOrRegister")%>"
  	method="post"
	>
		<fieldset>
          <table>
          <tr>
              <td>
                   <label>Benutzer:</label></td>
              <td> 
                  <%=user.getName()%></td>
              <td style="width: 60%">
                 <%="<img src=\"user-images/" + user.getImageName() + "\" alt=\"Bild\" usemap=\"#func_map\" style=\"width: 60%\" >"%>
                 <map name="func_map">
                    <area shape="rect" coords=<%=imageLeftStart+",0,"+imageLeftEnd+","+ic.getIconHeight()%>
                          href="http://www.google.de/" alt="Links" title="Google">
                 <area shape="rect" coords=<%=imageRightStart+",0,"+imageRightEnd+","+ic.getIconHeight()%>
                          href="http://dict.leo.org/" alt="Rechts" title="Leo">
                 </map>
              </td>
            </tr>
		    <tr>
		      <td><label for="email">Email:</label></td>
		      <td><input
		        id="email"
		        type="text"
		        size="20"
		        maxlength="100"
		        name="email"
		        value="<%=user.getMailAddr()%>"
		        title="wird benötigt wenn Passwort in Vergessenheit geraten sein sollte."
		      ></td>
		    </tr>
		  
		    <tr>
		      <td><label for="password">altes Passwort:</label></td>
		      <td><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="Pflichtfeld"
		      ></td>
		    </tr>
		  
		    <tr>
		      <td style="width: 20%; "><label for="*password">neues Passwort 1:</label></td>
		      <td style="width: 20%; "><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="nur bei Passwortänderung Pflichtfeld"
		      ></td>
		    </tr>
		  
		    <tr>
		      <td style="width: 20%; "><label for="*password">neues Passwort 2:</label></td>
		      <td style="width: 20%; "><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="nur bei Passwortänderung Pflichtfeld"
		      ></td>
		    </tr>
		  </table>
		  
		  <input
		    id="update-button"
		    name="update.submit.button"
		    type="submit"
		    value="&Auml;ndern"
		    class="submit"
		    title="zum abändern der Benutzerdaten"
		  /> 
		  <input
		    id="cancel-button"
		    name="cancel.submit.button"
		    type="submit"
		    value="Abbrechen"
		    class="submit"
		    title="zurück zur Hauptseite"
		  />
		</fieldset>
	</form>
</html>
 

Anhänge

  • screnshot_gross_links.jpg
    screnshot_gross_links.jpg
    14,7 KB · Aufrufe: 11
  • screnshot_gross_rechts.jpg
    screnshot_gross_rechts.jpg
    15,7 KB · Aufrufe: 9
  • screnshot_klein_rechts.jpg
    screnshot_klein_rechts.jpg
    13 KB · Aufrufe: 10

takidoso

Erfahrenes Mitglied
oops hier nochmal zur verdeutlichung bessere Screenshots in einem zip
 

Anhänge

  • screenshots.zip
    478,7 KB · Aufrufe: 5

tombe

Erfahrenes Mitglied
Ich kann dein Beispiel zwar nicht direkt nachstellen aber vielleicht hilft dir das hier trotzdem weiter.

Javascript:
<script language="javascript" type="text/javascript">
function create_map(){
	breite = document.getElementById("image").offsetWidth;
	hoehe = document.getElementById("image").offsetHeight;

	document.getElementById("links").coords = "0, 0, " + (breite / 2) + ", " + hoehe;
	document.getElementById("rechts").coords = ((breite / 2) + 1) + ", 0 " + breite + ", " + hoehe;
}

function change_image (bild){
	document.getElementById("image").src = "bild" + bild + ".jpg";
	create_map();
}
</script>

HTML:
<body onload="create_map()">
<img usemap="#imgmap" id="image" src="bild1.jpg" />
<map name="imgmap">
	<area id="links" shape="rect" coords="0, 0, 0, 0" href="http://www.google.de" alt="links" title="Links" />
	<area id="rechts" shape="rect" coords="0, 0, 0, 0" href="http://www.tutorials.de" alt="rechts" title="Rechts" />
</map>
<div onclick="change_image(1)">Bild 1</div>
<div onclick="change_image(2)">Bild 2</div>
</body>

Die Funktion "create_map" ermittelt mit Hilfe von offsetWidth/offsetHeight die jeweils aktuellen Werte des geladenen Bildes und berechnet dann die Koordinaten der Map neu.

Die Funktion "change_image" habe ich bei mir nur dazu genützt um mit verschiedenen Bildgrößen zu testen!
 

takidoso

Erfahrenes Mitglied
Hi tombe,
Leider scheine ich irgendwas falsch zu machen und ich komme einfach nicht dahinter.
Ich sehe das Bild aber bekomme nun keinerlei Link oder ähnliches. Die Image-Map scheint nicht zu funktionieren und ich bekomme auch keinerlei Fehlerhinwiswe. Vielleicht sehen Deine erfahrenen HTML/Javascript Adleaugen woran es liegen könnte.
hier de von dem JSP ausgespuckte Code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<script
  language="javascript"
  type="text/javascript"
>
	function create_map() 
	{
		breite = document.getElementById("image").offsetWidth;
		hoehe = document.getElementById("image").offsetHeight;

		document.getElementById("links").coords = "0, 0, " + (breite / 2)
				+ ", " + hoehe;
		document.getElementById("rechts").coords = ((breite / 2) + 1) + ", 0 "
				+ breite + ", " + hoehe;
	}

	function change_image(bild) 
	{
		document.getElementById("image").src = "bild" + bild + ".jpg";
		create_map();
	}
</script>

<body onload="create_map()">
	<h1>Benutzerdaten ändern</h1>
	<br>user 'hugo' updates his/her data</br>
	<form
  	action="/CMKRisikoWeb/LoginOrRegister"
  	method="post"
	>
		<fieldset>
          <table>
          <tr>
              <td>
                   <label>Benutzer:</label></td>
              <td> 
                  hugo</td>
              <td style="width: 60%">
                 <img src="user-images/hugo_ava.gif" alt="Bild" usemap="#func_map" style="width: 60%" >
                 <map name="func_map">
                    <area id="links" shape="rect" coords="0, 0, 0, 0"
                          href="http://www.google.de/" alt="links" title="Google">
                    <area id="rechts" shape="rect" coords="0, 0, 0, 0"
                          href="http://dict.leo.org/" alt="rechts" title="Leo">
                 </map>
              </td>
            </tr>
		    <tr>
		      <td><label for="email">Email:</label></td>
		      <td><input
		        id="email"
		        type="text"
		        size="20"
		        maxlength="100"
		        name="email"
		        value="hugo@hugo.de"
		        title="wird benötigt wenn Passwort in Vergessenheit geraten sein sollte."
		      ></td>
		    </tr>
		  
		    <tr>
		      <td><label for="password">altes Passwort:</label></td>
		      <td><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="Pflichtfeld"
		      ></td>
		    </tr>
		  
		    <tr>
		      <td style="width: 20%; "><label for="*password">neues Passwort 1:</label></td>
		      <td style="width: 20%; "><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="nur bei Passwortänderung Pflichtfeld"
		      ></td>
		    </tr>
		  
		    <tr>
		      <td style="width: 20%; "><label for="*password">neues Passwort 2:</label></td>
		      <td style="width: 20%; "><input
		        id="password"
		        type="password"
		        size="20"
		        maxlength="100"
		        name="password"
		        title="nur bei Passwortänderung Pflichtfeld"
		      ></td>
		    </tr>
		  </table>
		  
		  <input
		    id="update-button"
		    name="update.submit.button"
		    type="submit"
		    value="&Auml;ndern"
		    class="submit"
		    title="zum abändern der Benutzerdaten"
		  /> 
		  <input
		    id="cancel-button"
		    name="cancel.submit.button"
		    type="submit"
		    value="Abbrechen"
		    class="submit"
		    title="zurück zur Hauptseite"
		  />
		</fieldset>
	</form>
    </body>
</html>

Gibt es irgendwie eine Möglichkeit HTML und Javascript gescheit zu debuggen?

Mit besten Dank im Voraus für Deine Hilfe

Takidoso
 

takidoso

Erfahrenes Mitglied
Ahh nun weiß ich warum :-D
habe nicht bemerkt dass die ID in dem Tag <img ... bei mir noch hineingehört
also:
HTML:
...
          <tr>
              <td>
                   <label>Benutzer:</label></td>
              <td> 
                  JarJar</td>
              <td style="width: 60%">
                 <img id=image src="user-images/JarJar_HB02.jpg" alt="Bild" usemap="#func_map" style="width: 60%" >
                 <map name="func_map">
                    <area id="links" shape="rect" coords="0, 0, 0, 0"
                          href="http://www.google.de/" alt="links" title="Google">
                    <area id="rechts" shape="rect" coords="0, 0, 0, 0"
                          href="http://dict.leo.org/" alt="rechts" title="Leo">
                 </map>
              </td>
            </tr>
...

Es hat sich also die erste Frage damit erledigt, es funktioniert nun :-D

Aber auf welche Weise man dann gescheit debuggen kann ist mi rdann noch nich tklar, kannst Du da Hinweise u liefern (sorry bin auf dem Gebiet gnadenlos Anfänger)
 

tombe

Erfahrenes Mitglied
Also was eigentlich recht hilfreich ist, ist Firebug in Verbindung mit Firefox.

Damit kannst du dir Haltepunkte innerhalb des Skripts setzten und den Code dann Zeile für Zeile ausführen.