Web Analytics Made Easy -
StatCounter Something simple? color changes onClick and Mouse over? not in this case! - CodingForum

Announcement

Collapse
No announcement yet.

Something simple? color changes onClick and Mouse over? not in this case!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Something simple? color changes onClick and Mouse over? not in this case!

    I'm trying to create a table with 6 cells
    - each cell has a different background color
    - on mouse over each cell turns gray
    - on mouse out each cell returns to its original color
    - on click the color changes and this color has to stay untill
    another cell is clicked (then it returns to its original color.)
    each onClick color is different for each cell just aswell

    I got this to be done but:
    - on click it did show the right color but this only lasted the
    duration of the click itself.

    I found another script but:
    - then all the cells are white on mouse over the specific cell turns
    orange (that goes for all cells, they all had a mouse over color
    orange)
    They all had the onClick color green. (the good part for me was
    it kept the onClick color after the click but that's all.

    Is this impossible???
    it is to me

  • #2
    u should probably try to combine the two scripts.

    why don't u post them both here, especially the second one(the one that keeps the onclick color)
    'If you don't stand for something, you'll fall for anything.'

    Comment


    • #3
      The first one that works without keeping the color after the click is:
      <tr>
      <td width="180" height="45" bgcolor="#b7a0c7"
      onMouseOver="this.style.background='#666666';"
      onMouseOut="this.style.background='#b7a0c7';"
      onClick="this.style.background='#6c3a8b';" colspan="2">
      <div style="letter-spacing:1px" align="center"> <a href="index2.shtml?welkom.html" style="text-decoration:none;">
      <b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">INTRODUCTIE</font></b></a>
      </div>
      </td>
      <!--einde knop intro-->
      <!--knop activiteit-->
      <td height="45" width="180" bgcolor="#9dd4f5"
      onMouseOver="this.style.background='#666666';"
      onMouseOut="this.style.background='#9dd4f5';"
      onClick="this.style.background='#6c3a8b';" colspan="2">
      <div style="letter-spacing:1px" align="center"> <a href="index2.shtml?activiteit.html" style="text-decoration:none;">
      <b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">
      DE ACTIVITEITEN</font></b></a> </div>
      </td>
      </tr>
      <!--einde knop activiteit-->
      <tr>
      <!--knop bedrijfsprofiel-->
      <td width="180" height="45" bgcolor="#fad59a"
      onMouseOver="this.style.background='#666666';"
      onMouseOut="this.style.background='#fad59a';"
      onClick="this.style.background='#6c3a8b';" colspan="2">
      <div style="letter-spacing:1px" align="center"> <a href="index2.shtml?profiel.html" style="text-decoration:none;">
      <b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">BEDRIJFSPROFIEL</font></b></a>
      </div>
      </td>
      <!--einde knop bedrijfsprofiel-->
      <!--knop adressen-->
      <td height="45" width+"180" bgcolor="#cdbf9d"
      onMouseOver="this.style.background='#666666';"
      onMouseOut="this.style.background='#cdbf9d';"
      onClick="this.style.background='#6c3a8b';" colspan="2">
      <div style="letter-spacing:1px" align="center"> <a href="index2.shtml?adres.html" style="text-decoration:none;">
      <b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">ADRESSEN</font></b></a>
      </div>
      </td>
      <!--einde knop adressen-->
      <!--knop kwaliteitsproducten-->
      </tr>
      <tr>
      <td width="180" height="45" bgcolor="#1bb137"
      onMouseOver="this.style.background='#666666';"
      onMouseOut="this.style.background='#1bb137';"
      onClick="this.style.background='#1bb137';" colspan="2">
      <div style="letter-spacing:0,5px" align="center"> <a href="index.shtml?product.html" style="text-decoration:none;">
      <b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">KWALITEITS
      PRODUCTEN</font></b></a> </div>
      </td>
      <!--einde knop kwaliteitsproducten-->
      <!--knop DMail-->
      <td height="45" width="180" bgcolor="#f9c2a5"
      onMouseOver="this.style.background='#666666';"
      onMouseOut="this.style.background='#f9c2a5';"
      onClick="this.style.background='#1bb137';" colspan="2">
      <div style="letter-spacing:1px" align="center"> <a href="index2.shtml?DM.html" style="text-decoration:none;">
      <b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">DIRECT
      MAIL</font></b></a> </div>
      </td>
      <!--einde knop DMail-->
      </tr>
      <tr>
      <td width="180" height="1" bgcolor="#6c3a8b" colspan="2"> <img src="images/tabel.gif" width="180" height="1"></td>
      <td width-"180" height="1" bgcolor="#6c3a8b" colspan="2"> <img src="images/tabel.gif" width="180" height="1"></td>
      </tr>
      <tr>
      <td width="179" bgcolor="#6c3a8b" rowspan="4">&nbsp;</td>
      <td width="1" bgcolor="#6c3a8b" rowspan="4"><img src="images/tabelv.gif" width="1" height="260"></td>
      <td width="180" bgcolor="#6c3a8b" height="65">
      <div style="letter-spacing:1px" align="center"> <a href="vsr.shtml?vsrnl.html" style="text-decoration:none;">
      <b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">VAN
      STOLK &amp; REESE<br>NL</font></b></a> </div>
      </td>
      </tr>


      The second one that works with keeping the color after the click (but is based on a table with all the cells having the same specifications) is:

      <html>
      <head>
      <STYLE>TD {position: relative}</style>
      <script language="JavaScript">
      // This is a cross-browser (IE5.5 & NN4.7) cell background changer
      //
      var oncell = "c0"
      function chgColor(celno)
      {
      var chgcell
      if (document.layers) { //browser is NN
      for (var i = 1; i < 5; i++)
      {
      chgcell = "window.document.c" + i + ".bgColor='white'";
      eval(chgcell);
      }
      chgcell = "window.document."+ celno + ".bgColor='orange'";
      }
      else // assume IE5
      {for (var index =1; index < 5; index++)
      {
      clrIt = "document.getElementById('c"+ index +"').bgColor='white'";
      eval(clrIt);
      }
      chgcell = "document.getElementById('"+ celno + "').bgColor='orange'";
      }
      eval(chgcell);

      }

      function overm(celno)
      { var chgcell
      if (document.layers) { // browser is NN
      chgcell = "window.document."+ celno + ".bgColor='yellow'";
      }
      else //assume IE
      {
      chgcell = "document.getElementById('"+ celno + "').bgColor='yellow'";
      }
      eval(chgcell);
      }

      function outm(celno)
      { var chgcell
      if (document.layers) { // browser is NN
      chgcell = "window.document."+ celno + ".bgColor='white'";
      }
      else //assume IE
      {chgcell = "document.getElementById('"+ celno + "').bgColor='white'";
      }
      eval(chgcell);
      }
      </script>
      </head>
      <body>
      Mouse over changes cell color to yellow, click changes it to orange. <br>
      Click on another cell, changes previous cell to white and changes current to orange.<br>
      This works in IE 5.5 and NN 4.7<br>


      <table border="1">
      <tr>
      <td id="c1"><a href="#"
      onClick="oncell = 'c1'; chgColor('c1');"
      onMouseover="if (oncell != 'c1') {overm('c1');}"
      onMouseout="if (oncell != 'c1') {outm('c1');}">cell 1</a></td>
      <td id="c2"><a href="#"
      onClick="oncell = 'c2'; chgColor('c2');"
      onMouseover="if (oncell !='c2') {overm('c2');}"
      onMouseout="if (oncell !='c2') {outm('c2');}">cell 2</a></td>
      <td id="c3"><a href="#"
      onClick="oncell = 'c3'; chgColor('c3');"
      onMouseover="if (oncell !='c3') {overm('c3');}"
      onMouseout="if (oncell !='c3') {outm('c3');}">cell 3</a></td>
      <td id="c4"><a href="#"
      onClick="oncell = 'c4'; chgColor('c4');"
      onMouseover="if (oncell !='c4') {overm('c4');}"
      onMouseout="if (oncell !='c4') {outm('c4');}">cell 4</a></td>
      </tr>
      </table>
      </body>
      </html>

      Comment


      • #4
        Right then, here it is. It oughta work on IE, because I use IE. I'm afraid cross-brower compatible scripting isn't my line at the moment, so u'll have to do something about NN.
        This script keeps every cell's color different, every mouseover is gray, and every onclick color depends on the cell's own color. change the colors in the styles for ur own colors.
        hope this helps!
        ...and don't forget -- nothing is ever impossible!



        <html>
        <head>
        <style>

        .td1{background-color:CBD1F4}
        .td2{background-color:C2EFC5}
        .td3{background-color:F6D0F8}
        .td4{background-color:FFE9D3}
        .td5{background-color:EBECB9}
        .td6{background-color:BBF7F1}

        .tdover{background-color:C6C6C9}

        .tdclick1{background-color:7899D4}
        .tdclick2{background-color:86B65C}
        .tdclick3{background-color:violet}
        .tdclick4{background-color:F28768}
        .tdclick5{background-color:gold}
        .tdclick6{background-color:43C9D4}


        </style>
        <script language="JavaScript">
        var oncell="";

        function changeonclick(thiscellno){
        var colorIt;
        for(var i=1;i<7;i++){
        colorIt=document.getElementById('c'+i);
        colorIt.className="td"+i;
        }
        var activecell="c"+thiscellno;
        var clickedcell=document.getElementById(activecell);
        outclass="tdclick"+thiscellno;
        clickedcell.className=outclass;
        }

        function overcell(tdID){
        var el=document.getElementById(tdID);
        el.className="tdover";
        }

        function outcell(cellnumber){
        var thecell="c"+cellnumber;
        var el=document.getElementById(thecell);
        el.className='td'+cellnumber;
        }


        </script>
        </head>

        <body>

        <BR>

        <table style="width:40%; height:40%; cellpadding="10" cellspacing="1">
        <tr>
        <td id="c1" class="td1"
        onclick="oncell='c1';changeonclick('1')"
        onMouseover="if (oncell!='c1'){overcell('c1');}"
        onMouseout="if (oncell!='c1') {outcell('1');}"
        >cell 1</a></td>
        <td id="c2" class="td2"
        onclick="oncell='c2';changeonclick('2')"
        onMouseover="if (oncell!='c2'){overcell('c2');}"
        onMouseout="if (oncell!='c2') {outcell('2');}"
        >cell 2</a></td></tr>
        <tr>
        <td id="c3" class="td3"
        onclick="oncell='c3';changeonclick('3')"
        onMouseover="if (oncell!='c3'){overcell('c3');}"
        onMouseout="if (oncell!='c3') {outcell('3');}"
        >cell 3</a></td>
        <td id="c4" class="td4"
        onclick="oncell='c4';changeonclick('4')"
        onMouseover="if (oncell!='c4'){overcell('c4');}"
        onMouseout="if (oncell!='c4') {outcell('4');}"
        >cell 4</a></td></tr>
        <tr>
        <td id="c5" class="td5"
        onclick="oncell='c5';changeonclick('5')"
        onMouseover="if (oncell!='c5'){overcell('c5');}"
        onMouseout="if (oncell!='c5') {outcell('5');}"
        >cell 5</a></td>
        <td id="c6" class="td6"
        onclick="oncell='c6';changeonclick('6')"
        onMouseover="if (oncell!='c6'){overcell('c6');}"
        onMouseout="if (oncell!='c6') {outcell('6');}"
        >cell 6</a></td></tr>
        </table>
        </body>
        </html>
        'If you don't stand for something, you'll fall for anything.'

        Comment


        • #5
          uh...just noticed after posting, i forgot the 'var' before the variable 'outclass', in the 'changeonclick' function...i dunno but it might make a diff...
          'If you don't stand for something, you'll fall for anything.'

          Comment


          • #6
            SO MANY THANKS!!!
            I'll check out the vars, it did already seem to work anyway, but i'll look at it.
            Indreamweaver the </a> does seem to be there all on its own.

            many thanks and indeed nothing seem to be impossible.
            As soon as the site is running i'll post the url. It might be nice to se the result!

            greetings christien

            Comment

            Working...
            X