• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kriege onmouseover onmouseout nicht hin

Status
Für weitere Antworten geschlossen.
E

Earthworm-Sonny

Neues Mitglied
Servus, hab ein Problem und hatte das im html Forum schon gepostet, die meinten das ich hier bei den JavaScript Profis richtig bin :-)
hier der Thread im html-Forum:
http://http://www.html.de/html-und-xhtml/25059-frage-zu-imagemap.html#post193773

ich hab folgenden Quelltext:

im Head:
<head>
<script type="text/javascript">
background = new Image();
background.src = "backround.JPG";
mouseover1 = new Image();
mouseover1.src = "mouseover1.jpg";
</script>
<title></title>
</head>

und so sieht die Map aus:

<map name="FPMap0">
<area href="anfahrt.html" shape="poly" coords="34, 342, 218, 346, 133, 240, 34, 342" onmouseover=" Anzeigen (1,mouseover1)" onmouseout="Anzeigen(0,background)">
<area href=".html" shape="poly" coords="430, 390, 504, 392, 505, 328, 461, 326, 433, 353, 430, 390">
<area href=".html" shape="poly" coords="549, 394, 616, 395, 615, 361, 590, 334, 550, 332, 549, 394">
<area href=".html" shape="poly" coords="781, 370, 910, 373, 847, 282, 781, 370">
<area href=".html" shape="poly" coords="122, 556, 199, 557, 201, 470, 127, 468, 125, 556">
<area href=".html" shape="poly" coords="393, 622, 463, 621, 465, 472, 397, 469, 393, 622">
<area href=".html" shape="poly" coords="493, 607, 645, 605, 645, 475, 496, 472, 493, 607">
<area href=".html" shape="poly" coords="736, 561, 793, 558, 793, 477, 734, 476, 736, 561">
<area href=".html" shape="poly" coords="908, 557, 998, 585, 996, 479, 906, 476, 908, 557">
</map>
<img border="0" src="backround.JPG" usemap="#FPMap0" width="1024" height="768">

Es klappt aber nicht das wenn ich mit der Maus über den Area Bereich fahre das mouseover1.jpg über das backround.jpg gelegt wird.
Kann mir hier von den Profis vielleicht iener weiterhelfen?

Gruß Sonny
 
also ich hatte dir ja schonmal geantwortet ;-)

so wie du es gemacht hast ist alles richtig.
einziges problem ist, dass die zahl, die festlegt, das wievielte bild deine imagemap auf der seite ist nicht stimmt. gehen wir mal davon aus, dass es 1 anderes bild noch davor gibt. dann schreibst du überall eine 1 hin. bei 2 anderen bildern davor eine 2 usw. bei keinem anderen bild ne 0.
alles klar?
also:
Code: 
[SIZE=2]onmouseover=" Anzeigen ([U][I][B]1[/B][/I][/U],mouseover1)"
onmouseout="Anzeigen([U][I][B]1[/B][/I][/U],background)"[/SIZE]
und was ich grad noch gesehen hab^^ es hätte so oder so nicht klappen können^^ denn das entscheidende fehlt :-P
sorry, kann sein, dass ich das letztes mal vergessen habe.

hier:

Code: 
<head>

[SIZE=2]<script type="text/javascript">

background = new Image();
background.src = "backround.JPG";

mouseover1 = new Image();
mouseover1.src = "mouseover1.jpg";[/SIZE]

...

[B]function Anzeigen(BildNummer,Bild){
   document.images[BildNummer].src = Bild.src;
}[/B]

</script>

</head>
die funktion genau so an diese stelle kopieren ;-) du brauchst da nichts ändern.

so hoffe jetzt klappt es. wenn nicht, dann spiel etwas mit der oben genannten zahl. dann müsstest du eig. schnell die lösung finden. und wenn überhauptnichts klappt, dann frag nochmal ;-)

grüße hokage
 
Servus und schon mal danke hokage555.
Es klappt leider immer noch nicht, ich kriege eine Fehlermeldung in Zeile 15 Zeichen 4: 'dokument.images[...]' ist Null oder kein Objekt.
Zeile 15 sieht so aus:
document.images[BildNummer].src = Bild.src;

Kannste mir da vielleich nochmal helfen, ich bin da hoffnungslos verloren :-)
Schönen dank schonmal vorab.

MfG Sonny
 
wenn es ohne js geht würde ich dir das sofort empfehlen ;-)

aber zu meiner lösung. die fehlermeldung bezieht sich wohl auf die oben schon angesprochene zahl. dann gib da mal überall 1 ein und nicht 0. dann müsste es gehen. ist dein imagemap denn das einzigste pic auf der seite, oder hast da noch andere? z.B. banner oder sowas?

grüße hokage
 
so hab es nach ein bisl probieren hinbekommen, so funzt es bei mir:

