Forum Moderators: open
i want to change the color of an image when mouse over.
i have tried following.... but how to get a different color instead of gray?
----------------------------------
<html>
<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>
Mouse over these image-links:
<p>
<a href="/default.asp">
<img border="0" src="C:\My Documents\My Webs/home.jpg" width="130" height="30" onmouseover="color(this)" onmouseout="gray(this)"><br/></a>
<a href="/default.asp">
<img border="0" src="C:\My Documents\My Webs/aboutus.jpg" width="130" height="30" onmouseover="color(this)" onmouseout="gray(this)"><br/></a>
<a href="/default.asp">
<img border="0" src="C:\My Documents\My Webs/developments.jpg" width="130" height="30" onmouseover="color(this)" onmouseout="gray(this)"></a>
</p>
</body>
</html>
-------------------------------------------------
can u help me?
thanks
shweta
A few things... CSS filters are Internet Explorer proprietary, so they will have no effect in other browsers. Since it's an IE only function, you can only gray it. The only other way to dynamically change the color of an image is using a server-side scripting language like PHP [php.net]. But, that would belong in a different forum [webmasterworld.com].
here is my code:
------------------------------------------
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var rolloverImageDirectory = 'images/';
var rolloverImageOffFiles = new Array('home_off.jpg','aboutus_off.jpg','developments_off.jpg','clients_off.jpg','futureplans_off.jpg','contactus_off.jpg');
var rolloverImageOnFiles = new Array('home_on.jpg','aboutus_on.jpg','developments_on.jpg','clients_on.jpg','futureplans_on.jpg','contactus_on.jpg');
var rolloverImageTagNames = new Array('home1','aboutus1','developments1','clients1','futureplans1','contactus1');
//-->
</script>
<script language="javascript" type="text/javascript" src="C:\WINDOWS\Desktop/rollover.js">
<!--
function rolloverInit() {}
function rolloverOn() {}
function rolloverOff() {}
//-->
</script>
</head>
<body onload="rolloverInit();">
<a href="#" onmouseover="rolloverOn('home1');" onmouseout="if (rolloverCurrent!= 'home1') rolloverOff('home1');" onclick="rolloverSetCurrent('home1');">
<img name="home1" id="home1" src="C:\My Documents\My Webs\images/home_off.jpg" border="0" width="130" height="30"></a>
<a href="#" onmouseover="rolloverOn('aboutus1');" onmouseout="if (rolloverCurrent!= 'aboutus1') rolloverOff('aboutus1');" onclick="rolloverSetCurrent('aboutus1');">
<img name="aboutus1" id="aboutus1" src="C:\My Documents\My Webs\images/aboutus_off.jpg" border="0" width="130" height="30"></a>
<a href="#" onmouseover="rolloverOn('developments1');" onmouseout="if (rolloverCurrent!= 'developments1') rolloverOff('developments1');" onclick="rolloverSetCurrent('developments1');">
<img name="developments1" id="developments1" src="C:\My Documents\My Webs\images/developments_off.jpg" border="0" width="130" height="30"></a>
<a href="#" onmouseover="rolloverOn('clients1');" onmouseout="if (rolloverCurrent!= 'clients1') rolloverOff('clients1');" onclick="rolloverSetCurrent('clients1');">
<img name="clients1" id="clients1" src="C:\My Documents\My Webs\images/clients_off.jpg" border="0" width="130" height="30"></a>
<a href="#" onmouseover="rolloverOn('futureplans1');" onmouseout="if (rolloverCurrent!= 'futureplans1') rolloverOff('futureplans1');" onclick="rolloverSetCurrent('futureplans1');">
<img name="futureplans1" id="futureplans1" src="C:\My Documents\My Webs\images/futureplans_off.jpg" border="0" width="130" height="30"></a>
<a href="#" onmouseover="rolloverOn('contactus1');" onmouseout="if (rolloverCurrent!= 'contactus1') rolloverOff('contactus1');" onclick="rolloverSetCurrent('contactus1');">
<img name="contactus1" id="contactus1" src="C:\My Documents\My Webs\images/contactus_off.jpg" border="0" width="130" height="30"></a>
</body>
</html>
-----------------------------------------------------
it supposse to show six buttons and when user mouse over it , it should display the second version of image. (which is having different color)
but it shows nothing when mouse over.
please visit following url.
[dithered.com...]
waiting for reply
thanks
shweta
no need to reply.
its done!
-Shweta
