...

View Full Version : Quick Help



[Unknown]
05-08-2006, 09:10 PM
Hey



<td onmouseover="this.style.borderColor='#FFAE5B'" onmouseout="this.style.borderColor='#AFAFAF'">


I have this code, in addition to changing the border color on mouseover / mouseout, i want to change the background image.

Can anyone help me?

Beagle
05-08-2006, 09:22 PM
either add more statements, or create a function:



<td onmouseover="this.style.borderColor='#FFAE5B'" onmouseout="this.style.borderColor='#AFAFAF';this.style.backgroundImage='url(\"x.jpg\")';">




<td onmouseover="tdMouseOverFunction();" onmouseout="tdMouseOutFunction();">

<script type="text/javascript">
function tdMouseOverFunction()
{
this.style.borderColor='#FFAE5B';
this.style.backgroundImage='url("y.jpg")';
}

function tdMouseOutFunction()
{
this.style.borderColor='#AFAFAF';
this.style.backgroundImage='url("x.jpg")';
}

[Unknown]
05-08-2006, 09:40 PM
Oddly enough, the background image doesn't change :-\

Arbitrator
05-08-2006, 11:26 PM
this.style.borderColor='#FFAE5B';
this.style.backgroundImage='url("y.jpg")'; It's probably because you need to escape the double quotation marks with backslashes since they're special characters in Java, like so:

this.style.backgroundImage = "url(\"y.jpg\")";

By the way, you can use either single or double quote marks to surround a string; I prefer double so I changed them. It also conveniently illustrates why double quote marks need to be escaped. Since quote marks aren't required inside the URL call (url()), you can remove them altogether if you want to save yourself the trouble; I personally keep them as a matter of convention.

Also you can just use the shorthand property background to do the same thing like in CSS; that's what they're based on anyway. Example:

this.style.background = "url(\"y.jpg\")";
this.style.background = "#000 url(\"y.jpg\") top center no-repeat fixed";

[Unknown]
05-09-2006, 12:03 AM
It still doesn't work, im trying to fetch the image for a sub directory, could that be it?

/css/images/image.gif



<script type="text/javascript">
function tdMouseOverFunction()
{
this.style.borderColor='#FFAE5B';
this.style.backgroundImage='url(\"css/images/image2.gif\")';
}

function tdMouseOutFunction()
{
this.style.borderColor='#AFAFAF';
this.style.backgroundImage='url(\"css/images/image.gif\")';
}
</script>


Am I doing something wrong? This just isn't working for me :-\

[Unknown]
05-10-2006, 12:09 AM
anyone?

Arbitrator
05-10-2006, 12:29 AM
Try escaping the forward slashes with a backslash before them like I escaped the double quotation marks.

this.style.backgroundImage='url(\"css\/images\/image2.gif\")';



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum