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

Frage zu ImageMap

E

Earthworm-Sonny

Neues Mitglied
Servus,
hab da mal ne Fage, habe folgenden Quelltext:
<body>
<table border="0" width="1024" height="768">
<tr>
<td valign="middle" align="center">
<map name="FPMap0">
<area href="anfahrt.html" shape="poly" coords="34, 342, 218, 346, 133, 240, 34, 342">
<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">
</td>
</tr>
</table>
</body>

Auf dem "backround.jpg" ist ein Haus und die areas sind die Fenster. Das hat alles auch gut geklappt. Jetzt würde ich aber gerne, wenn man mit der Maus über die area fährt, das sich die Area durch ein anderes Bild verändert. Soll also so sein das wenn ich mit der Maus über das (geschlossene) Fenster fahre sich das Fenster öffnet und dann einen Text zur Navigation frei gibt. Hab das Haus einmal mit geschlossenen und einmal mit geöffneten Fenstern fotografiert und auch schon die Bereiche aus dem Pic mit den geöffneten Fenstern ausgeschnitten, aber das es beim drüberfahren mit der Maus angezeigt wird krieg ich net hin. Habt Ihr da vielleicht ne Lösung für mich? Wenn möglich gar eine ohne Java?
Bin für jede Hilfe dankbar!!!

Gruss Sonny
 
hi,

Hatte früher schon mal ein ähnliches problem.

wenn ich dich richtig verstehe suchst du ein mouse-over bei nem imagemap
soweit so gut. einzigste möglichkeit ist in diesem fall js.
dafür bräuchtest du allerdings für jeden mouseover das komplette bild. d.h. wenn du mit der maus über ein fenster fährst, wird die ganze magemap gegen eine andere ausgetauscht, wo das fenster dann auf ist oder so.
verstehst?

hier mal der code:

das hier in den head-bereich
Code: 
<script type="text/javascript">
    background = new Image();
    background.src = "background.jpg";

    mouseover1 = new Image();
    mouseover1.src = "mouseover1.jpg";

    .... u.s.w.

</script>
body:

Code: 
[SIZE=2]<map name="inet-aufbau" id="inet-aufbau">
    <area
       href="funktionalitaet/allgemeines-funktionalitaet-pc.php" alt="PC" title="PC"
       onmouseover=" Anzeigen (*,mouseover1)"
       onmouseout="Anzeigen(*,background)"
       shape=rect coords="10,10,127,390"/>
    <area
       href="funktionalitaet/allgemeines-funktionalitaet-ip.php" alt="IP" title="IP"
       onmouseover=" Anzeigen (*,mouseover2)"
       onmouseout="Anzeigen(*,background)"
       shape=rect coords="140,10,257,390"/>[/SIZE]

... u.s.w.
für den stern musst du angeben das wievielte bild deine imagemap auf der seite ist.
kommen davor noch 2 andere pics. dann schreibst du also eine 3 darein.
alles klar?

wenn du noch fragen hast, dann frag ;-)

grüße hokage
 
Servus und schon mal danke für den Lösungsansatz.
Ich tu mich gerade mit der Umsetzung schwer.

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

So sieht der Head Bereich aus, und so die Map:

<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">

Aber es funktioniert nicht, der Linkbereich wird angezeigt und der link klappt auch, aber wenn ich darüberfahre wird mouseover1.jpg nicht geladen. Die Bilder heißen "bachround.jpg und mouseover1.jpg. Hab ich vielleicht das mit der Sternchen verbockt?

Gruß Sonny
 
ich hab die im js bereich geantwortet. hatte den entscheidenden punkt: die js-funktion zum bildwechsel vergessen ^^
ach und der zahlenwert innerhalb von Anzeigen() muss überall gleich sein.
aber auch da nochmal genauere erklärung im js bereich ;-)

grüße hokage
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben