Mouseover / Images

[Eric teubert]

Hiho,

Ich habe eine Map für ein Browsergame. Darauf sind einige Elemente anklickbar. Diese möchte ich per Mouseover hervorheben. An sich kein Problem, Mozilla z.B. verändert von allein den Mauszeiger, wenn man mit der Maus über einen Image-Link geht. Nur der IE mal wieder nicht ...

Also was ich wissen möchte:

1. Veränderung des Mauszeiger beim Mouseover
2. Umrahmung des Bildes bei Mouseover

--
weiß nicht, ob das vielleicht weiterhilft aber ich poste mal noch, wie ich die map anzeigen lasse.

CSS-Bereich:

#B11 {
 top:<? echo 10*$crange; ?>px;
 left:140px;
 width:80px;
 height:40px;
  background-image:url('file:/c:/xampp/htdocs/CR/town/mercs.gif');
}

#B12 {
 top:<? echo 11*$crange; ?>px;
 left:140px;
 width:40px;
 height:40px;
  background-image:url('file:/c:/xampp/htdocs/CR/town/green.gif');
}

#B13 {
 top:<? echo 12*$crange; ?>px;
 left:140px;
 width:80px;
 height:80px;
  background-image:url('file:/c:/xampp/htdocs/CR/town/tempel.gif');
}

HTML-Bereich:

<a href="mercs.php"><div id="B11"></div></a>
<div id="B12"></div>
<a href="tempel.php"><div id="B13"></div></a>

Erklärung:

B11, B12 und B13 sind die Koordinaten. Das Top, left, width und height interessiert auch nicht weiter, weil es ja nur die Position des Bildes angibt. Von diesen 3 Beispielen sollten also B11 und B13 mit Mouseoverfunktionen versehen werden.

[Orlando]

Hi Eric,

1. Veränderung des Mauszeiger beim Mouseover
2. Umrahmung des Bildes bei Mouseover

dein Code ist in dieser Form irrelevant, da er so nicht beim Browser ankommt.

<a href="mercs.php"><div id="B11"></div></a>

Die Verschachtelung ist falsch. <a> kann kein <div> enthalten, siehe

http://de.selfhtml.org/html/referenz/elemente.htm#a

<div id="B12"></div>
<a href="tempel.php"><div id="B13"></div></a>

Hier ebenfalls. Bitte prüfe deinen Quellcode:

http://validator.w3.org/
 http://validator.de.selfhtml.org/

Von diesen 3 Beispielen sollten also B11 und B13 mit Mouseoverfunktionen versehen werden.

Du suchst nach :hover und cursor:

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus
 http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm#cursor
 http://www.w3.org/TR/CSS21/ui.html#propdef-cursor

Mit fehlerhaftem HTML wirst du allerdings nicht weit kommen, dort solltest du also zuerst ansetzen.

Grüße,
 Roland