Torsten: Problem mit aktivem Button

Hallo,

ich habe eine Frage zu einem eigentlich recht einfachen
Javascript.
Vier Button horizontal nebeneinander, bei Klick auf einen der Button ändert sich die Farbe bzw. der Zustand. Soweit kein Problem.
Klickt man einen anderen Button an, springt der zuerst angeklickte in seinen Ursprungszustand und der zuletzt angeklickte ändert seinen Zustand. Auch noch kein Problem.

Hier zu sehen: http://www.ttams.de/scriptproblem/test.htm

Frage: Nun soll aber der erste Button beim ersten Aufruf der Seite bereits gehighlighted bzw. aktiv sein. Erst auf Klick auf einen der anderen solls wieder wie anfänglich beschrieben sein.

Hier das Script:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
var button1a = "b1.gif"
var button1b = "b1h.gif"
var button2a = "b2.gif"
var button2b = "b2h.gif"
var button3a = "b3.gif"
var button3b = "b3h.gif"
var button4a = "b4.gif"
var button4b = "b4h.gif"
var tempbutton = button1b;
var tempimage = button1a;
//-->
</script>

</head>
<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" topmargin="0" leftmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<br>

<table align="left" border="0" cellspacing="0" cellpadding="10" width="300">
 <tr>
  <td><a href="#" onClick="tempbutton.src=tempimage; tempbutton=b1; tempimage=button1a; b1.src=button1b;"><img name="b1" src="b1.gif" width="94" height="14" border="0" alt=""></a></td>
  <td><a href="#" onClick="tempbutton.src=tempimage; tempbutton=b2; tempimage=button2a; b2.src=button2b;"><img name="b2" src="b2.gif" width="94" height="14" border="0" alt=""></a></td>
  <td><a href="#" onClick="tempbutton.src=tempimage; tempbutton=b3; tempimage=button3a; b3.src=button3b;"><img name="b3" src="b3.gif" width="94" height="14" border="0" alt=""></a></td>
  <td><a href="#" onClick="tempbutton.src=tempimage; tempbutton=b4; tempimage=button4a; b4.src=button4b;"><img name="b4" src="b4.gif" width="94" height="14" border="0" alt=""></a></td>
</tr>
</table>
</body>
</html>

Wer weiß Rat?

Danke und Gruß

