homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
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

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

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?


<script type="text/javascript">
function color(elmnt)

function gray(elmnt)
Mouse over these image-links:
<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>


can u help me?





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


 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.


 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:


<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 language="javascript" type="text/javascript" src="C:\WINDOWS\Desktop/rollover.js">
function rolloverInit() {}
function rolloverOn() {}
function rolloverOff() {}


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



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.


waiting for reply


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

Thanks a lot!

no need to reply.
its done!


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