Welcome to WebmasterWorld Guest from 54.167.83.224

Forum Moderators: open

Message Too Old, No Replies

onmouse color change of an image

     
11:01 am on Jun 2, 2003 (gmt 0)

New User

10+ Year Member

joined:June 2, 2003
posts:22
votes: 0


hi,
i m a newcomer for java script and dhtml.

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

2:01 am on June 3, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Welcome to Webmaster World!

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].

3:26 am on June 3, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


You could also create a second version of the original image in exactly the colors you want and use a standard rollover script. More bandwidth, but cross-browser safe.
12:21 pm on June 3, 2003 (gmt 0)

New User

10+ Year Member

joined:June 2, 2003
posts:22
votes: 0


thanks for ur suggession.
i tried that rollover script. but facing some problem.

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

9:11 am on June 4, 2003 (gmt 0)

New User

10+ Year Member

joined:June 2, 2003
posts:22
votes: 0


Thanks a lot!

no need to reply.
its done!

-Shweta