OnMouseOver - PHP

Discussion in 'Web-development' started by Gabriel Tibiano, Jul 1, 2011.

  1. Gabriel Tibiano

    Gabriel Tibiano Member

    Joined:
    Nov 21, 2009
    Messages:
    421
    Likes Received:
    4
    Best Answers:
    0
    Hello guys,
    can anyone code this for me?

    [​IMG]

    I want something that, when i put the mouse over the buttom, they change to the icons above..


    [​IMG] --> [​IMG]

    [​IMG] --> [​IMG]


    .. My Code ..​

    PHP:
    1.     <tr>
    2.         <td align="center" class=white colspan=1>
    3.             <a href="http://www.facebook.com" target="blank">
    4.                 <img id="ScreenshotContent" class="ThemeboxContent" src="http://otland.net/images/facebook.png" alt="Siga-nos no Facebook"/>
    5.             </a>
    6.         </td>
    7.             <td align="center" class=white colspan=1><a href="https://twitter.com/#!/anyone" target="blank">
    8.                 <img id="ScreenshotContent" class="ThemeboxContent" src="http://otland.net/images/twitter.png" alt="Siga-nos no Orkut!"/>
    9.             </a>
    10.         </td>
    11.     </tr>
    The directory of images i can put later..​
     
    Last edited: Jul 2, 2011
  2. Cykotitan

    Cykotitan Experienced G'

    Joined:
    Nov 4, 2008
    Messages:
    16,897
    Likes Received:
    809
    Best Answers:
    1
  3. Gabriel Tibiano

    Gabriel Tibiano Member

    Joined:
    Nov 21, 2009
    Messages:
    421
    Likes Received:
    4
    Best Answers:
    0
    thank u Cyko <3
     
  4. Zoom Iker

    Zoom Iker *- Dreaming -*

    Joined:
    Sep 11, 2010
    Messages:
    440
    Likes Received:
    27
    Best Answers:
    0
    You could do it with css too :p
     
  5. Gabriel Tibiano

    Gabriel Tibiano Member

    Joined:
    Nov 21, 2009
    Messages:
    421
    Likes Received:
    4
    Best Answers:
    0
    could u show me how?
     
  6. Core_

    Core_ Well-Known Member

    Joined:
    Jul 9, 2010
    Messages:
    1,551
    Likes Received:
    42
    Best Answers:
    0
    .facebookbutton {
    background-image: url(imglink);
    opacity: 1.0;
    }
    .fabebookbutton:hover {
    opacity: .8;
    }
     
  7. Zonet

    Zonet Web Developer

    Joined:
    Sep 1, 2008
    Messages:
    4,375
    Likes Received:
    44
    Best Answers:
    0
    up - you forgot width & height...
    HTML:
    1.  
    2. .facebook {
    3.     background: url('http://img818.imageshack.us/img818/6088/facebookbi.png');
    4.     width: 64px;
    5.     height: 64px;
    6. }
    7. .facebook:hover {
    8.     opacity: 0.8;
    9. }
    10.  
    Use example:
    HTML:
    1.  
    2. <a href="your_link_here"><div class="facebook"></div></a>
    Replace your_link_here to your link.
     
  8. Gabriel Tibiano

    Gabriel Tibiano Member

    Joined:
    Nov 21, 2009
    Messages:
    421
    Likes Received:
    4
    Best Answers:
    0
    thank you guys
     
  9. Believer

    Believer Aashora.net

    Joined:
    Aug 26, 2010
    Messages:
    423
    Likes Received:
    10
    Best Answers:
    0
    hmm how to do it on table lines?

    etc. when mouse if pointed on one of those lines it will appear light or something..
    [​IMG]
     
  10. Feloth

    Feloth =)

    Joined:
    Feb 16, 2008
    Messages:
    2,110
    Likes Received:
    13
    Best Answers:
    0
    Give your table a class, example .tableClass

    Then add this to your CSS, makre sure your td don't have any background defined.
    HTML:
    1. .tableClass tr {
    2.     background-color:#EAEAEA;
    3. }
    4. .tableClass tr:hover {
    5.     background-color:#FFF;
    6. }
     
  11. webtimize

    webtimize 192.168.1.1/24

    Joined:
    Oct 3, 2011
    Messages:
    164
    Likes Received:
    18
    Best Answers:
    0
    Better be googlin'
     

Share This Page

Loading...