SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing the contents of another cell

    Hi all,

    I would like a simple table where the user can hover over one of several small cells, and the contents of the main cell changes. An example can be found on the Virgin.net Website right in the middle of the page.

    Can someone point me in the right direction?

    Thanks in advance

    -Sam
    Sam Hastings

  2. #2
    SitePoint Enthusiast powdermonster's Avatar
    Join Date
    Apr 2002
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have seen it done with Dreamweaver before - i know you don't want to use it, but you could always copy and modify the code to your needs
    Keri

    jamesbond-007.info
    cPanel Guide

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol... didn't know you were registered on here Keri

    The thing is I don't actually have Dreamweaver, as I'm totally opposed to any sort of WYSIWYG editor. Don't ask why, I'm just more of a hand-coder type myself

    -Sam
    Sam Hastings

  4. #4
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like they are using some type of JavaScript mouseover thing, but, seeing that I'm not exactly a JS whizz, I don't know exactly how.

    I'll move this to the Javascript forum. You'll get a quicker reply in there.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for doing that Adam... was not sure about which forum to post this in, so I sorta took a chance

    Anyway, I have the problem sorted now, I adapted some code I had in a DHTML book I own. Thanks.

    -Sam
    Sam Hastings

  6. #6
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure. Glad you got it worked out.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  7. #7
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:

    <table style="border:solid 1px black;">
      <
    tr>
        <
    td onmouseover="alert(this.nextSibling.innerHTML)" style="border:solid 1px black;width:250px;">1</td>
        <
    td onmouseover="alert(this.previousSibling.innerHTML)" style="border:solid 1px black;width:250px;">2</td>
      </
    tr>
      <
    tr>
        <
    td onmouseover="alert(this.nextSibling.innerHTML)" style="border:solid 1px black;width:250px;">3</td>
        <
    td onmouseover="alert(this.previousSibling.innerHTML)" style="border:solid 1px black;width:250px;">4</td>
      </
    tr>
    </
    table>
    <
    br />
    <
    table style="border:solid 1px black;">
      <
    tr onmouseover="this.childNodes[0].style.backgroundColor='blue'">
        <
    td style="border:solid 1px black;width:250px;">1</td>
        <
    td style="border:solid 1px black;width:250px;">2</td>
      </
    tr>
      <
    tr onmouseover="this.childNodes[1].style.backgroundColor='blue'">
        <
    td style="border:solid 1px black;width:250px;">3</td>
        <
    td style="border:solid 1px black;width:250px;">4</td>
      </
    tr>
    </
    table>
    <
    br />
    <
    script type="text/javascript">
      function 
    TRelements(what)
      {
        var 
    lenTD what.childNodes.length// length of td elements
       
        
    for (0lenTDi++)
          
    what.childNodes[i].style.backgroundColor='blue'

      
    }
    </script>

    <table style="border:solid 1px black;">
      <tr onmouseover="TRelements(this)">
        <td style="border:solid 1px black;width:250px;" colspan="2">1</td>
        <td style="border:solid 1px black;width:250px;" colspan="2">2</td>
      </tr>
      <tr onmouseover="TRelements(this)">
        <td style="border:solid 1px black;width:250px;">3</td>
        <td style="border:solid 1px black;width:250px;">4</td>
        <td style="border:solid 1px black;width:250px;">5</td>
        <td style="border:solid 1px black;width:250px;">6</td>
      </tr>
    </table> 
    This is just a quick demo... But you should get the point


Bookmarks

Posting Permissions

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