Torsten

  1. Hallo,

    ich habe eine Frage zu einem eigentlich recht einfachen
    Javascript.
    Vier Button horizontal nebeneinander, bei Klick auf einen der Button ändert sich die Farbe bzw. der Zustand. Soweit kein Problem.
    Klickt man einen anderen Button an, springt der zuerst angeklickte in seinen Ursprungszustand und der zuletzt angeklickte ändert seinen Zustand. Auch noch kein Problem.

    Hier zu sehen: http://www.ttams.de/scriptproblem/test.htm

    Falls du nicht unbedingt das Rad neu erfinden willst http://home.arcor.de/struebig/js/mouse_over/mouse_over.htm
    (funktioniert nicht mit NC 4.x - die Links natürlich schon)

    Struppi.

    1. Hallo,

      ich habe eine Frage zu einem eigentlich recht einfachen Javascript. Vier Button horizontal nebeneinander, bei Klick auf einen der Button ändert sich die Farbe bzw. der Zustand. Soweit kein Problem. Klickt man einen anderen Button an, springt der zuerst angeklickte in seinen Ursprungszustand und der zuletzt angeklickte ändert seinen Zustand. Auch noch kein Problem.

      Hier zu sehen: http://www.ttams.de/scriptproblem/test.htm

      Falls du nicht unbedingt das Rad neu erfinden willst http://home.arcor.de/struebig/js/mouse_over/mouse_over.htm (funktioniert nicht mit NC 4.x - die Links natürlich schon)

      Struppi.

      Danke für Deine Hilfe, genau das was ich brauche, mal sehen ob ich's noch schaffe, das Ganze auch unter NC 4.xx zu laufen zu bringen.

      Diese folgende Version würde auch ja auch unter NC 4.x laufen, leider weiß ich nicht warum der letzte ganz rechte Button nicht funktioniert:

      http://www.ttams.de/scriptproblem/html/directors.html

      Es handelt sich um ein von A. Golive generiertes Script. Ist zwar ziehmlich aufgeblasener Code, funzt aber eigentlich bis auf mein Problem mit dem letzten Button ganz gut.

      Hier der Code der ganzen Seite, falls es Dich interessiert:

      <html>

      <head>                 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">                 <meta name="generator" content="Adobe GoLive 4">                 <title></title>                 <csscriptdict>                         <script><!-- function CSClickReturn () {         var bAgent = window.navigator.userAgent;         var bAppName = window.navigator.appName;         if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))                 return true; // dont follow link         else return false; // dont follow link } CSStopExecution = false;

      function CSAction(array) {         return CSAction2(CSAct, array); } function CSAction2(fct, array) {         var result;         for (var i=0;i<array.length;i++) {                 if(CSStopExecution) return false;                 var actArray = fct[array[i]];                 var tempArray = new Array;                 for(var j=1;j<actArray.length;j++) {                         if((actArray[j] != null) && (typeof(actArray[j]) == "object") && (actArray[j].length == 2)) {                                 if(actArray[j][0] == "VAR") {                                         tempArray[j] = CSStateArray[actArray[j][1]];                                 }                                 else {                                         if(actArray[j][0] == "ACT") {                                                 tempArray[j] = CSAction(new Array(new String(actArray[j][1])));                                         }                                 else                                         tempArray[j] = actArray[j];                                 }                         }                         else                                 tempArray[j] = actArray[j];                 }                 result = actArray0;         }         return result; } CSAct = new Object; CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf("/")+1),10); function IsIE() { return CSAg.indexOf("MSIE") > 0;} function CSIEStyl(s) { return document.all.tags("div")[s].style; } function CSNSStyl(s) { return CSFindElement(s,0); } function CSFindElement(n,ly) { if (CSBVers < 4) return document[n];         var curDoc = ly ? ly.document : document; var elem = curDoc[n];         if (!elem) { for (var i=0;i<curDoc.layers.length;i++) {                 elem = CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}         return elem; } function CSSetImageURL(action) {         var img = null;         if (document.images) {                 if (!IsIE()) img = CSFindElement(action[1],0);                 else img = document.images[action[1]];                 if (img) img.src = action[2];         } }function CSGotoLink(action) {         if (action[2].length) {                 var hasFrame=false;                 for(i=0;i<parent.frames.length;i++) { if (parent.frames[i].name==action[2]) { hasFrame=true; break;}}                 if (hasFrame==true)                         parent.frames[action[2]].location = action[1];                 else                         window.open (action[1],action[2],"");         }         else location = action[1]; } // --></script>                 </csscriptdict>                 <csactiondict>                 <script><!-- CSAct[/CMP/ 'B839B2480'] = new Array(CSSetImageURL,/CMP/ 'peterkleine',/URL/ '../../gfx/dirImages/dir_peterR.gif'); CSAct[/CMP/ 'B839B2631'] = new Array(CSGotoLink,/URL/ 'dirframePeter1.html','dir nameframe'); CSAct[/CMP/ 'B839B2E52'] = new Array(CSGotoLink,/URL/ 'dirframePeter2.html','dir showframe'); CSAct[/CMP/ 'B839B3F33'] = new Array(CSSetImageURL,/CMP/ 'ralphloop',/URL/ '../../gfx/dirImages/dir_ralph.gif');

      CSAct[/CMP/ 'B839B48B4'] = new Array(CSSetImageURL,/CMP/ 'ralphloop',/URL/ '../../gfx/dirImages/dir_ralphR.gif'); CSAct[/CMP/ 'B839B4A46'] = new Array(CSGotoLink,/URL/ 'dirframeRalph1.html','dir nameframe'); CSAct[/CMP/ 'B839B4AB7'] = new Array(CSSetImageURL,/CMP/ 'peterkleine',/URL/ '../../gfx/dirImages/dir_peter.gif'); CSAct[/CMP/ 'B839B4CA8'] = new Array(CSSetImageURL,/CMP/ 'christianpoetschke',/URL/ '../../gfx/dirImages/dir_christian.gif'); CSAct[/CMP/ 'B839B4DE9'] = new Array(CSSetImageURL,/CMP/ 'catharinaroland',/URL/ '../../gfx/dirImages/dir_catharina.gif');

      CSAct[/CMP/ 'B839B51D11'] = new Array(CSSetImageURL,/CMP/ 'christianpoetschke',/URL/ '../../gfx/dirImages/dir_christian.gif'); CSAct[/CMP/ 'B839B52812'] = new Array(CSSetImageURL,/CMP/ 'catharinaroland',/URL/ '../../gfx/dirImages/dir_catharina.gif'); CSAct[/CMP/ 'B839B54313'] = new Array(CSGotoLink,/URL/ 'dirframeRalph2.html','dir showframe');

      CSAct[/CMP/ 'B839B55014'] = new Array(CSSetImageURL,/CMP/ 'christianpoetschke',/URL/ '../../gfx/dirImages/dir_christianP.gif'); CSAct[/CMP/ 'B839B56D15'] = new Array(CSGotoLink,/URL/ 'dirframeChristian1.html','dir nameframe'); CSAct[/CMP/ 'B839B57016'] = new Array(CSGotoLink,/URL/ 'dirframeChristian2.html','dir showframe'); CSAct[/CMP/ 'B839B57917'] = new Array(CSSetImageURL,/CMP/ 'peterkleine',/URL/ '../../gfx/dirImages/dir_peter.gif'); CSAct[/CMP/ 'B839B58418'] = new Array(CSSetImageURL,/CMP/ 'ralphloop',/URL/ '../../gfx/dirImages/dir_ralph.gif'); CSAct[/CMP/ 'B839B59619'] = new Array(CSSetImageURL,/CMP/ 'catharinaroland',/URL/ '../../gfx/dirImages/dir_catharina.gif');

      CSAct[/CMP/ 'B839B5D120'] = new Array(CSSetImageURL,/CMP/ 'catharinaroland',/URL/ '../../gfx/dirImages/dir_catharinaR.gif'); CSAct[/CMP/ 'B839B5DF21'] = new Array(CSGotoLink,/URL/ 'dirframeCatharina1.html','dir nameframe'); CSAct[/CMP/ 'B839B5E322'] = new Array(CSGotoLink,/URL/ 'dirframeCatharina2.html','dir showframe'); CSAct[/CMP/ 'B839B5F323'] = new Array(CSSetImageURL,/CMP/ 'peterkleine',/URL/ '../../gfx/dirImages/dir_peter.gif'); CSAct[/CMP/ 'B839B5FE24'] = new Array(CSSetImageURL,/CMP/ 'ralphloop',/URL/ '../../gfx/dirImages/dir_ralph.gif'); CSAct[/CMP/ 'B839B60E25'] = new Array(CSSetImageURL,/CMP/ 'christianpoetschke',/URL/ '../../gfx/dirImages/dir_christian.gif');

      CSAct[/CMP/ 'B839B60E26'] = new Array(CSSetImageURL,/CMP/ 'serge',/URL/ '../../gfx/dirImages/dir_serge.gif'); CSAct[/CMP/ 'B839B61E27'] = new Array(CSGotoLink,/URL/ 'dirframeSerge1.html','dir nameframe'); CSAct[/CMP/ 'B839B62E28'] = new Array(CSGotoLink,/URL/ 'dirframeSerge2.html','dir showframe'); CSAct[/CMP/ 'B839B63E29'] = new Array(CSSetImageURL,/CMP/ 'serge',/URL/ '../../gfx/dirImages/dir_serge.gif'); CSAct[/CMP/ 'B839B64E30'] = new Array(CSSetImageURL,/CMP/ 'serge',/URL/ '../../gfx/dirImages/dir_serge.gif'); CSAct[/CMP/ 'B839B60E31'] = new Array(CSSetImageURL,/CMP/ 'serge',/URL/ '../../gfx/dirImages/dir_sergeM.gif');

      // --></script>                 </csactiondict>         </head>

      <body bgcolor="#2a4358">  <table border="0" cellpadding="0" cellspacing="0" width="75">      <tr>          <td><img height="49" width="596" src="../../gfx/dirImages/dirframe.gif"></td>         </tr>         <tr>          <td>  <table border="0" cellpadding="0" cellspacing="0" width="326">      <tr>          <td><a href="dopframe.html" csclick="B839B2480,B839B2631,B839B2E52,B839B3F33,B839B51D11,B839B52812" onclick="CSAction(new Array(/CMP/'B839B2480',/CMP/'B839B2631',/CMP/'B839B2E52',/CMP/'B839B3F33',/CMP/'B839B51D11',/CMP/'B839B52812'));return CSClickReturn();"><img height="34" width="117" src="../../gfx/dirImages/dir_peterR.gif" border="0" name="peterkleine"></a></td>          <td><a href="(Leere Referenz!)" csclick="B839B48B4,B839B4A46,B839B4AB7,B839B4CA8,B839B4DE9,B839B54313" onclick="CSAction(new Array(/CMP/'B839B48B4',/CMP/'B839B4A46',/CMP/'B839B4AB7',/CMP/'B839B4CA8',/CMP/'B839B4DE9',/CMP/'B839B54313'));return CSClickReturn();"><img height="34" width="109" src="../../gfx/dirImages/dir_ralph.gif" border="0" name="ralphloop"></a></td>          <td><a href="(Leere Referenz!)" csclick="B839B55014,B839B56D15,B839B57016,B839B57917,B839B58418,B839B59619" onclick="CSAction(new Array(/CMP/'B839B55014',/CMP/'B839B56D15',/CMP/'B839B57016',/CMP/'B839B57917',/CMP/'B839B58418',/CMP/'B839B59619'));return CSClickReturn();"><img height="34" width="135" src="../../gfx/dirImages/dir_christian.gif" border="0" name="christianpoetschke"></a></td>          <td><a href="(Leere Referenz!)" csclick="B839B5D120,B839B5DF21,B839B5E322,B839B5F323,B839B5FE24,B839B60E25" onclick="CSAction(new Array(/CMP/'B839B5D120',/CMP/'B839B5DF21',/CMP/'B839B5E322',/CMP/'B839B5F323',/CMP/'B839B5FE24',/CMP/'B839B60E25'));return CSClickReturn();"><img height="34" width="126" src="../../gfx/dirImages/dir_catharina.gif" border="0" name="catharinaroland"></a></td>             <td><a href="(Leere Referenz!)" csclick="B839B60E26,B839B61E27,B839B62E28,B839B63E29,B839B64E30,B839B60E31" onclick="CSAction(new Array(/CMP/'B839B60E26',/CMP/'B839B61E27',/CMP/'B839B62E28',/CMP/'B839B63E29',/CMP/'B839B64E30',/CMP/'B839B60E31'));return CSClickReturn();"><img height="34" width="126" src="../../gfx/dirImages/dir_serge.gif" border="0" name="serge"></a></td>    <td></td>   </tr>  </table>       </td>         </tr>  </table>     </body> </html>

      Danke nochmal für Deine Hilfe...

      Gruß Torsten

      1. Falls du nicht unbedingt das Rad neu erfinden willst http://home.arcor.de/struebig/js/mouse_over/mouse_over.htm
        (funktioniert nicht mit NC 4.x - die Links natürlich schon)

        Struppi.

        Danke für Deine Hilfe, genau das was ich brauche, mal sehen ob ich's noch schaffe, das Ganze auch unter NC 4.xx zu laufen zu bringen.

        Nö geht nicht, weil ich die events von <img> benutze und die kennt NC 4.x noch nicht. aber warum muss es denn unbedingt sein, dass für unwichtige Sache ein immer seltener Browser unbedingt unterstützt werden muss?

        Struppi.

        1. Falls du nicht unbedingt das Rad neu erfinden willst http://home.arcor.de/struebig/js/mouse_over/mouse_over.htm
          (funktioniert nicht mit NC 4.x - die Links natürlich schon)

          Struppi.

          Danke für Deine Hilfe, genau das was ich brauche, mal sehen ob ich's noch schaffe, das Ganze auch unter NC 4.xx zu laufen zu bringen.

          Nö geht nicht, weil ich die events von <img> benutze und die kennt NC 4.x noch nicht. aber warum muss es denn unbedingt sein, dass für unwichtige Sache ein immer seltener Browser unbedingt unterstützt werden muss?

          Struppi.

          Der Kunde ist ja leider König.

          T.

          1. Der Kunde ist ja leider König.

            Der Kunde ist der Besucher der Inernetseite, wenn dein Auftraggeber mehr Ahnung vom Webdesign hat als du, warum macht er sie nicht selber? Oder andersherum gefragt, sollte es nicht in deinem Interesse liegen mit einem halbwegs vertretbaren Aufwand die Seiten zu machen und unnötige bzw. auch falsche Auftraggeberwünsche ihm auszureden?

            Ich hatte das Skript schon in einer Variante für NC 4.x hab's aber mit Absicht rausgenommen, weil es nur ein übler Workaround war, der unter Umständen mehr kaputt gemacht hatte als es nutzen brachte, während die jetzige Variante elegant, einfach und sehr Wartungsfreundlich ist. es muss keinerlei zusätzlicher JS Code eingefügt werden und es können alle drei mousevents überwacht werden.

            Struppi.