...
PDA

hover image to grayscale

tylerh
11-01-2007, 06:47 PM
is there a code to where when you hover over an image it changes to grayscale/black&white?

thanks :)
effpeetee
11-01-2007, 07:02 PM
http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/css3-modsel-18.html

Is this what you mean

Frank

http://www.w3.org/TR/REC-CSS2/selector.html

http://www.w3.org is a great source of info.
effpeetee
11-01-2007, 07:08 PM
And here's the 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>
tylerh
11-01-2007, 07:11 PM
thanks

would this work?

img {filter: none; }
img:hover {filter:gray}
a:hover img{filter:gray}
kosstr12
11-01-2007, 07:12 PM
I dont think he's talking about a hover drop down menu...simply a hover function.
VIPStephan
11-01-2007, 07:15 PM
http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/css3-modsel-18.html

Is this what you mean

Frank

http://www.w3.org/TR/REC-CSS2/selector.html

http://www.w3.org is a great source of info.

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 (http://en.wikipedia.org/wiki/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 (http://www.wellstyled.com/css-nopreload-rollovers.html) to do what you want.
tylerh
11-01-2007, 07:25 PM
thanks for the help :D

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


<a href="#"><img src="colorimage.jpg" onmouseover="this.src='grayscaleimage.jpg'" onmouseout="this.src='colorimage.jpg'" /></a>
VIPStephan
11-01-2007, 08:38 PM
In fact, I just realized that I’ve used that method, too (only vice versa: grayscale to color), on my first and personal website (http://stephankrause.com/home_e.htm). I’ve taken the CSS path, though.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum