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 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    46
    Thanks
    7
    Thanked 0 Times in 0 Posts

    hover image to grayscale

    is there a code to where when you hover over an image it changes to grayscale/black&white?

    thanks

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Last edited by effpeetee; 11-01-2007 at 08:05 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    And here's the code.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
     <head>
      <title>:hover pseudo-class</title>
      <style type="text/css">p:hover { background-color : lime }
    a:hover { background-color : lime }
    
    tr:hover { background-color : green }
    td:hover { background-color : lime }
    
    table { border-spacing: 5px; }</style>
      <link rel="first" href="css3-modsel-1.html" title="Groups of selectors">
      <link rel="prev" href="css3-modsel-17.html" title=":visited pseudo-class">
      <link rel="next" href="css3-modsel-18a.html" title=":hover pseudo-class on links">
      <link rel="last" href="css3-modsel-d5e.html" title="NEGATED :indeterminate with :checked">
      <link rel="up" href="./index.html">
      <link rel="top" href="../../index.html">
     </head>
     <body>
    <p>The background color of this paragraph should turn to green when
       the mouse pointer hovers either its text (<strong>here</strong>) or its whitespace background, <strong>here</strong>:</p>
    <address>The background color of <a href="#foo">this anchor (<strong>here</strong>)</a> should turn to green when the pointing device hovers over it.</address>
    <table>
     <tbody>
      <tr>
       <td>The cells in</td>
       <td>this table</td>
       <td>should go</td>
      </tr>
      <tr>
       <td>green when</td>
       <td>you hover</td>
       <td>the pointing</td>
      </tr>
      <tr>
       <td>device over</td>
       <td>them (<strong>here</strong>).</td>
       <td></td>
      </tr>
      <tr>
       <td>The rows in</td>
       <td>this table</td>
       <td>should go</td>
      </tr>
      <tr>
       <td>dark green</td>
       <td>when the</td>
       <td>pointing device</td>
      </tr>
      <tr>
       <td>is over the</td>
       <td>cells <strong>there</strong>:</td>
       <td></td> <!-- remove this cell to make an evil test; row should still go green, but cell should not -->
      </tr>
      <tr>
       <td>And <strong>here</strong>:</td>
       <td></td>
       <td>(blank cells).</td>
      </tr>
     </tbody>
    </table>
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    46
    Thanks
    7
    Thanked 0 Times in 0 Posts
    thanks

    would this work?

    img {filter: none; }
    img:hover {filter:gray}
    a:hover img{filter:gray}

  • #5
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    I dont think he's talking about a hover drop down menu...simply a hover function.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by effpeetee View Post
    Iím afraid thatís the wrong answer here. The OP was asking if he could turn an image (most likely a colour image) to grayscale on mouseover. Thatís something substantially different than just changing the color of an element.

    tylerh, this is only possible if you actually use two images, one with colors and then the same one in grayscale (previously converted in a graphic editor). Then you can use an image swap script (JavaScript) or a CSS image replacement/mouseover technique to do what you want.

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    46
    Thanks
    7
    Thanked 0 Times in 0 Posts
    thanks for the help

    those worked, but if i made a grayscale version of the color picture i could just use this i guess

    Code:
    <a href="#"><img src="colorimage.jpg" onmouseover="this.src='grayscaleimage.jpg'" onmouseout="this.src='colorimage.jpg'" /></a>

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    In fact, I just realized that Iíve used that method, too (only vice versa: grayscale to color), on my first and personal website. Iíve taken the CSS path, though.


  •  

    Posting Permissions

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