ImageMap mit wechselnden Bildern

F98

Hallo Leute!

Ich habe vor auf einer Webseite eine große Landkarte zu hinterlegen (Image-Map). Wenn ich über bestimmte Bereiche (AREAS) der Landkarte fahre sollen diese rot umrandet dargestellt werden. Bildwechselfunktionen mit onMouseOver und onMouseOut habe ich auch schon implementiert. Das Problem dabei ist, das die Landkarte sehr groß ist und sich ca. 10 AREAS darauf befinden, d.h. unterm Strich müßten 11 x 300 kB runtergeladen werden um bei allen Punkten einen Bildwechsel durchzuführen. Meine Frage ist nun, wie kann man diesen Aufwand minimieren? Ich stelle mir vor, dass ich wenn ich mit der Maus über eine Area fahre immer nur ein kleines transparentes GIF drüberschiebe (roter Kreis) oder nur den Area-Ausschnitt überblende und nicht das gesamte riesen Bild austauche.

F98

mrchat

noch einfacher: versuch doch, bei mouseover ein CSS - Viereck mit reotem rand drüberzumalen.

Ob das geht weiß ich net genau, aber ich denke schon..

oder eine transparente tabelle mit rahmen....

cya

F98

Hm. Klingt Gut.

Bloß wie soll die Funktion dann aussehen? Wie soll ich dieses Viereck malen? So gut kenne ich mich mit JS leider nicht aus.

flenders

Optisch denke ich wäre es sicher am schönsten, wenn du z.B. ein DIV mit der Karte als background machst und innen rein ein transparentes gif mit imagemap, das du entspechend bei onmouseover (oder falls irgendwie mögl. mit CSS) wechselst - die einzelnen gifs sind dann auch net so besonders groß, da sie ja fast leer sind

F98

Ok. Prinzipiell siehts jetzt bei mir so aus (habe ein Table als Hintergrund):

<html>

<head>
<title>Test</title>
</head>

<body>
<script language="JavaScript">
<!--
	function Go(x)
	{
 		window.open(x, '', 'toolbar=no,menubar=no,location=no,scrollbars=yes,resizeable=yes');
 	}

 	bildover = new Image();
  	bildover.src = "./pic/kreis.gif";
  	bildout = new Image();
  	bildout.src = "./pic/leer.gif";

  	function Bildwechsel(Bildnr,Bildobjekt)
  	{
    	window.document.images[Bildnr].src = Bildobjekt.src;
  	}
-->
</script>
<table border="0" width="800" background="./pic/karte_o_gross.jpg">
  <tr>
    <td width="800" height="800">
      <IMG src="./pic/leer.gif" usemap="#mapregion" alt="TestMap">
	   <MAP name="mapregion">
		 <AREA onClick="Go('testseite.php?id=1')" onMouseOver="Bildwechsel(0, bildover)" onMouseOut="Bildwechsel(0, bildout)" alt="TestArea" shape="circle" coords="10,10,30" target="_blank">
		 <AREA onClick="Go('testseite.php?id=2')" onMouseOver="Bildwechsel(0, bildover)" onMouseOut="Bildwechsel(0, bildout)" alt="TestArea2" shape="circle" coords="100,100,30" target="_blank">
	   </MAP>
    </td>
  </tr>
</table>

</body>

</html>

flenders

funktioniert nur mit JS -> unbedingt noch ein href einbauen für die, die es nicht (aktiviert) haben

F98

Das Problem dabei ist aber, wenn ich dann auf den Link klicke werden 2 fenster geöffnet. Einmal das mit HREF und dann das mit onClick

flenders

im onclick einfach hinten ein return 0; dranhängen

F98

So ungefähr?

<AREA href="testseite.php?id=1" onClick="Go('testseite.php?id=1'); return 0;" onMouseOver="Bildwechsel(0, bildover)" onMouseOut="Bildwechsel(0, bildout)" alt="TestArea" shape="circle" coords="10,10,30">

Funktioniert aber nicht ...

flenders

Hatte mich vertan! Es muss return false; heißen

F98

Läuft einwandfrei!!!