<html>
<head>
<script type="text/javascript">
background = new Image();
background.src = "backround.jpg";
mouseover0 = new Image();
mouseover0.src = "mouseover1.jpg";
mouseover1 = new Image();
mouseover1.src = "mouseover7.jpg";
mouseover2 = new Image();
mouseover2.src = "mouseover3.jpg";
mouseover3 = new Image();
mouseover3.src = "mouseover4.jpg";
mouseover4 = new Image();
mouseover4.src = "mouseover5.jpg";
mouseover5 = new Image();
mouseover5.src = "mouseover6.jpg";
function Anzeigen(BildNummer,Bild){
document.images[BildNummer].src = Bild.src;
}
</script>
<title></title>
</head>
<body>
<map name="FPMap0">
<!-- -->
<area href="gaestebuch.html" shape="poly" coords="34, 342, 218, 346, 133, 240, 34, 342" onmouseover=" Anzeigen(0,mouseover0)" onmouseout="Anzeigen(0,background)">
<!-- <area href="" shape="poly" coords="430, 390, 504, 392, 505, 328, 461, 326, 433, 353, 430, 390">-->
<area href="anfahrt.html" shape="poly" coords="549, 394, 616, 395, 615, 361, 590, 334, 550, 332, 549, 394" onmouseover=" Anzeigen(0,mouseover2)" onmouseout="Anzeigen(0,background)">
<area href="impressum.html" shape="poly" coords="781, 370, 910, 373, 847, 282, 781, 370" onmouseover=" Anzeigen(0,mouseover3)" onmouseout="Anzeigen(0,background)">
<area href="preisliste.html" shape="poly" coords="122, 556, 199, 557, 201, 470, 127, 468, 125, 556" onmouseover=" Anzeigen(0,mouseover4)" onmouseout="Anzeigen(0,background)">
<area href="fotos.html" shape="poly" coords="393, 622, 463, 621, 465, 472, 397, 469, 393, 622" onmouseover=" Anzeigen(0,mouseover1)" onmouseout="Anzeigen(0,background)">
<area href="freizeit.html" shape="poly" coords="493, 607, 645, 605, 645, 475, 496, 472, 493, 607" onmouseover=" Anzeigen(0,mouseover5)" onmouseout="Anzeigen(0,background)">
<!-- <area href=".html" shape="poly" coords="736, 561, 793, 558, 793, 477, 734, 476, 736, 561">-->
<!-- <area href=".html" shape="poly" coords="908, 557, 998, 585, 996, 479, 906, 476, 908, 557">-->
</map>
<img border="0" src="backround.jpg" usemap="#FPMap0" width="1024" height="768">
</body>
</html>

Ich würd jetzt nur gerne noch ein wissen,
das backround.jpg ist ein Haus und die Areas die Fenster, wie kann ich denn jetzt in eines der Fenster einen Counter reinbringen?
Counter hab ich, nur wie plazier ich den?
die Seite ist www.ferienwohnung-nordsee-vesper.de und den Counter will ich in das rechte untere Fenster platzieren.
Ich hoffe es ist nicht schlimm das ich den Link hier reinschreibe?
kann ich denn die Map irgendwie über eine Tabelle legen?
Vielleicht kann mir ja einer von Euch helfen.

MfG Sonny
 
Zuletzt bearbeitet:
Moin!

Earthworm-Sonny schrieb:
Ich würd jetzt nur gerne noch ein wissen,
das backround.jpg ist ein Haus und die Areas die Fenster, wie kann ich denn jetzt in eines der Fenster einen Counter reinbringen?
Counter hab ich, nur wie plazier ich den?
Zum Vergrößern anklicken....

Versuch es doch mal in dieser Art weiter zumachen.
Der Tag <table> wird heute nur noch für Tabellen verwendet, alles andere
wird mit <div> positioniert und formatiert.

Auch solltest Du darauf achten, dass Deine Homepage W3C Conform, d.h. Valide ist.
Hier Dein aktueller Zustand! Klick

Um Dir zu zeigen, dass es auch anders geht, hier mein Beispiel:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>-</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
 
<style type="text/css">
img {
  border:0;
}
#startmap {
  position:relative;
  padding:0;
  width:1024px;
  height:768px;
  margin:auto;
}
#counter {
  position:absolute;
  top:510px;
  left:910px;
  font-weight:bold; color:red;
}
</style>
 
<script type="text/javascript">
background = new Image();
background.src = "backround.jpg";
mouseover0 = new Image();
mouseover0.src = "mouseover1.jpg";
mouseover1 = new Image();
mouseover1.src = "mouseover7.jpg";
mouseover2 = new Image();
mouseover2.src = "mouseover3.jpg";
mouseover3 = new Image();
mouseover3.src = "mouseover4.jpg";
mouseover4 = new Image();
mouseover4.src = "mouseover5.jpg";
mouseover5 = new Image();
mouseover5.src = "mouseover6.jpg";
function anzeigen(BildNummer,Bild){
document.images[BildNummer].src = Bild.src;
}
</script>
 
