nicht angemeldet
Landkarte, Regionen bei mouseover einfaerben???
0 0 -1 0 
Gunnar Bittersmann
1
Landkarte, Regionen bei mouseover einfaerben???
Hallo Leute,
ich habe zur Aufgabe eine Stadtkarte mit Regionen der Stadt, also selbes Prinzip, wie eine Landkarte mit regionen. Hier soll jede einzelne Region bei einem Mouseover in Blaue Farbe wechseln.
Ich habe zwar ahnung von HTML, aber weniger von CSS und Java Script. Soweit ich bis jetzt gelesen habe gibt es mit beidem eine Moeglichkeit, aber ich verzweifle langsam, weil hier im Forum immer nur Bruchstuecke des Codes geschrieben werden, und ich nicht weis, was ich wo einfuegen muss.
Das ganze muss mit der area funktion sein, da ich die regionen als bereich definieren will der verlinkbar sein muss, also ich dieses "coords" benoetige.
Einige hatten etwas mit einem div bereich nach dem folgenden schema:
<body>
<div id="stadt_show" style="position:absolute; width:760px; height:717px; z-index:12; left: 0px; top: 0px">
<img src="stadtkarte.gif" width="760" height="717" usemap="#Map" border="0" ></div>
<div id="46005_show" style="position:absolute; width:760px; height:717px; z-index:12; left: 0px; top: 0px visibility:hidden">
<img src="46005.gif" width="760" height="717" usemap="#Map" border="0" ></div>
<map name="Map">
<area onmousedown="Hide('46005_show');" onmouseover="MM_swapImage;statusIn(' [ 1 ] ');Show('46005_show');return true" title="46005" onmouseout="MM_swapImgRestore();statusOut();Hide('46005_show');" shape=poly alt="Russafa" coords="216,300,268,390,292,341,293,300,300,257,216,300,226,317,216,301,218,298,217,299,216,302,216,300,217,300,217,300,217,300" href="#">
</map>
</body>
Aber bei mir klappt das nicht. Ich denke das da irgendwie vorher im Head ein Java Script eingebaut sein muss, oder funktioniert dieses MM_swapImage einfach so?
Kann mir bitte wer helfen?
Es ist ja eigentlich soo einfach, eine Hintergrundgrafik, auf der dann in verschiedenen Layern die anderen Bilder aufgelegt sind und erscheinen sollen wenn mit der maus ueber den Bereich geht.
Bitte postet einen GANZEN code, also was in den head und was in den Body muss!
Danke
-
Hallo Gerry,
Bitte postet einen GANZEN code, also was in den head und was in den Body muss!
Du weisst, dass das Thema "Ich lehn mich zurück und lass die anderen machen" hier gar nicht gerne gesehen ist.
Vielleicht kommen deshalb keine Antworten?
Kalle
-
Moin!
ich habe zur Aufgabe eine Stadtkarte mit Regionen der Stadt, also selbes Prinzip, wie eine Landkarte mit regionen. Hier soll jede einzelne Region bei einem Mouseover in Blaue Farbe wechseln.
Das bedeutet viel Ladezeit, denn bei Imagemaps kannst du nur das komplette Bild austauschen, nicht die Farbe einer einzelnen Region ändern.
Ansonsten aber gilt das, was in SELFHTML unter Javascript/Anwendungsbeispiele für "dynamische grafische Buttons" gesagt wird, genauso auch für Imagemaps. Lediglich die "Aufhänger" onmouseover und onmouseout stehen nicht in einem <a>-Link, sondern im <area>-Element.
Aber bei mir klappt das nicht. Ich denke das da irgendwie vorher im Head ein Java Script eingebaut sein muss, oder funktioniert dieses MM_swapImage einfach so?
Das funktioniert nur, wenn du Dreamweaver benutzt und damit die Seite gebaut hast. Nur dann ist die Funktion auch in der Seite eingebunden und funktioniert.
- Sven Rautenberg
--
My sssignature, my preciousssss!-
DANKE dir, damit kann ich endlich mal was anfangen, ich dachte schon die ganze Zeit, da fehlt doch irgendwas an dem Code, das sieht so aus als ob oben im header ein java acript eingebunden sei.
@ der erste:
Das brauchst du mir nicht sagen, wirklich! Ich verfahre absolut nicht danach macht mal, sondern suche HILFE, weil ich aus den gegeenen Informationen NICHT schlau werde und verzweifle. Spar dir deinen Text lieber!
Moin!
ich habe zur Aufgabe eine Stadtkarte mit Regionen der Stadt, also selbes Prinzip, wie eine Landkarte mit regionen. Hier soll jede einzelne Region bei einem Mouseover in Blaue Farbe wechseln.
Das bedeutet viel Ladezeit, denn bei Imagemaps kannst du nur das komplette Bild austauschen, nicht die Farbe einer einzelnen Region ändern.
Ansonsten aber gilt das, was in SELFHTML unter Javascript/Anwendungsbeispiele für "dynamische grafische Buttons" gesagt wird, genauso auch für Imagemaps. Lediglich die "Aufhänger" onmouseover und onmouseout stehen nicht in einem <a>-Link, sondern im <area>-Element.
Aber bei mir klappt das nicht. Ich denke das da irgendwie vorher im Head ein Java Script eingebaut sein muss, oder funktioniert dieses MM_swapImage einfach so?
Das funktioniert nur, wenn du Dreamweaver benutzt und damit die Seite gebaut hast. Nur dann ist die Funktion auch in der Seite eingebunden und funktioniert.
- Sven Rautenberg
-
Hello out there!
Landkarte mit regionen. Hier soll jede einzelne Region bei einem Mouseover in Blaue Farbe wechseln.
Das bedeutet viel Ladezeit
Mitnichten: http://forum.de.selfhtml.org/archiv/2006/1/t122694/#m789312
See ya up the road,
GunnarPS @Gerry: Bitte kein TOFU.
--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
gruss Sven, hallo Gerry,
es gibt durchaus auch schlanke, tab-navigierbare und
auch ohne css- und JavaScript-unterstuetzung bedienbar
bleibende konzepte.
beschrieben habe ich das schon mal vor einem knappen jahr:
http://forum.de.selfhtml.org/archiv/2005/4/t105405/#m651945der damals auf die schnelle geschriebene testcase hat
irgendwann auch mal eine visuelle aufwertung erfahren.by(t)e by(t)e - peterS. - pseliger@gmx.net
--
"Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
Moin!
der damals auf die schnelle geschriebene testcase hat
irgendwann auch mal eine visuelle aufwertung erfahren.Optisch nett ist es, aber auch du kommst nicht drum herum, jeden einzelnen Highlight-Status als Teil einer großen Grafik realisieren zu müssen.
Das Resultat ist:
Die Grenzlinien im Transparenten GIF sind 3,8 KB groß, die große Kartenversion 38 KB - und die Karte hat noch den Vorteil, relativ große einfarbige Flächen und insgesamt nur drei Farben zu benötigen, deshalb fallen die knapp 1200*2000 Pixel nicht so ins Gewicht. Andere Karten - andere (ggf. wesentlich größere) Grafikgrößen.- Sven Rautenberg
--
My sssignature, my preciousssss!-
hallo again Sven,
Optisch nett ist es, aber auch du kommst nicht drum herum, jeden
einzelnen Highlight-Status als Teil einer großen Grafik realisieren zu
müssen.richtig ...
Das Resultat ist:
Die Grenzlinien im Transparenten GIF sind 3,8 KB groß, die große
Kartenversion 38 KB ... Andere Karten - andere (ggf. wesentlich
größere) Grafikgrößen..., und doch bringt gerade die beschraenkung auf genau zwei
grafiken (image und css-background) mehr als nur einen vorteil
mit sich. die bilder laden JavaScript-unabhaengig, denn sie sind
ueber html- und css-code fest verdrahtet. ist css ebenfalls
deaktiviert, bleibt zum navigieren immer noch das grenzlinien-
bild. diese maske nimmt zudem alle redundanten bilddaten auf,
sodass die mouseover-stati des grossen hintergrundbildes in
den meisten faellen mit zwei farben zu realisieren sind.
nicht zu vergessen, das hintergrundbild laedt trotz seiner groesse
schneller als die in diesem bsp. sonst notwendigen 17 einzelbilder;
hier werden einfach 16 unnoetige server-requests vermieden.by(t)e by(t)e - peterS. - pseliger@gmx.net
--
"Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
-
-
-