Rollover Java S*****

FwGEx0dus · 29.01.12, 10:19

hi @ all

möchte gerne sowas wie auf folgender homepage erstellen, hab mich schon dran gemacht blos irgendwie wird das nix... und zwar beim überfahren der bundesländer mit der maus sollten diese sich farbig markieren

wie z.B. hier [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

es wäre super nett wenn mir jemand weiterhelfen könnte. Zur info bin ein anfänger wenns um java s***** und html geht )=

Mr_Braun · 29.01.12, 12:04

Das ganze basiert auf s.g. ImageMaps. Das sind kleine Koordinatenpunkte, welche miteinander verknüpft sind und somit eine anklickbare Area bilden.

Schau dir erst einmal dazu die Grundlagen zu ImageMaps an.
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

Um eine Farbgestaltung bei rüberfahren zu erhalten, musst du dies entweder in CSS (bessere Variante) oder in JavaS***** mit einem Mousover-Effect versehen.

Auf [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ] unter dem Punkt ImageMaps findest du einige Beispiele.

Weitere Anleitung:
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

FwGEx0dus · 06.02.12, 14:50

ok habe jez folgendes versucht zu erstellen mithilfe von paar tutorials aber das mit dem rollover will nicht klappen.. folgender Code

Code:

<html>
<head>
<title>

Deutschlandkarte mit Rollover
</title>

<s***** type ="text/javas*****">
sourceImage = new Image ();

function changeImage (target,image) {
	sourceImage.src = Image;
	document.getElementById(target).src = sourceImage.src;
}

</s*****>
</head>
<body>




<img src="Deutschlandkarte.png" width="443" height="599" border="0"   />

<img style= "z-index:0; position:absolute; top:0px; left:0px;"id= "bundesland" src="bundesland.png" />

<img style= "z-index:1; position:absolute; top:0px; left:0px;"id= "bundesland" src="bundesland.png" usemap="#map" />



<map name="map">

<area shape="poly" coords="160,102,181,104,187,114,191,121,195,125,204,130,206,138,211,138,214,140,219,136,227,141,245,145,256,148,262,145,289,168,279,181,258,176,262,178,261,182,252,188,264,211,265,242,245,249,247,284,207,300,192,299,195,267,162,227,171,209,155,217,136,209,133,220,135,241,107,244,93,208,73,226,65,210,54,194,81,143,76,118,119,102,136,120,168,102,174,101,195,121,190,120" href="niedersachsen.html" onMouseOver="changeImage('bundesland','Niedersachsen.png');" onMouseOut="changeImage ('bundesland','bundesland.png');" />
</map>





</body>



</html>

das ist ne deutschlandkarte auf der das bundesland niedersachen eig. mit nen rollover ne grafik darüber läd aber das geht leider so nicht....

kann mir evtl. jemand weiterhelfen ????

HagenTronje · 07.02.12, 13:21

Ziemlich simpler, aber auch ungenauer Lösungsvorschlag:
Die Karte in den Hintergrund; ein Div mittels padding und margin direkt über das gewünschte Gebiet(is dann aber viereckig! mit mehreren bereichen kann mans dann genauer machen.)Fürs Platzieren würd ich dem Div nen Rahmen geben, und dann wenn es die gewünschte Position hat wegnehmen.
onmouseover=gewünschte Aktion
Wenn sich auf der Karte was ändern soll, machste halt ein zweites Bild, wo das Land umgefärbt ist, und ersetzt den Hintergrund.

HagenTronje · 07.02.12, 13:22

~dp~
sorry
bitte löschen