Page 1 of 1

Problem changing css background-image in javascript function

Posted: Mon Jan 22, 2007 2:14 pm
by jdhorton77
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I have a menu file that I'm wanting to change images when you hover over the <a> tag, or when you press the mouse button. I thought I had it right but when the page loads up it acts like the javascript is malfunctioning. Here is my html tag.

[syntax="html"]
<dt id="menu1" onclick="javascript:show('smenu1');" onMouseOver="javascript:buttonUp('menu1');" onMouseDown="javascript:buttonDown('menu1');" onMouseUp="javascript:buttonUp('menu1');" onMouseOut="javascript:buttonFlat('menu1');">Employees</dt>
here is the javascript code:

Code: Select all

function buttonUp(id){
document.getElementById(id).style.background-image='url("images/buttonUp.jpg")';
}

function buttonDown(id){
document.getElementById(id).style.background-image="url('images/buttonDown.jpg')";
}

function buttonFlat(id){
document.getElementById(id).style.background-image="url('images/buttonFlat.jpg')";
}
Thanks for any help given.


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Mon Jan 22, 2007 2:22 pm
by pickle
A couple things:
  1. You don't need to put "javascript:" in onclick, onmouseover, etc values. They are javascript constructs so it's not necessary.
  2. If you keep onclick, onmouseover, etc all lowercase, you won't get validation errors
  3. Javascript doesn't know about "background-image". I'll bet you're getting lots of errors about not knowing what the variable 'background' and 'image' are. Change that to 'backgroundImage' & it should work.
  4. I don't see any definition for the show() function.
  5. Why not just use CSS and the a:hover pseudo-element to change the background image. It's much simpler & works with JS turned off.

Posted: Mon Jan 22, 2007 2:24 pm
by feyd
Also, the url() call doesn't need quotes. It's not apart of the specification.

Posted: Mon Jan 22, 2007 2:53 pm
by jdhorton77
Ok, that worked. Thanks so much. I was thinking the .style.background-image was used to change the css statement.

Also, how do you tag javascript on here instead of using the code button up above. I used the code button before and my message was edited. Thanks again.

Posted: Mon Jan 22, 2007 2:55 pm
by Kieran Huggins
"Syntax"

Posted: Mon Jan 22, 2007 2:55 pm
by feyd
jdhorton77 wrote:Also, how do you tag javascript on here instead of using the code button up above. I used the code button before and my message was edited. Thanks again.
There's a drop down which says "Syntax..."; it works similarly to the "Code" button.