Mauszeiger soll sich bei Links ändern

[Twins]

Hallo,

eine Freundin von mir hat eine Webseite und mich gefragt, ob ich ihr bei einen Problem helfen kann. Leider habe ich von sowas keinen blassen Schimmer, deswegen hoffe ich, ihr könnt mir helfen.

Die Seite gibt es hier:
http://beam.to/TifasTRLE.com

Oben gibt es Menüs, also Maps und Area:

Code: Alles auswählen

<map name="image_01_Map">
<area shape="rect" alt="MAIN" coords="292,20,337,32" href="main.html" target="A">
<area shape="rect" alt="MY LEVEL's" coords="351,20,446,32" href="my_levels.html" target="A">
<area shape="rect" alt="TUTORILS" coords="458,20,533,32" href="tutorials.html" target="A">
<area shape="rect" alt="LINK ME" coords="545,20,614,32" href="link_me.html" target="A">
<area shape="rect" alt="LINKS" coords="627,20,680,32" href="links.html" target="A">
<area shape="rect" alt="GUESTBOOK" coords="693,20,723,32" href="http://407219.guestbook.onetwomax.de/" target="_blank">
</map>

Aber das Problem dabei ist, wenn die Maus über den Links ist, kann man gar nichts sehen (Mauszeiger ändert sich nicht) - ich hätte gern dieses Kreuz als Maus wenn man über den areas ist, wie kann ich das machen?

Die style.css:

Code: Alles auswählen

body,div,td,xmp
{scrollbar-DarkShadow-Color:#585858;
scrollbar-Track-Color:#AAAACC;
scrollbar-Face-Color:#AAAAFF;
scrollbar-Shadow-Color:#000000;
scrollbar-3dLight-Color:#000000;
scrollbar-Highlight-Color:#585858;
scrollbar-Arrow-Color:#000000;
font-size: 10px; color:#000000;
font-family: Verdana,Tahoma;
letter-spacing: 1px; cursor: default;}

body,.frame
{background:url('images/image_04.jpg') fixed;
text-align:justify;margin:0;}

A:link,A:visited,A:active,b
{text-decoration:none;cursor:crosshair;color:#AAAAFF;}

a:hover
{text-decoration:none;background:#000000;color:#FFFFFF;font-weight:bold;}

.head
{font-weight:bold;letter-spacing:3px;border-bottom:1px dotted #000000;}

Wo genau liegt der Fehler?
Vielen dank für eure Antwort!

Viele Grüße,
Twins

[oxpus]

Lösche das raus:

Code: Alles auswählen

cursor: default;

Damit wird angegeben, daß der Cursor immer nur Standard bleibt...

[JaneDoe]

Das geht bei imagemaps nicht.
Das würde nur bei dem kompletten Image funktionieren.

Sowas wie

Code: Alles auswählen

<area shape="rect" coords="104,297,225,376" href="bla.html" style='cursor: crosshair;' />

funktioniert nur in FF.

Da muss Javascript her.

such....

z.B einmal hier durchwühlen:
http://forum.de.selfhtml.org/archiv/2005/3/t103299/

[oxpus]

Oder mit onmouseover könnte es klappen:

Code: Alles auswählen

<area shape="rect" coords="104,297,225,376" href="bla.html" onmouseover='cursor: crosshair;' />

[JaneDoe]

Nö
das geht nicht mal mehr mit FF.

[oxpus]

So habe ich es nun erfolgreich getestet:

Code: Alles auswählen

<area shape="rect" coords="104,297,225,376" href="bla.html" />

Dann darf auch nirgends anders cursor angegeben sein, damit hier der Cursor beim Überfahren geändert wird.
Beispiel ist auch hier zu finden: http://de.selfhtml.org/html/grafiken/ve ... definieren

[JaneDoe]

Und wo kommt der crosshair her?
Dass der cursor sich ändert ist ja nicht das Problem bei area tags.
Das Problem ist, wie bekommt man da ne style anweisung, die für den cursor crosshair benötigt wird, rein.
Und da seh ich außer JS keine Möglichkeit.

Oder ich hab grad Tomaten auf den Augen.

[oxpus]

[quote="oxpus";p="74994"]Lösche das raus:

Code: Alles auswählen

cursor: default;

Damit wird angegeben, daß der Cursor immer nur Standard bleibt...[/quote]

[JaneDoe]

hmm,

ich habs auch getestet, und es funktioniert weder mit IE7 noch mit Opera 9.10.

Die Methode mit der man beliebige Cursor über imagemaps benutzen kann ist, z.b hier zu sehen,per JS

http://lernspielwiese.de/linkstyle/areacursor.html

[oxpus]

Komisch nur, daß das Beispiel von de.sehfhtml.org das gleiche ist, wie hier gepostet und in allen Browsern funktioniert.
Nur eben aus der CSS-Anweisung die Cursor-Definition entfernen, den Browser Cache danach leeren und schon werden alle Area-Links zu Cursor-Änderungen führen.
Habe ich selber im FF und IE7 getestet...

[JaneDoe]

wie kommt es dann, dass nicht nur im selfhtml forum behauptet wird, dass style anweisungen, die du
zwingend für den crosshair bräuchtest, nicht mit area tags funktionieren, und es bei mir auch nicht tun ?, sondern stattdessen zu JS oder Layer Methoden gegriffen wird?

[oxpus]

Moment!
Es soll zwingend "crosshair" sein?

Hm...

Code: Alles auswählen

<map name="Landkarte">
    <area href="#" shape="rect" coords="8,376,161,393" style="cursor:crosshair;" />
    ...
</map>

Das hatte bei einem anderen funktioniert, ausser bei Opera: http://www.tutorials.de/forum/1442257-post2.html

Hier eine Javascript-Lösung:

Code: Alles auswählen

<area shape=circle coords="52,21,17"
  onMouseOver="javaScript:alterCursor('myImage', 'help');"
  onMouseDown="javascript:showPopup(event, 'linkPopup', 'Jim\'s House');"
  onMouseOut="javaScript:alterCursor('myImage', 'default');
     javascript:hidePopup('linkPopup');"
  HREF="javaScript:doNothing();"
>

http://www.permadi.com/tutorial/cssCustomCursor/

Zugegeben, ich bin da selber etwas ideenlos...

[JaneDoe]

[quote="oxpus";p="75090"]Moment!
Es soll zwingend "crosshair" sein?
[/quote]

ehh, ja.
Das versuch ich doch die ganze Zeit zu erklären.

Aber das Problem dabei ist, wenn die Maus über den Links ist, kann man gar nichts sehen (Mauszeiger ändert sich nicht) - ich hätte gern dieses Kreuz als Maus wenn man über den areas ist, wie kann ich das machen?

Das wird nur zuverlässig über JS funktionieren, oder man muss wiederum Ebenen über die einzelnen Bereiche legen und dann mit mouseover das Ganze regeln.

Aber für das Ergebnis einen Crosshair zu haben, sind die Methoden imo alle zu aufwendig.

[Twins]

Vielen dank an euch beiden für die Tipps und eure Unterstützung!!