Mouseover auf Karte

[Floffy]

Hallo Leute,

Wir machen heuer von der Schule aus ein Projekt, und zwar ein Browsergame.
Ich hätte ne Frage und zwar ..
Wir haben eine Karte, um genauzusein ein zweidimensionales Array, auf der jedes Feld einzeln als Bild dargestellt wird. Pro Feld ist entweder eine Stadt oder eben keine. Ich hätte gerne wenn ich mit der Maus über eine Stadt fahre dass mir ein kleines Fenster angezeigt wird mit Besitzer, Punkte usw.
Ich weis nicht ob ich hier im Javascriptforum damit richtig bin, aber falls ihr eine Idee habt wie des funktionieren könnte wär ich euch sehr dankbar!

Grüße Florian

 

[Hansii1234]

Hi hi!

Da hättest du mehrere Varianten... z.B. mit Ajax! Wobei ich dir davon abraten würde, da ich denke, dass dieses mit dem Nachladen zu langsam ist.
Aber du kannst schon gleich am Anfang beim Laden der Seite, dir für jedes Feld einen DIV-Container anlagen, der von vornherein unsichtbar ist und erst sichtbar wird, wenn du mit der Maus über sein Feld fährst!

Div-Container kannst du so unsichtbar machen:

<div id="containername" style="display:none;">Text- bzw. HTML-Inhalt</div>

Mit Javascript könntest du ihn so wieder sichtbar machen!

get.ElementById['containername'].style.display='block';

Gruß!

Und so natürlich wieder unsichtbar...

get.ElementById['containername'].style.display='none';

 

[Floffy]

ah ok, danke .. aber wie stell ich fest ob die maus drüber ist? hab noch nie was mit javascript gemacht

 

[Hansii1234]

Was du suchst, wird Event-Handler genannt!

Kannst du hier nachlesen!
Was du suchst, nennt sich "onmouseover".

Gruß!

 

[Floffy]

jap danke, soweit hab ich das schon, programmiern in der schule java und da funktioniert dass mit den events ähnlich.

ich bin nur noch am probiern wie ich das mit dem div mache, dass ich das über den bereich vom bild leg .. wenn ich das bild ins div rein geb funtkioniert dass ja auch wieder nicht weil ichs unsichtbar mach *g*
und wie ich generell javascript einbau .. aber ich denk dass is nur spielerei

 

[FipsTheThief]

Naja da wirst ein paar Problemchen bekommen mit der Spielerei.

den Div plazierst über CSS ganz normal.

Display none kannst vergessen dann geht der Eventhandler nicht mehr. Egal welcher Browser.

background-color:transparent; -> was der IE nicht sieht ist auch nicht da so waren zumindest mal meine Erfahrungen damit. Event auf ne Box gelegt , die Transparent gezaubert der IE hats partou nicht akzeptiert das da was ist.

This, naturally enough, caused some wailing and gnashing of teeth. It turns out that the problem stems stemmed from a bug in how IE7 handles JavaScript mouse events (click, mousedown, mouseup, etc.) on transparent/invisible objects. On a blank page, objects with a CSS ‘background-color’ property set to ‘transparent’ or not set at all will not be able to receive mouse events

Da kann man es auch nochmal nachlesen.

http://blog.thinkature.com/index.ph...ransparent-objects-under-internet-explorer-7/

Theoretisch ist es einfach , aber in der Praxis lauert der Internet Explorer

 

[Hansii1234]

Hi FipsTheThief!

Natürlich meinte ich es nicht so, dass er den Div-Container (sofern da überhaupt sowas genommen wurde) der Karte, sonder den des Infofeldes auf display:none setzten soll.
Dann unter Javascript eine funktion erstellt, die erst jeden Info-Div-Container auf display:none setzt und am Schluss nur den Info-Div-Container, der für den Bereich der Karte zuständig ist (wo die Maus drüber ist) auf display:block setzt.

Damit dürfte es keine Probleme geben! Ob IE oder nicht.

Gruß!