</head>
<body>
 <div id="startmap">
 
<div id="counter">COUNTER</div>
 
<map name="FPMap0">
   <area href="gaestebuch.html" shape="poly" coords="34, 342, 218, 346, 133, 240, 34, 342" alt="" onmouseover="anzeigen(0,mouseover0)" onmouseout="anzeigen(0,background)">
   <!-- <area href="" shape="poly" coords="430, 390, 504, 392, 505, 328, 461, 326, 433, 353, 430, 390" alt="">-->
   <area href="anfahrt.html" shape="poly" coords="549, 394, 616, 395, 615, 361, 590, 334, 550, 332, 549, 394" alt="" onmouseover="anzeigen(0,mouseover2)" onmouseout="anzeigen(0,background)">
   <area href="impressum.html" shape="poly" coords="781, 370, 910, 373, 847, 282, 781, 370" alt="" onmouseover="anzeigen(0,mouseover3)" onmouseout="anzeigen(0,background)">
   <area href="preisliste.html" shape="poly" coords="122, 556, 199, 557, 201, 470, 127, 468, 125, 556" alt="" onmouseover="anzeigen(0,mouseover4)" onmouseout="anzeigen(0,background)">
   <area href="fotos.html" shape="poly" coords="393, 622, 463, 621, 465, 472, 397, 469, 393, 622" alt="" onmouseover=" anzeigen(0,mouseover1)" onmouseout="anzeigen(0,background)">
   <area href="freizeit.html" shape="poly" coords="493, 607, 645, 605, 645, 475, 496, 472, 493, 607" alt="" onmouseover="anzeigen(0,mouseover5)" onmouseout="anzeigen(0,background)">
   <!-- <area href=".html" shape="poly" coords="736, 561, 793, 558, 793, 477, 734, 476, 736, 561" alt="">-->
   <!-- <area href=".html" shape="poly" coords="908, 557, 998, 585, 996, 479, 906, 476, 908, 557" alt="">-->
</map>
<img src="backround.jpg" alt="" usemap="#FPMap0" width="1024" height="768">
 
</div>
 </body>
</html>

Ich hoffe, Du kannst daraus lernen!

MfG
 
Willst Du mir sagen, was HTML ist und wie CSS-Design geht? :-)
Sorry, wenn das eingebildet klingt, aber ich weiß, wozu Tabellen da sind, nämlich zur Auszeichnung tabellarischer Daten, und ich weiß auch, wozu <div> da ist, nämlich zum Gruppierern mehrerer Elemente, meist zwecks gemeinsamer Formatierung, aber auch als logische Sektionen (div = division).
Und ich weiß auch, dass man CSS-Layout nicht mit <div> macht, sondern eben, wie der Name schon sagt, mit CSS! Und CSS verlangt als Basis einen validen und semantisch sinnvollen HTML-Code.

Such mal nach Beiträgen von mir, dann findest Du sehr viel zu dem Thema, auch warum man nichts mit <div> positioniert und formatiert.

SelfHTML ist da etwas in der Zeit hinterher, wie eigentlich alle HTML-Tutorials, die man so findet.

Ich empfehle Dir: Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel

Sei mir nicht böse, aber da bist Du an den falschen geraten :-)
Ich würde mich freuen, wenn ich Dir noch etwas beibringen kann.

Aber wenn es Dich tröstet, diesen Holzweg (Layout mit <div>) beschreitet derzeit leider die Mehrheit der Webmaster. Aber sie haben den Sinn von CSS-Layout tatsächlich noch nicht verstanden und tun sich deshalb meist auch sehr schwer damit und wünschen sich ihre Tabellen wieder.
Wenn Du es einmal begriffen hast, was es mit semantischem HTML und Trennung von Inhalt und Layout auf sich hat, dann wird es bei Dir *Klick* machen und Du wirst merken, wie einfach es wirklich ist!

Grüße,
-Efchen
 
Kein Problem, ich hab mich nicht angegriffen gefühlt. Ich entschuldige mich, wenn meine Antwort blöd rüberkam, das war dann wohl ein Mistverständnis :-)

Es war nur eine zu erwartende Antwort gewesen von jemandem, dem ich sage, es ist falsch, Layout mit <div> zu machen. Du wärest nicht der erste, der das denkt...

Und...ich sehe mich nicht als Profi...ich mach das nur nebenberuflich und sehe das eher als Hobby. Ich hab vielleicht nur den Vorteil, dass ich das jetzt seit gut 9 Jahren mache, davon 7 Jahre ohne Frames, Tabellenlayouts etc. Seht es einfach als Beweis, dass das jeder lernen kann und nicht so schwierig ist, dass man daran verzweifeln muss :-)

Grüße,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben