Is it possible to get rollover images, So that when you roll over them they go grey, But is it possible to do without making all of the image grey?
Rollover Images
| Twikki wrote: |
| Is it possible to get rollover images, So that when you roll over them they go grey, But is it possible to do without making all of the image grey? |
Several ways to do that - or something similar at least. One way to do something similar (the image isn't actually turned to greyscale, just faded) would be like:
| Code: |
| <a class="rollover" href="whatever"><img src="whatever.jpg" /></a> |
And then some CSS like:
| Code: |
|
a.rollover img { border: 0; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50); } a.rollover:hover img { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); } |
This will simply make the image semi-transparent when you move the mouse over it (so it'll blend with the background). You can change the 0.5 and 50 values in "a.rollover img" to make it a different opacity. If you need to blend with a colour different from the background, it'll require a bit more work. I'll just put an example up at:
http://kaneda.frih.net/rolltest.html
If you want actual greyscale images, and it should work in all browsers, yes, you have to create them in a graphics program one by one - or you'll have to use server side solutions like the GD library.
EDIT: Note: this has only been tested in Firefox 1.5 and IE 6.0 - haven't actually ever used this approach. But should work in Safari, Opera etc. too. And most likely IE5.5 and earlier versions of Firefox/Mozilla/Netscape.
There's one I use on my website for the hell of it. But it only works in Internet Explorer:
It makes the whole image perfectly grayscale, though, but yeah, just thought I'd post it in case you want to try it out.
Only other way I can think of to do what you want to do would be to create a grayscale image and leave the colours you want in it. Then just code it as a regular image rollover. Sometimes it's just easier the ghetto way. lol
-Yazz
| Code: |
| <img src="images/photo.jpg" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'" width="100px" height="100px"> |
It makes the whole image perfectly grayscale, though, but yeah, just thought I'd post it in case you want to try it out.
Only other way I can think of to do what you want to do would be to create a grayscale image and leave the colours you want in it. Then just code it as a regular image rollover. Sometimes it's just easier the ghetto way. lol
-Yazz
yazz, something tellsme that wont work in windows 2000!!! but am not sure though.
does anyoe have windows 2000?????
does anyoe have windows 2000?????
i dun think theres sumthing like that..am i right ? i tot it works in any os..
| aningbo wrote: |
| yazz, something tellsme that wont work in windows 2000!!! but am not sure though.
does anyoe have windows 2000????? |
Hmm, I don't know... I don't even know anyone who uses windows 2000, lol.
i do hope not.
Yazz' method should work just fine with Windows 2000. The only things required are Internet Explorer 4 or newer, DirectX, and javascript enabled, obviously. All of these are included with Windows 2000, and JS is enabled by default.
You can make it work without javascript by removing all those onmouse**** events, and do it through CSS instead (using :hover). This, again, requires that the images are embedded in an <a> tag, however (the <a> tag doesn't need to link to anything, however).
You can make it work without javascript by removing all those onmouse**** events, and do it through CSS instead (using :hover). This, again, requires that the images are embedded in an <a> tag, however (the <a> tag doesn't need to link to anything, however).
the sure way to do that that won´t fail is to use GD image library whith PHP to make the gray images dynamically for each button.
So you don´t have to worry for the second image and compatibility.
go to [url]boutell.com[/url] , the creator of GD
So you don´t have to worry for the second image and compatibility.
go to [url]boutell.com[/url] , the creator of GD
 |