[JavaScript] onClick in Mouseover script

[BiepoN]

Hallo zusammen,

ich bin dabei ein wenig JavaScript zu erlernen und fing mit einem simplen Mouseover Script an. Das Script wechselt 3 Bilder und stellt sie beim verlassen des linkes (mit dem Mauszeiger (onMouseOut)) diese 3 in den Ursprung zurück. Jetzt möchte ich aber gerne das bei einem Klick die 3 Bilder auf der nächsten Seite so geändert bleiben. Ein kleines Beispiel:

bild[1a]|bild[2a]|bild[3a]|bild[1b]|bild[2b]...usw. Der Mauszeiger geht über einen Link.
bild[xx]|bild[xx]|bild[xx]|bild[1b]|bild[2b]...usw. xx Steht für die neuen Bilder. Wenn ich jetzt klicke sollten die "xx" bleiben. Die Bilder [1b]... sind das gleiche wie [1a]... nur das sie auf einen anderen Link reagieren.

Hier mal mein QuellCode:

<SCRIPT LANGUAGE = "JavaScript">
      <!--
      var js=0;  if ( document.images ) {  js=1;  }
      var dir = "gfx/"
      if(js) {

        unternehmen = new Image();
        unternehmen_01 = new Image();
        unternehmen_01.src = dir + "unternehmen-01.gif";
        unternehmen_01_def = new Image();
        unternehmen_01_def.src = dir + "bg03-01.gif";

        unternehmen_02 = new Image();
        unternehmen_02.src = dir + "unternehmen-02.gif";
        unternehmen_02_def = new Image();
        unternehmen_02_def.src = dir + "bg03-02.gif";

        unternehmen_03 = new Image();
        unternehmen_03.src = dir + "unternehmen-03.gif";
        unternehmen_03_def = new Image();
        unternehmen_03_def.src = dir + "bg03-03.gif";

function img_on_01(img) {
        if(js) {
          document["foto01"].src = eval(img+"_01.src");
          document["foto02"].src = eval(img+"_02.src");
          document["foto03"].src = eval(img+"_03.src");
        }
      }
      function img_off_01(img) {
        if(js) {
          document["foto01"].src = eval(img+"_01_def.src");
          document["foto02"].src = eval(img+"_02_def.src");
          document["foto03"].src = eval(img+"_03_def.src");
        }
      }
  // -->
</script>

Der Link wird so angesprochen.

<area shape="rect" coords="36,97,150,120" href="index.php" onMouseOver="img_on_01('unternehmen')" onMouseOut="img_off_01('unternehmen')">

Kann mir jemand weiter helfen?
Vielen Danke

 

[Sven Mintel]

Ändere die Links dahingehend, dass du ihren Ziel-Urls als Parameter das angeklickte Bild anhängst, also bspw.:

<area shape="rect" coords="36,97,150,120" href="index.php?unternehmen"

Auf der Zielseite kannst du diesen Parameter auf der Zielseite dann über location.search ermitteln und damit die click-Funktion mit dem korrekten Parameter aufrufen.

Mit PHP ginge das natürlich auch.