Problem changing css background-image in javascript function

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
jdhorton77
Forum Commoner
Posts: 56
Joined: Tue Nov 07, 2006 3:29 pm
Location: Charlotte, NC

Problem changing css background-image in javascript function

Post 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]
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Last edited by pickle on Mon Jan 22, 2007 2:25 pm, edited 1 time in total.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Also, the url() call doesn't need quotes. It's not apart of the specification.
User avatar
jdhorton77
Forum Commoner
Posts: 56
Joined: Tue Nov 07, 2006 3:29 pm
Location: Charlotte, NC

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

"Syntax"
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
Post Reply