Mauszeiger onMouserOver bei areas - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Mauszeiger onMouserOver bei areas

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Mauszeiger onMouserOver bei areas

Pages: [1]

geschrieben von JensT am 29.08.2008 - 01:03

Hallo,

nur der FF benutzt die Stylesheet Einstellung cursor:help auch bei <area> tags.

Ich suche nun also nach einer Lösung die den Mauszeiger per onMouseOver verändert.
"style.cursor" kann man wie schon gesagt nicht vewenden.

Gruß,

Jens

geschrieben von Danny am 29.08.2008 - 10:07

Hallo Jens,
ich wollt grad eine Antwort schreiben und hab mir gedacht, ok ich probier es doch erstmal aus und siehe da, es ist doch nicht ganz so einfach wie ich es mir gedacht habe.

Folgende Lösung funktioniert zumindest im FF und IE. Opera macht trotzdem nicht was er soll.

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24:

<html>
<head>
  <style type="text/css">
    /* für den FF */
    area {
       cursor:help;
    }
  </style>
  
  <script type="text/javascript">
    // für den IE
    function changeCursor(imgId, cursor) {
      document.getElementById(imgId).style.cursor = cursor;
    }
  </script>
  
</head>
<body>
  <img src="test.gif" width="375" height="525" usemap="#Map" id="testbild" />
  <map name="Map" id="Map">
    <area shape="rect" coords="0,0,100,100" href="index.html" onmouseover="changeCursor('testbild','help');" onmouseout="changeCursor('testbild','default');" />
  </map>
</body>
</html>

Kannst es ja mal probieren ob es dir bei deinem Problem hilft.

Schönen Gruß
Danny

geschrieben von JensT am 29.08.2008 - 11:37

Hi Danny,

interessanter Ansatz. Das Area Tag dominiert anscheinend im Opera und Safari und hebelt damit das drunterliegende (?) Img aus.

Wenn man anstatt den Style vom Bild, den Style vom Body ändert, gehts auch im Opera. Aber so richtig überzeugend ist das noch nicht.

Gibt es denn keine generelle Javascript Funktion die das Aussehen des Mauszeigers verändert?

Besten Dank aber,

- Jens

geschrieben von Micha am 29.08.2008 - 13:36

Hi,
also bei mir geht im IE, FF und natürlich Opera

	HTML-Quelltext
1: 2: 3:	img { cursor:help; }

Muß es ein JavaScript sein, dann muss der Event auf das Bild gelegt werden

Micha

geschrieben von okley am 29.08.2008 - 13:42

@Micha
Wenn ich das nicht falsch verstanden habe ist es das Ziel den Cursor nur beim mouseover der bestimmten area zu verändern. Nicht für das ganze Bild.

Auf dieser Beispielseite ändert sich sogar was:
http://lernspielwiese.de/linkstyle/....ursor.html

Irgendwie scheint da das Javascirpt zu funktionieren. Aber die Imagearea scheinen nicht richtig zu sein. Im IE stimmt jedoch alles.

geschrieben von JensT am 29.08.2008 - 13:53

Hi,

richtig. Geht nur um den Area Bereich, nicht um das ganze Bild.
Das Skript auf lernspielwiese.de ist imho 100% das von Danny

(Oder umgekehrt)

Gruß,

Jens

geschrieben von okley am 29.08.2008 - 14:45

Vom Prinzip her ist es das gleiche Script.
Aber eigentlich geht es hier ja um den Style. Und der ist da auf dieser Seite anders definiert. Denn wie gesagt: Opera ändert den Style in gewissen Bereichen auf dem Bild, was bis anhin ja nicht der Fall war.

geschrieben von Micha am 29.08.2008 - 14:55

Hallo,

wenn man den Link über den onclick-Event einbindet, könnte es mgl.weise funktionieren. Ganz zufrieden bin ich mit nachfolgendem aber nicht - ggf. ist es ein Ansatz:

	HTML-Quelltext
1:	onclick="location.href='index.html';" onmousemove="this.parentNode.parentNode.style.cursor='help';"

(oder ein parentNode weniger)

Gruß Micha

geschrieben von Danny am 29.08.2008 - 14:57

Ja den Schnipsel hab ich von der Seite ;)

Wenn du eh alle area's einer Seite mit dem selben Cursor versehen willst, kannst du es auch alles in eine Funktion packen und ein bisschen Code sparen ;)

So in etwa

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32:

<html>
<head>

  <style type="text/css">
    area {
       cursor:help;
    }
  </style>
  
  <script type="text/javascript">
    function areaCursor() {
      var areaEl = document.getElementsByTagName('area');
      
      for(var i = 0; i < areaEl.length; i++) {
        areaEl[i].onmouseover = function() {
          document.body.style.cursor = 'help';
        }
        areaEl[i].onmouseout = function() {
          document.body.style.cursor = 'default';
        }
      }
    }
  </script>
  
</head>
<body onload="areaCursor();">
  <img src="flyer.gif" width="375" height="525" usemap="#Map" id="testbild" />
  <map name="Map" id="Map">
    <area shape="rect" coords="0,0,100,100" href="index.html" />
  </map>
</body>
</html>

Allerdings funktioniert das auch nicht mit Opera. Wie hast du das hinbekommen ?

Gruß Danny