homepage Welcome to WebmasterWorld Guest from 54.227.160.102
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
onmouse color change of an image
shweta

10+ Year Member



 
Msg#: 742 posted 11:01 am on Jun 2, 2003 (gmt 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

 

DrDoc

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



 
Msg#: 742 posted 2:01 am on Jun 3, 2003 (gmt 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].

tedster

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



 
Msg#: 742 posted 3:26 am on Jun 3, 2003 (gmt 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.

shweta

10+ Year Member



 
Msg#: 742 posted 12:21 pm on Jun 3, 2003 (gmt 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

shweta

10+ Year Member



 
Msg#: 742 posted 9:11 am on Jun 4, 2003 (gmt 0)

Thanks a lot!

no need to reply.
its done!

-Shweta

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved