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:
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:
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="Ä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="Ä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>