SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot Matt_M's Avatar
    Join Date
    Sep 2004
    Location
    Oregon
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select radio button and change style when table cell is clicked?

    Hi,

    I have this code that changes the color of the table cell when it is moused over, but I would like to also have it do this:

    select radio button when cell is clicked.
    change class to blue3 when clicked and leave it like that until another is clicked.
    Continue changing color on mouseover.

    Can someone please give me the code to do this?

    Thanks, Matt


    Code:
    td.blue { 
    font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
      border: 0px; 
      background: #71B9FF; 
    } 
    td.blue2 { 
    font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
      border: 0px; 
      background: #C1E0FF;
    } 
    td.blue3 { 
    font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
      border: 0px; 
      background: #0000FF;
    }
    Code:
    <td class="blue" onmouseover="this.className='blue2'" onmouseout="this.className='blue'" align="center"><img src="images/asdf.gif" width="114" height="149"><br><input type="radio" name="asdf" value="asdf">
    asdf</td>

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
     <style type="text/css"> 
      td.blue { 
    font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
      border: 0px; 
      background: #71B9FF; 
    } 
    td.blue2 { 
    font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
      border: 0px; 
      background: #C1E0FF;
    } 
    td.blue3 { 
    font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
      border: 0px; 
      background: #0000FF;
    }
    </style>
    <table><tr>
    <td class="blue" onclick="document.getElementById('rad1').checked='true'; this.className='blue3';" onmouseover="this.className='blue2'" onmouseout="this.className='blue'" align="center"><img src="images/asdf.gif" width="114" height="149"><br><input type="radio" name="asdf" id="rad1" value="asdf">
    asdf</td>
    <td class="blue" onclick="document.getElementById('rad2').checked='true'; this.className='blue3';" onmouseover="this.className='blue2'" onmouseout="this.className='blue'" align="center"><img src="images/asdf.gif" width="114" height="149"><br><input type="radio" name="asdf" id="rad2" value="asdf">
    asdf</td>
    </tr>
    </table>

  3. #3
    SitePoint Zealot Matt_M's Avatar
    Join Date
    Sep 2004
    Location
    Oregon
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks muazzez, I appreciate your help. It is almost working the way I'd like. I would like the last cell clicked to stay on blue3 until another one is clicked though.

    Thanks, Matt

  4. #4
    SitePoint Zealot Matt_M's Avatar
    Join Date
    Sep 2004
    Location
    Oregon
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can someone please modify this to make the last cell clicked stay on blue3 until another one is clicked? the other cells should still change from blue1 to blue2 when moused over.

    Thanks, Matt

  5. #5
    SitePoint Zealot Matt_M's Avatar
    Join Date
    Sep 2004
    Location
    Oregon
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?


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
  •