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

Probleme mit Map Area,cords

C

crusico

Mitglied
Hi to @ll,

ich habe ein Problem und komme nicht weiter als newbie :-(

und zwar erstelle ich grade eine Html Seite.

Beim starten der Seite habe ich einen Bild als Hintergrund geladen und mit
Mapeditor 2 Bereiche definiert die jewalls ein neues Bild ladet.
Jedes dieser zwei Bilder habe auch definierte Bereiche!

Jetzt habe ich aber das Problem,
wenn eins der neuen Bilder geladen ist (die Bilder haben auch definierte Bereiche), habe ich noch die alten cords von ersten Bild drin!!!!

Wie kann ich eine abfrage gestallten, so das immer je welches Bild auf den Bildschirm ist, auch die dazugehörte Cords gehören?

Hier mal mein code:

HTML: 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<script language="JavaScript">
<!--
function bildNeu (bild){
document.getElementsByTagName("img")[0].src=bild;
} //-->

<!--
function Fenster (bild){
document.getElementsByTagName("img")[0].src=bild;
} //-->
</script>
 </head>
<body bgcolor="#000000">
<div>
<p align="center">
<img src="Blinken/Intro_Blinken.gif"  width="70%" height="70%" usemap="#Intro_Blinken" style="border-style:none" />
</p>
</div>
<div style="position:absolute; top:136px; width:208px; background-color:transparent;
border:1px solid #FF0000; padding:10px">Dies ist ein absolut positionierter Text über einer absolut positionierten Grafik.</div>

<map id="Intro_Blinken" name="Intro_Blinken">
<area shape="poly" alt="" coords="522,105,522,186,542,226,638,226,638,534,816,534,816,110" onmouseover="bildNeu('Rechts/Intro_Rechts.gif')" name="intro_rechts" onmouseout="bildNeu('Blinken/Intro_Blinken.gif')" title="" />
<area shape="poly" alt="" coords="453,107,454,186,433,225,335,225,335,537,152,534,153,109" onmouseover="bildNeu('Links/Intro_Links.gif')" onmouseout="bildNeu('Blinken/Intro_Blinken.gif')" title="" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
</body>
</html>
 
Werbung:
Nur eine Idee: erstelle mehrere map-Definitionen, also pro Bild eine. Wenn Du das Bild wechselst tauschst Du dann auch im Attribut "usemap" den Wert gegen den Namen der zu dem Bild gehörenden map-Definition aus.
 
hi,

danke für die schnelle antwort!

Aber wie mache ich das?

z.B. das ist der Code mit je 1 Bereich von je einen Bild:


HTML: 
...usemap="#Intro_1"...
 
<div>
<map id="Intro_1" name="Intro_1">
<area shape="rect" alt="seite1" coords="164,190,275,207" href="seite1.html" title="seite1" /> 
</map>
</div>


HTML: 
....usemap="#Intro_2" ...
 
<div>
<map id="Intro_2" name="Intro_2">
<area shape="rect" alt="seite2" coords="699,192,810,209" href="seite2.html" title="seite2" /> 
</map>
</div>

Wie verknüpfe ich den Code, das z.B. wenn das Bild Intro_1 gelanden wird auch dieser Bereich gilt?
 
Werbung:
Wie gesagt: den Wert des Attributs "usemap" austauschen. Kleine Hilfestellung:

Code: 
document.getElementById('mymap').usemap = "#Intro_2";

Ist aber ungetestet und nur eine Idee von mir. Es kann sein, dass manche Browser (ältere) das nicht unterstützen.
 
hi,

danke für die Hilfestellung.
Aber wie gesagt, bin noch newbie :sad:

Wo soll ich dein code einbauen, oben in JavaScript?

Etwas so:

HTML: 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Galaxy - Vision</title>
<script language="JavaScript">
<!--
function bildNeu (bild){
document.getElementsByTagName("img")[0].src=bild;
document.getElementById('mymap').usemap = "#Intro_2";
} //-->
 
<!--
function Fenster (bild){
document.getElementsByTagName("img")[0].src=bild;
} //-->
</script>

</head>
<body bgcolor="#000000">
<div>
<p align="center">
<img src="Blinken/Intro_Blinken.gif"  width="70%" height="70%" usemap="#Intro_Blinken" style="border-style:none" />
</p>
</div>
<div style="position:absolute; top:136px; width:208px; background-color:transparent;
border:1px solid #FF0000; padding:10px">Dies ist ein absolut positionierter Text über einer absolut positionierten Grafik.</div>

<map id="Intro_Blinken" name="Intro_Blinken">
<area shape="poly" alt="" coords="522,105,522,186,542,226,638,226,638,534,816,534,816,110" onmouseover="bildNeu('Rechts/Intro_Rechts.gif')" name="intro_rechts" onmouseout="bildNeu('Blinken/Intro_Blinken.gif')" title="" />
<area shape="poly" alt="" coords="453,107,454,186,433,225,335,225,335,537,152,534,153,109" onmouseover="bildNeu('Links/Intro_Links.gif')" onmouseout="bildNeu('Blinken/Intro_Blinken.gif')" title="" />
<area shape="default" nohref="nohref" alt="" />
</map>
<div>
<map id="Intro_2" name="Intro_2">
<area shape="rect" alt="test" coords="699,192,810,209" href="test.html" title="test" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
</div>
 
</body>
</html>
 
Ich erkläre das eben nochmal, falls ich mich nicht richtig Ausgedrück habe...

Also ich habe beim öffenen der Seite ein Bild1 mit 2 Bereiche definiert:

bild1.JPG

coords="522,105,522,186,542,226,638,226,638,534,816,534,816,110" coords="453,107,454,186,433,225,335,225,335,537,152,534,153,109"

mit mouseover wird in den Bereichen L und R das alte Bild1 ersetzt und ein neues Bild2(Bereich R) oder Bild3(Bereich L) geladen.

ich nehme als Beispiel Bild2(Bereich R)

bild2.JPG


coords="699,192,810,209"

jetzt habe ich das Problem, das der Bereich von Bild2 nicht funktioniert!
Ich habe zwar das neue Bild2 geladen, aber die coords werden nicht übernohmmen, die coords bleiben von alten Bild1!11

Ich hoffe, dass ich mein Problem jetzt beser erklärt haben...
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben