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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Applying CSS image opacity technique to a single table

    Hi there, I'm designing a website where on one of the pages, I've decided to use the css image opacity code on certain images so that when the viewer rolls over them they go from an opacity of 50% to 100%. Problem is, I have no clue on how to apply that effect to only one table in the page (the table where the images are located), if I try and use the code for the entire page, it affects my other image links and I don't want that. The code I'm using right now is:

    Code:
    <STYLE type=text/css>
    a:link img {filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;}a:hover img {filter:alpha(opacity=100); -moz-opacity:1.00; opacity:1.00;}a:active img {filter:alpha(opacity=100); -moz-opacity:1.00; opacity:1.00;}a:visited img {filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;}</style>
    Normally this code goes into the header of the page and that's it, but I want to apply that to a single table within the page. If anyone could be so kind as to help me, I would greatly appreciate it, I've been searching the internet all over, but to no avail. Thanks!

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    <!doctype html>
    <style type="text/css">
    #myTable a:link img {
      opacity: 0.5;
    }
    </style>
    <!--[if IE]>
    <style>
    #myTable a:link img {
     filter:alpha(opacity=50);
    }
    </style>
    <![endif]-->
    <p>This table will have the opacity rule applied to it.</p>
    <table id="myTable">
     <tbody>
      <tr>
       <td>Some place.</td>
       <td><a href="/"><img src="/somewhere.jpg" alt="Somewhere."/></a></td>
      </tr>
     </tbody>
    </table>
    <p>This won’t.</p>
    <table>
     <tbody>
      <tr>
       <td>Some place else.</td>
       <td><a href="/"><img src="/somewhere-else.jpg" alt="Somewhere else."/></a></td>
      </tr>
     </tbody>
    </table>
    Basically, use IDs.

  • Users who have thanked Apostropartheid for this post:

    adllop (05-09-2008)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    And don’t use tables.

    (…unless you display tabluar data, that is)

  • Users who have thanked VIPStephan for this post:

    adllop (05-09-2008)

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much for the replies, they were really helpful : )


  •  

    Posting Permissions

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