Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    c10
    c10 is offline
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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
    Regular Coder
    Join Date
    Jul 2002
    Location
    This little Earth.
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #3
    c10
    c10 is offline
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    This little Earth.
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:******
    .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>

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    This little Earth.
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #6
    c10
    c10 is offline
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •