Hi!
Ich bin schon eine Weile aus der HTML- und CSS-Programmierung raus und fand das Thema Imagemap auch damals schon relativ müßig. Jetzt scheint es so als müsse ich für ein kleines Privatprojekt doch auf ein Imagemap zugreifen. Meine Grundidee ist: Ich möchte eine Karte online stellen, deren einzelne Länder und Regionen per Mouseover mit einem Rand versehen werden (noch schöner wäre es wenn die Karte etwas ausgegraut wäre und beim Mouseover der ausgewählte Teil in satter Farbe dargestellt würde, aber das ist ja nur ein leicht änderbares Detail).
Das Problem ist, dass die Karte in einer ziemlich hohen Auflösung daher kommt (über 3000x3000 Pixel). In der derzeitigen Version habe ich bisher nur einen hover-baren Bereich eingestellt, um das Konstrukt zu testen und musste feststellen, dass beim Drübergleiten mit der Maus die Anzeigeseite des Browsers für gut eine Sekunde völlig weiß wird, das Bild dann neu lädt, wobei die Auflösung total grobkörnig ist, und ich dann nach 2-2,5 Sekunden erst das richtige Bild mit dem Farbeffekt bekomme. Das ist natürlich unschön. Derzeit vermute ich, dass das einfach an der Dateigröße liegt (sowohl das Ursprungsbild als auch das Hover-Bild haben je ca. 6 MB) und dass der Browser Probleme mit dem Nachladen hat.
Meine Fragen daher:
1.) Hat es wirklich etwas mit den Auflösungen bzw. Dateigrößen zu tun oder liegt es an der Technik (Quellcode füge ich hinzu)?
2.) Gibt es vielleicht eine ressourcen-schonendere Methode, als für jede ausgewählte Region die fast identische Datei hochzuladen? Kann man vielleicht nur den ausgewählten Bereich einer Grafik ändern?
3.) Kann man das generell irgendwie anders lösen?
test.html:
map.php:
Hier habe ich das Projekt mal (beispielhaft, da ich die Original-Daten noch nicht veröffentlichen darf) hochgeladen. Bei mir "spinnt" der Browser hier auch schon rum: http://www.dark-spirits.de/userdata/Loki/test/test.html
Über Antworten freue ich mich!
LG
apehead
Ich bin schon eine Weile aus der HTML- und CSS-Programmierung raus und fand das Thema Imagemap auch damals schon relativ müßig. Jetzt scheint es so als müsse ich für ein kleines Privatprojekt doch auf ein Imagemap zugreifen. Meine Grundidee ist: Ich möchte eine Karte online stellen, deren einzelne Länder und Regionen per Mouseover mit einem Rand versehen werden (noch schöner wäre es wenn die Karte etwas ausgegraut wäre und beim Mouseover der ausgewählte Teil in satter Farbe dargestellt würde, aber das ist ja nur ein leicht änderbares Detail).
Das Problem ist, dass die Karte in einer ziemlich hohen Auflösung daher kommt (über 3000x3000 Pixel). In der derzeitigen Version habe ich bisher nur einen hover-baren Bereich eingestellt, um das Konstrukt zu testen und musste feststellen, dass beim Drübergleiten mit der Maus die Anzeigeseite des Browsers für gut eine Sekunde völlig weiß wird, das Bild dann neu lädt, wobei die Auflösung total grobkörnig ist, und ich dann nach 2-2,5 Sekunden erst das richtige Bild mit dem Farbeffekt bekomme. Das ist natürlich unschön. Derzeit vermute ich, dass das einfach an der Dateigröße liegt (sowohl das Ursprungsbild als auch das Hover-Bild haben je ca. 6 MB) und dass der Browser Probleme mit dem Nachladen hat.
Meine Fragen daher:
1.) Hat es wirklich etwas mit den Auflösungen bzw. Dateigrößen zu tun oder liegt es an der Technik (Quellcode füge ich hinzu)?
2.) Gibt es vielleicht eine ressourcen-schonendere Methode, als für jede ausgewählte Region die fast identische Datei hochzuladen? Kann man vielleicht nur den ausgewählten Bereich einer Grafik ändern?
3.) Kann man das generell irgendwie anders lösen?
test.html:
HTML:
<html>
<head>
<title>Lichttest</title>
<script type="text/javascript">
function ReplaceImage(filename)
{
document.getElementById("imagemap").src = filename;
}
</script>
</head>
<body>
<img src="audi.jpg" usemap="#start" id="imagemap" />
<map name="start">
<area shape="poly" coords="956,1361,1133,1353,1227,1330,1404,1320,1451,1317,1486,1390,1398,1452,1277,1464,1152,1458,1034,1449,881,1447" href="map.php?licht=audi" onmouseover="ReplaceImage('audi1.jpg')" onmouseout="ReplaceImage('audi.jpg')" />
</map>
</html>map.php:
PHP:
<html>
<head><title>
<?php
echo $_GET['region'];
?>
</title></head>
<body>
<?php
echo "Sie haben ", $_GET['licht'], " gewählt!";
?>
</body>
</html>Hier habe ich das Projekt mal (beispielhaft, da ich die Original-Daten noch nicht veröffentlichen darf) hochgeladen. Bei mir "spinnt" der Browser hier auch schon rum: http://www.dark-spirits.de/userdata/Loki/test/test.html
Über Antworten freue ich mich!
LG
apehead
