onmouseover in einer MAP

[aila]

Hallo leute habe mal ne frage ich bekomme das irgendwie nicht hin in meiner privaten hp das sich in einer
map ein onmouseover effekt zeigen tut. hier mein quelltext:

<div>
  <img src="http://www.psd-tutorials.de/forum/images/flagbutton0.gif" alt="choice of language"
      onmouseover="this.src='images/flagbutton.gif';"
      onmouseout="this.src='images/flagbutton0.gif';"
      USEMAP = "#iako1">
      <MAP NAME = "iako1">
<AREA SHAPE = "RECT" COORDS = " 12,  3,  46,  124" HREF = "ger/index.php" TARGET = "_self" ALT = "Deutsche Version">
<AREA SHAPE = "RECT" COORDS = " 11,  128,  48,  249" HREF = "index.php" TARGET = "_self" ALT = "english version">
<AREA SHAPE = "DEFAULT" NOHREF>

</MAP>
</div>

-------------------------------------------
was mache ich falsch?
danke für eure antwort im voraus!!!

 

[cebito]

AW: onmouseover in einer MAP

Warum JavaScript? Warum überhaupt eine Map?

 

[aila]

AW: onmouseover in einer MAP

na wenn man dort über einen bestimmten bereich geht soll ein onmouseover effekt erscheinen und in der neu angezeigten grafik sind 2 bereiche die anklickbar sein sollen deswegen map.
siehe hier ganz links in der mitte habe jetzt die map auskommentiert das die funktion zu sehen ist:
links neben LATEST NEWS der Balken

 

[cebito]

AW: onmouseover in einer MAP

deswegen map

...die es für diesen Zweck nicht braucht. Zwei a-Elemente auf display:block; gesetzt mit einer festen Höhe und Breite, einem jeweiligen Hintergrundbild für den Normalzustand und den Hoverzustand erfüllen genau diesen Zweck.

... und gib deiner Seite mal 'nen Doctype.

 

[aila]

AW: onmouseover in einer MAP

ja und wie soll das aussehen ? kannste mir mal ein beispiel als code reinsetzen!
Danke im voraus!!!

 

[cebito]

AW: onmouseover in einer MAP

<a class="flag ger" href="ger/index.php"></a>
<a class="flag en" href="index.php"></a>

a.flag{display:blog;width:43px;height:112px;}
a.ger{background:url(ger.jpg);}
a.ger:hover{background:url(gerHover.jpg);}
a.en{background:url(en.jpg);}
a.en:hover{background:url(enHover.jpg);}

Die Bilder musst natürlich noch erstellen und das, was da jetzt im div ist diesem als Hintergrundbild geben.

 

[aila]

AW: onmouseover in einer MAP

mmm irgendwie bin ich n bisschen begriffstutzig habe jetzt in der css datei das drinne:

td.mybackground{
background-image: url(images/flagbutton0.gif); /* forward slash for the path */
background-repeat: no-repeat;
background-position: center;
vertical-align: top;
} 


a.flag{width:43px;height:112px;}
a.ger{background:url(foo.gif);}
a.ger:hover{background:url(images/flagbutton.gif);}
a.en{background:url(foo.gif);}
a.en:hover{background:url(images/flagbutton.gif);}

foo.gif ist eine transparente grafik

und in der seite steht das drinne:

<table width="1019"><tr><td width="49" valign="top" class="mybackground">
<img src="foo.gif" width="5" height="293"><br>


<a class="flag ger" href="ger/index.php"></a>
<a class="flag en" href="index.php"></a>

</td>

aber funktioniert noch nicht leider :-(

 

[cebito]

AW: onmouseover in einer MAP

Wieso hast du da jetzt eine Tabelle gemacht? Du hattest dort vorher einen div, und in diesen solltest du die a einfügen. So kann man dir nicht helfen, wenn du die Antworten nur halb liest und umsetzt.

 

[aila]

AW: onmouseover in einer MAP

so habe das jetzt so gemacht sorry...
oben im header:

<style type="text/css">
div.bg {
background-image: url(images/flagbutton0.gif);
width:49px;height:250px;
border:0px;
padding:0px;
}
</style>

HTML CODE:

<div class="bg">
<a class="flag ger" href="ger/index.php"></a>
<a class="flag en" href="index.php"></a>
</div>

und in der css datei:

a.flag{display:blog;width:43px;height:112px;}
a.ger{background:url(images/flagbutton0.gif);}
a.ger:hover{background:url(images/flagbutton.gif);}
a.en{background:url(images/flagbutton0.gif);}
a.en:hover{background:url(images/flagbutton.gif);}

jetzt erscheint zumindestens wieder die grafik ....
sorry aber mit css ist nicht so mein ding ... nochmal entschuldigung...

 

[aila]

AW: onmouseover in einer MAP

sooo
nochmals danke für deine hilfe ich habe es geschafft...

ich wünsche ein schönes wochenende!!!!!!