Welcome to WebmasterWorld Guest from 54.167.175.218

Forum Moderators: open

onmouse color change of an image

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

10+ Year Member



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 Jun 3, 2003 (gmt 0)

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



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 Jun 3, 2003 (gmt 0)

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



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 Jun 3, 2003 (gmt 0)

10+ Year Member



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 Jun 4, 2003 (gmt 0)

10+ Year Member



Thanks a lot!

no need to reply.
its done!

-Shweta

 

Featured Threads

Hot Threads This Week

Hot Threads This Month