nicht angemeldet
Variablenübergabe bei <map>-Tag
Hallo
Ich will aus einer Grafik mehrere Links aufrufen. Dafür habe ich mich des <map> Tags bedient. Nun möchte ich das beim anklicken eines Maps die Variable color einen neuen Wert erhält welcher unterhalb der Grafik auf dem Bildschirm ausgeben werden soll. Irgendwie krieg ich das jedoch nicht hin. Kann mir jemand helfen? Hier der Code-Ausschnitt:
<td><img src="img/farbpalette.gif" width="201" height="121" alt="Bitte eine Farbe wählen..." usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="190,20,201,31" href="#" onClick="var color='#efefef'">
</map>
</td>
</tr>
<tr>
<td>gewählte Farbe:
<script type=text/javascript>document.write(color)</script></td>
Danke für eure Tipps!
-
Hallo
Ich will aus einer Grafik mehrere Links aufrufen. Dafür habe ich mich des <map> Tags bedient. Nun möchte ich das beim anklicken eines Maps die Variable color einen neuen Wert erhält welcher unterhalb der Grafik auf dem Bildschirm ausgeben werden soll. Irgendwie krieg ich das jedoch nicht hin. Kann mir jemand helfen? Hier der Code-Ausschnitt:
<td><img src="img/farbpalette.gif" width="201" height="121" alt="Bitte eine Farbe wählen..." usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="190,20,201,31" href="#" onClick="var color='#efefef'">
</map>
</td>
</tr>
<tr>
<td>gewählte Farbe:
<script type=text/javascript>document.write(color)</script></td>Danke für eure Tipps!
Moin Moin !
1. Du baust "onclick" neue Variablen, die vorher noch gar nicht existieren.
2. document.write(color) wird schon vor dem "onclick" ausgeführt, kennt color also gar nicht. (Netscape hätte dich darauf hingewiesen.)Ersetze onclick="var color='#efefef'" durch onclick="setColor('#efefef');return false;" (return false, damit der href-Link nicht aktiv wird)
Schreibe eine Funktion setColor, die die Farbe ausgibt. Wenn Du Text im Dokument ändern willst, klappt das nur mit IE und document.all, ohne das Dokument neu zu laden. Sonst mußt Du die Seite neu laden und ekelige Sachen mit location.search machen.Alexander
-
Hallo Christian,
Schreibe eine Funktion setColor, die die Farbe ausgibt. Wenn Du Text im Dokument ändern willst, klappt das nur mit IE und document.all, ohne das Dokument neu zu laden. Sonst mußt Du die Seite neu laden und ekelige Sachen mit location.search machen.
Alexander
Du kannst aber den Hintergrund einer Tabellenzelle bzw. bei Netscape der Schrift in der Zelle ändern.
Hier mein Spielscript zum Ausprobieren:
<html>
<head>
<title>Tabellen-Spiele</title><script language="JavaScript" type="text/javascript">
<!--
function wxlBgCol(id,farbe)
{
if (document.all)
document.all[id].style.backgroundColor=farbe;
else
if (document.getElementById)
document.getElementById(id).style.backgroundColor=farbe;
else
if (document.layers)
document.layers[id].bgColor=farbe;
}function getText(id)
{
if (document.all)
{
alert(document.all[id].innerText);
if (document.all[id].innerText=='ganz neuer Text')
document.all[id].innerText='noch ein anderer Text';
else
document.all[id].innerText='ganz neuer Text';
}
else
if (document.getElementById)
alert(document.getElementById(id).innerText);
else
if (document.layers)
alert(document.layers[id].innerText);
}
//-->
</script></head>
<body>
<table border="1">
<tr cellpadding="4">
<td id="Zelle1" style="position:relative" bgcolor="white">
Text der Zelle1
</td>
<td id="Zelle2" style="position:relative">
Text der zweiten Zelle
</td>
</tr><tr>
<td id="Zelle3" style="position:relative">
Text der dritten Zelle
</td>
<td id="Zelle4" style="position:relative">
Text der vierten Zelle
</td>
</tr>
</table><form action="" name="Daten" ID="Daten">
<input type="text" name="Feld1" ID="Feld1" style="position:relative;background-color:#FF7777"><br>
<input type="text" name="Feld2" ID="Feld2" style="position:relative"><br>
<input type="text" name="Feld3" ID="Feld3" style="position:relative"><br>
<input type="text" name="Feld4" ID="Feld4" style="position:relative"><br><input type="button" value="Zelle 1" size="10"onClick="getText('Zelle1')">
<input type="button" value="Zelle 2" onClick="getText('Zelle2')">
<input type="button" value="Zelle 3" onClick="getText('Zelle3')">
<input type="button" value="Zelle 4" onClick="getText('Zelle4')">
<br>
<input type="button" value="Farbe 1" onClick="wxlBgCol('Zelle1','#FF0000')">
<input type="button" value="Farbe 2" onClick="wxlBgCol('Zelle1','#00FF00')">
<input type="button" value="Farbe 3" onClick="wxlBgCol('Zelle1','#0000FF')">
<input type="button" value="Farbe 4" onClick="wxlBgCol('Zelle1','#777777')">
<br>
<input type="button" value="dies ist Feld 1" size="10" onClick="wxlBgCol('Feld1','#FF0000')">
<input type="button" value="Feld 2" size="10" onClick="wxlBgCol('Feld1','#00FF00')">
<input type="button" value="Feld 3" onClick="wxlBgCol('Feld1','#0000FF')">
<input type="button" value="Feld 4" onClick="wxlBgCol('Feld1','#777777')"></form>
</body>
</html>Viel Spaß
Tom
-