#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Nah
    Posts
    15
    Rep Power
    0

    Mouse over questions. n00b. :o


    Ok, I have a neat design idea, but no idea how to do it outside of Flash. :O

    I'd like to have a table of...mmm, 'bout 10 columns, 3 rows of square cells. Underneath that would be a single cell with a spacing equal to the width of the table. When the cursor goes over any of the 30 cells, that big lower cell's text changes depending on what cell is mouseovered.

    So like this:

    ___________
    |oooooooooo|
    |oooooooooo|
    |oooooooooO|
    |__________|
    |text for 30th|
    |__________|

    O = mouseovered cell
    o = other cell
    text for 30th = text that displays, which changes depending on which cell is selected.

    If it helps, I plan on using pictures in each of the 30 cells.

    I don't know how I can describe it any better. :-/

    If you're kind enough to answer, please explain how the coding works. I'm pretty HTML savvy, I think, but lost with Java.

    Thanks in advance.

    Edit again: One last thing. If you want to see how this will be used, my homepage is at http://www.angelfire.com/ego/mrtastee18/index.html. It'll be in the games folder!
    Last edited by Not Tony Danza; December 1st, 2003 at 11:21 PM.
  2. #2
  3. Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Location
    London, UK
    Posts
    4,005
    Rep Power
    2795
    Bit of a mouthful:

    Code:
    <html>
     <head>
      <script>
       function shwTxt(td){
        var newTxt = new Array();
        newTxt[0]  = ""; //Clear Text
        newTxt[1]  = "Text for cell 1";
        newTxt[2]  = "Text for cell 2";
        newTxt[3]  = "Text for cell 3";
        newTxt[4]  = "Text for cell 4";
        newTxt[5]  = "Text for cell 5";
        newTxt[6]  = "Text for cell 6";
        newTxt[7]  = "Text for cell 7";
        newTxt[8]  = "Text for cell 8";
        newTxt[9]  = "Text for cell 9";
        newTxt[10] = "Text for cell 10";
        newTxt[11] = "Text for cell 11";
        newTxt[12] = "Text for cell 12";
        newTxt[13] = "Text for cell 13";
        newTxt[14] = "Text for cell 14";
        newTxt[15] = "Text for cell 15";
        newTxt[16] = "Text for cell 16";
        newTxt[17] = "Text for cell 17";
        newTxt[18] = "Text for cell 18";
        newTxt[19] = "Text for cell 19";
        newTxt[20] = "Text for cell 20";
        newTxt[21] = "Text for cell 21";
        newTxt[22] = "Text for cell 22";
        newTxt[23] = "Text for cell 23";
        newTxt[24] = "Text for cell 24";
        newTxt[25] = "Text for cell 25";
        newTxt[26] = "Text for cell 26";
        newTxt[27] = "Text for cell 27";
        newTxt[28] = "Text for cell 28";
        newTxt[29] = "Text for cell 29";
        newTxt[30] = "Text for cell 30";
    
        document.getElementById('txtDisp').innerHTML = newTxt[td];}
      </script>
     </head>
     <body>
    
      <table>
       <tr>
        <td><img src="" onMouseOver="shwTxt(1);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(2);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(3);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(4);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(5);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(6);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(7);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(8);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(9);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(10);" onMouseOut="shwTxt(0);"></td>
       </tr>
       <tr>
        <td><img src="" onMouseOver="shwTxt(11);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(12);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(13);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(14);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(15);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(16);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(17);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(18);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(19);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(20);" onMouseOut="shwTxt(0);"></td>
       </tr>
       <tr>
        <td><img src="" onMouseOver="shwTxt(21);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(22);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(23);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(24);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(25);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(26);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(27);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(28);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(29);" onMouseOut="shwTxt(0);"></td>
        <td><img src="" onMouseOver="shwTxt(30);" onMouseOut="shwTxt(0);"></td>
       </tr>
       <tr>
        <td colspan=10 align=center id=txtDisp></td>
       </tr>
    
     </body>
    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Nah
    Posts
    15
    Rep Power
    0
    oh man, thanks a lot. thank you thank you thank you!!!

IMN logo majestic logo threadwatch logo seochat tools logo