Silke: Swap/Map

Hallo!

Hab' einige Probleme mit meinem JavaScript/HTML-Teil. Ich habe ein Bild meiner Homepage als Map dargestellt, um Teile davon als verschiedene Links zu definieren.

Dann wollte ich, daß diese Links, wenn man mit der Maus darüber fährt (onmouseover), erhellt werden, sprich: ein anderes Bild (wo eben jene Links in einer anderen, hellen, Farbe erscheinen) gezeigt wird. Nur scheinen sich diese beiden Begriffe nicht zu vertragen. Ich hab' es anschließend mit dem Javascript-Befehl SwapOut/SwapBack probiert, was eigentlich funktioniert. Aber nur für einen Link im Bild und nur im I.E., nicht im N.C.

Hätte jemand einen Tip, wie's funktioniert bzw. was ich falsch mache?

Hier wäre der Quellcode:

============

<script language="JavaScript">

Image1=new Image
Image1.src="handrose6.jpg"
Image2=new Image
Image2.src="handrose4.jpg"

function SwapOut() {
                  document.Gallery.src = Image1.src; return true;
                  }

function SwapBack() {
                  document.Gallery.src = Image2.src; return true;
      }

Image3=new Image
Image3.src="handrose7.jpg"
Image4=new Image
Image4.src="handrose4.jpg"

function SwapOut() {
                  document.Gallery.src = Image3.src; return true;
                  }

function SwapBack() {
                  document.Gallery.src = Image4.src; return true;
      }

</script>

=====================

Und hier der Teil im Body:

=================

<map name="Gallery">
<area shape="rect" coords="25,155,100,165" href="http://www.koblenz.de/" alt="Copyright"

target="_parent" onMouseOver="SwapOut()" onMouseOut="SwapBack()">

<area shape="rect" coords="20,205,55,220" href="http://www.wiesbaden.de/" alt="About"

target="_parent" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
<area shape="rect" coords="325,140,405,155" href="http://www.mainz.de/" alt="How to use">
<area shape="rect" coords="305,210,380,220" href="http://www.frankfurt.de/" alt="E-mail me">
</map>

<img name="Gallery" src=handrose4.jpg border=no  usemap="#Gallery" >

==================

Was ich will, ist, daß, wenn man über einen Link im Bild fährt, dieser Link erhellt wird (ein anderes Bild dafür), und wenn man wegfährt, es wieder zurück zum ursprünglichen geht. Natürlich brauche ich für meine 4 Links 5 Bilder. Eines als ursprüngliches und jeweils eines für jenen Link, der beim Drüberfahren hell wird.

Wäre für jede Hilfe sehr dankbar!!!

MfG,
Silke

  1. für mich sieht es so aus, das der browser nicht weiß was er aktualisieren soll, gib der map nen anderen namen (z.B. GallaryMap) weil im document sind 2 Elemente mit dem Namen Gallary und das ist das Problem

    Hallo!

    Hab' einige Probleme mit meinem JavaScript/HTML-Teil. Ich habe ein Bild meiner Homepage als Map dargestellt, um Teile davon als verschiedene Links zu definieren.

    Dann wollte ich, daß diese Links, wenn man mit der Maus darüber fährt (onmouseover), erhellt werden, sprich: ein anderes Bild (wo eben jene Links in einer anderen, hellen, Farbe erscheinen) gezeigt wird. Nur scheinen sich diese beiden Begriffe nicht zu vertragen. Ich hab' es anschließend mit dem Javascript-Befehl SwapOut/SwapBack probiert, was eigentlich funktioniert. Aber nur für einen Link im Bild und nur im I.E., nicht im N.C.

    Hätte jemand einen Tip, wie's funktioniert bzw. was ich falsch mache?

    Hier wäre der Quellcode:

    ============

    <script language="JavaScript">

    Image1=new Image
    Image1.src="handrose6.jpg"
    Image2=new Image
    Image2.src="handrose4.jpg"

    function SwapOut() {
                      document.Gallery.src = Image1.src; return true;
                      }

    function SwapBack() {
                      document.Gallery.src = Image2.src; return true;
          }

    Image3=new Image
    Image3.src="handrose7.jpg"
    Image4=new Image
    Image4.src="handrose4.jpg"

    function SwapOut() {
                      document.Gallery.src = Image3.src; return true;
                      }

    function SwapBack() {
                      document.Gallery.src = Image4.src; return true;
          }

    </script>

    =====================

    Und hier der Teil im Body:

    =================

    <map name="Gallery">
    <area shape="rect" coords="25,155,100,165" href="http://www.koblenz.de/" alt="Copyright"

    target="_parent" onMouseOver="SwapOut()" onMouseOut="SwapBack()">

    <area shape="rect" coords="20,205,55,220" href="http://www.wiesbaden.de/" alt="About"

    target="_parent" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
    <area shape="rect" coords="325,140,405,155" href="http://www.mainz.de/" alt="How to use">
    <area shape="rect" coords="305,210,380,220" href="http://www.frankfurt.de/" alt="E-mail me">
    </map>

    <img name="Gallery" src=handrose4.jpg border=no  usemap="#Gallery" >

    ==================

    Was ich will, ist, daß, wenn man über einen Link im Bild fährt, dieser Link erhellt wird (ein anderes Bild dafür), und wenn man wegfährt, es wieder zurück zum ursprünglichen geht. Natürlich brauche ich für meine 4 Links 5 Bilder. Eines als ursprüngliches und jeweils eines für jenen Link, der beim Drüberfahren hell wird.

    Wäre für jede Hilfe sehr dankbar!!!

    MfG,
    Silke

    1. für mich sieht es so aus, das der browser nicht weiß was er aktualisieren soll, gib der map nen anderen namen (z.B. GallaryMap) weil im document sind 2 Elemente mit dem Namen Gallary und das ist das Problem

      Danke für den Tip, hab's probiert, aber leider ist das Ergebnis noch immer das gleiche. Wenn ich über den zweiten Link fahre, funktioniert es super. Aber beim Drüberfahren über den ersten Link erhellt sich dummerweise der zweite. Irgendwas funktioniert da nicht richtig, und ich komm' einfach nicht drauf, was es ist!

      Silke

      1. vielleicht solltest du auch als Parameter mitgeben, was hellgemacht werden soll, bis jetzt wird nur ein Bild gewechselt, aber keine abfrage darüber ob Link1 oder Link2 oder Linkn das ereignis hat

        MfG Ich

        für mich sieht es so aus, das der browser nicht weiß was er aktualisieren soll, gib der map nen anderen namen (z.B. GallaryMap) weil im document sind 2 Elemente mit dem Namen Gallary und das ist das Problem

        Danke für den Tip, hab's probiert, aber leider ist das Ergebnis noch immer das gleiche. Wenn ich über den zweiten Link fahre, funktioniert es super. Aber beim Drüberfahren über den ersten Link erhellt sich dummerweise der zweite. Irgendwas funktioniert da nicht richtig, und ich komm' einfach nicht drauf, was es ist!

        Silke