Tabelle, Grafik, Addieren ...

Martin Spörri

Grünschnabel
Hallo, ist mein erster Post, so gegrüsst seit ihr alle :-)

Ich bin mit meinem Latein am Ende... habe eine Karte die beim draufklikken 6 verschiedene Zahlen soll zusammenrechnen.

Ich mal den link hin, bin schlecht im erklären :-)

http://www.briefkastenwerbung.ch/Aargau/Bezirk_Baden.php

Der Balken sollte bis hinten gelb sein und dann die Schrift natürlich Schwarz.

Das Ziel ist es eigentlich ein "Offertformular" zu erstellen wo der Kunde anstatt einer Checkbox auf die Grafik klicken kann.

Also besten Dank zum Voraus für eure Hilfe.

Hab noch was vergessen, also es funktionieren erst die ersten 3 Baden, Wettingen und Spreitenbach. Wenn man unten klickt sollte oben ebenfalls die Grafik oben aufleuchten.

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>BriefkastenWerbung.ch</title>
<link href="http://www.briefkastenwerbung.ch/lacss.css" rel="stylesheet" type="text/css">
		<script language="JavaScript" type="text/JavaScript">
	<!--
function menuon(mpoint, mcolor) {
	document.getElementById(mpoint).style.backgroundColor="#"+mcolor;
}
function menuoff(mpoint, mcolor) {
	    document.getElementById(mpoint).style.backgroundColor="#"+mcolor;
}
function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}
function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}
var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		Bezirk_Baden_01_ImageMap_03_over = newImage("images_Baden/Bezirk_Baden_01-ImageMap_03.gif");
		Bezirk_Baden_01_ImageMap_02_over = newImage("images_Baden/Bezirk_Baden_01-ImageMap_02.gif");
		Bezirk_Baden_01_ImageMap_01_over = newImage("images_Baden/Bezirk_Baden_01-ImageMap_01.gif");
		preloadFlag = true;
	}
}
//-->
</script>   

</head>
<body bgcolor="#000000" onload="preloadImages();">
<div id="main">
<?php include '../menureg.php'; ?>
<tr>
  <td height="25" class="mytd" id="back" onMouseOver="menuon('back', 'FFCC33')" onMouseOut="menuoff('back', 'FFFF22')" onClick="window.location.href='http://www.briefkastenwerbung.ch/Aargau/Kt_Aargau.php'">zur&uuml;ck</td>
</tr>	
</table>
<div align="center">
<img name="Bezirk_Baden_01" src="Bezirk_Baden.gif" width="402" height="468" border="0" alt="" usemap="#Bezirk_Baden_01_Map">
<map name="Bezirk_Baden_01_Map">
<area shape="poly" alt="Gemeinde Wettingen" coords="184,197, 172,238, 220,256, 248,218, 278,200, 277,176" href="Gemeinde_Wettingen.php"  alt="Zeile 1"
	onmouseover="swap('Zeile1',1); changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_03.gif'); return true;"
	onmouseout="swap('Zeile1',2); changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01.gif'); return true;"
	onmousedown="changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_03.gif'); return true;"
	onmouseup="changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_03.gif'); return true;" >
	
<area shape="poly" alt="Gemeinde Spreitenbach" coords="230,336, 262,289, 287,299, 313,319, 294,366, 263,366" href="Gemeinde_Spreitenbach.php" alt="Zeile 2"
	onmouseover="swap('Zeile2',1); changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_02.gif'); return true;"
	onmouseout="swap('Zeile2',2); changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01.gif'); return true;"
	onmousedown="changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_02.gif'); return true;"
	onmouseup="changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_02.gif'); return true;">
<area shape="poly" alt="Gemeinde Baden" coords="102,176, 111,233, 167,238, 180,201, 170,176" href="Gemeinde_Baden.php" alt="Zeile 3"
	onmouseover="swap('Zeile3',1); changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_01.gif'); return true;"
	onmouseout="swap('Zeile3',2); changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01.gif'); return true;"
	onmousedown="changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_01.gif'); return true;"
	onmouseup="changeImages('Bezirk_Baden_01', 'images_Baden/Bezirk_Baden_01-ImageMap_01.gif'); return true;">
</map>

</div>  

<head> 
<script type="text/javaScript"> 
function swap(id,x){ 
    if(x==1) 
        //#FF0033red = Farbe bei Mouseover 
        document.getElementById(id).style.backgroundColor = 'yellow';   
    if(x==2) 
        document.getElementById(id).style.backgroundColor = 'black';    
} 
</script> 
</head> 
<body> 
<td rowspan="1"> 
<table class="style2">   <TD style="vertical-align:top; width:126px">
     <tr>
    <td><div style="height:2em; text-align:left; width:130px;"><strong>Bezirk Baden </div></td>
    <td><div style="height:2em; text-align:right; width:100px;"><font color='#00FF00'>Alle Briefk&auml;sten</font color='#00FF00'></div></td>
     <td><div style="height:2em; text-align:right; width:50px;">DIN A6</div></td>
      <td><div style="height:2em; text-align:right; width:50px;">DIN A5</div></td>
       <td><div style="height:2em; text-align:right; width:50px;">DIN A4/2</div></td>
   <td><div style="height:2em; text-align:right; width:80px;"><font color='#FF0000'>Stop Werbung</font color='#FF0000'></div></td>
 <td><div style="height:2em; text-align:right; width:50px;">DIN A6</div></td>
  <td><div style="height:2em; text-align:right; width:50px;">DIN A5</div></td>
   <td><div style="height:2em; text-align:right; width:50px;">DIN A4/2</div></td>
  </tr> 
   <tr>
    <td><div style="height:2em; text-align:left; width:130px;"><strong>Gemeinde</div></td>
    <td><div style="height:2em; text-align:right; width:100px;"><font color='#00FF00'>(Stk.)</font color='#00FF00'></div></td>
     <td><div style="height:2em; text-align:right; width:50px;">(SFr.-)</div></td>
      <td><div style="height:2em; text-align:right; width:50px;">(SFr.-)</div></td>
       <td><div style="height:2em; text-align:right; width:50px;">(SFr.-)</div></td>
   <td><div style="height:2em; text-align:right; width:80px;"><font color='#FF0000'>(Stk.)</font color='#FF0000'></div></td>
 <td><div style="height:2em; text-align:right; width:50px;">(SFr.-)</div></td>
  <td><div style="height:2em; text-align:right; width:50px;">(SFr.-)</div></td>
   <td><div style="height:2em; text-align:right; width:50px;">(SFr.-)</div></td>
  </tr>
  <tr>
    <td id="Zeile1">5430 Wettingen </td>
    <td id="Zeile1"><div align="right"><font color='#00FF00'>10000</font color='#00FF00'></td>
     <td id="Zeile1"><div align="right">750.00</td>
      <td id="Zeile1"><div align="right">800.00</td>
       <td id="Zeile1"><div align="right">850.00</td>
    <td><div align="right"><font color='#FF0000'>3700</font color='#FF0000'></td>
   <td><div align="right">388.50</td>
      <td><div align="right">400.70</td>
       <td><div align="right">425.50</td>
  </tr>
  <tr>
    <td id="Zeile3">5400 Baden</td>
    <td><div align="right"><font color='#00FF00'>7000</font color='#00FF00'></td>
     <td><div align="right">525.00</td>
      <td><div align="right">560.00</td>
       <td><div align="right">595.00</td>
    <td><div align="right"><font color='#FF0000'>2000</font color='#FF0000'></td>
     <td><div align="right">210.00</td>
      <td><div align="right">220.00</td>
       <td><div align="right">230.00</td>
  </tr>
  <tr>
    <td id="Zeile2">8957 Spreitenbach</td>
    <td><div align="right"><font color='#00FF00'>5100</font color='#00FF00'></td>
     <td><div align="right">382.50</td>
      <td><div align="right">408.00</td>
       <td><div align="right">433.50</td>
    <td><div align="right"><font color='#FF0000'>3300</font color='#FF0000'></td> 
     <td><div align="right">346.50</td>
      <td><div align="right">363.00</td>
       <td><div align="right">379.50</td>
  </tr>
 
Zuletzt bearbeitet von einem Moderator:
Mit der Auszeichnungssprache HTML hat dein Problem wenig zu tun - vielmehr ist hier Javascript gefragt.

Von daher hab ich das Moderatorenteam gebeten, das Thema zu verschieben.

Den Hilfeleistenden wäre es entgegenkommend, Quellcode in Highlight-Tags einzubetten, hier in diesem Fall in [code=html] ... [/code].

Naja, und im Minutentakt braucht es auch keine neuen Beiträge reinzustellen, dafür gibt's unterhalb den Button "Bearbeiten", um Ergänzungen nachzureichen.
 
Zuletzt bearbeitet:
Dachte ich mir doch, habe mir gleich ein Grafiti vorgestellt, das nennt man ja auch Tag. :-))) (Etikette)

English bedeutet halt viel. Lg und einen schönen Sonntag :-)
 

Neue Beiträge

Zurück