Resolved onmouseover --> images goes gray Need Fix [Archive]

View Full Version : Resolved onmouseover --> images goes gray Need Fix

egturnkey

04-30-2009, 02:52 PM

Hello Friends,

I've set the following page for example and it is working perfect on IE but
at displaying it with FireFox it won't work

Here is direct example link for the page

http://zwark.info/test/x.html

OR you can check the code here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>TEST</title>
<HEAD>

<style>
img
{
filter:gray()
}
</style>

<script type="text/javascript">
function color(elmnt)
{
elmnt.style.filter=false
}

function gray(elmnt)
{
elmnt.style.filter="gray()"
}
</script>

</HEAD>
<BODY>

<p align="center"><img alt="" src="1.gif" onmouseover="color(this)" onmouseout="gray(this)"/></p>

</BODY>
</HTML>

Is there any chance that it works fine with firefox

thanks in advance

Snookerman

04-30-2009, 02:55 PM

CSS filters only work in IE. You will need to create two images and use hover to get it to work in other browsers.

Good luck!

Schmoopy

04-30-2009, 03:24 PM

It shouldn't be too hard to create the original image in grey, I'm sure there are functions in Photoshop or equivalents that convert images to grayscale. The only problem I foresee is if you're wanting to do this with images that are uploaded by users every 5 minutes, going through all of them and converting them will be a tad tedious.

Generally rollovers will be hard coded in though, so converting two or three images shouldn't be too difficult.

egturnkey

04-30-2009, 04:00 PM

thanks, friends for helps me, i will use hover.