•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 375,195 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,137 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 3755 | Replies: 3
 |
•
•
Join Date: Aug 2007
Posts: 4
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Hi,
I'm trying to change a background image used within a list <li>, yet have only been able to get this to work in IE and not Firefox. Please tell me what is wrong with this code:
(Note: I have tried using style.backgroundImage yet that did not work in IE or FF).
The complete code is listed below...
javascript:
and the relevant html:
I'm trying to change a background image used within a list <li>, yet have only been able to get this to work in IE and not Firefox. Please tell me what is wrong with this code:
(Note: I have tried using style.backgroundImage yet that did not work in IE or FF).
document.getElementById(current).style.background="background-image: url('image/arrow_sel.gif') no-repeat";The complete code is listed below...
javascript:
<script type="text/javascript">
var current = "woodshed_percussion";
function page_adjust(project)
{
var previous = current;
current = project;
if(current != previous)
{
document.getElementById(current).style.background="background-image: url('image/arrow_sel.gif') no-repeat";
document.getElementById(previous).style.background="background-image: url('image/arrow.gif') no-repeat";
ReplaceElementID("http://www.woodshedpercussion.com/test_environment/rockydesigns/php/main_content.php?project="+ current,"main");
}
}
</script>and the relevant html:
<div style="margin-bottom: 2em;">
<ul>
<li id="woodshed_percussion" onclick="page_adjust('woodshed_percussion');" style="background-image: url(image/arrow_sel.gif);"><a href="#">Woodshed Percussion</a></li>
<li id="big_mouth" onclick="page_adjust('big_mouth');">Big Mouth Films news blast</li>
<li id="all_island" onclick="page_adjust('all_island');"><a href="#">All Island Music Center </a></li>
<li id="in_pulse" onclick="page_adjust('in_pulse');"><a href="#">In Pulse Chiropractic, P.C.</a></li>
<li id="romanos_tv" onclick="page_adjust('romanos_tv');"><a href="#">Romano's TV & Appliance </a></li>
</ul>
</div>
•
•
Join Date: Nov 2007
Posts: 23
Reputation:
Rep Power: 1
Solved Threads: 3
Newbie Poster
Re: javascript css background-image Hi rnr8,
Instead of using the DOM to change the backgroundImage property, try changing the className property of the element and creating a stylesheet rule for the class name.
javascript:
Stylesheet:
Remember though, it's better to change the styles of anchors instead of li's when dealing with mouseover's due to incomplete support for mouseover event handling and the like in different browsers. Anchor's (<a>) already have :hover, :active, :visited, etc stylesheet capabilities in the revision 1 of the w3c's specification (http://www.w3.org/TR/CSS1#anchor-pseudo-classes). Try changing the background image on the anchors instead of the li's if you want to keep your menu/list viewable by the widest possible audience. Just a tip
Great question rnr8
Instead of using the DOM to change the backgroundImage property, try changing the className property of the element and creating a stylesheet rule for the class name.
javascript:
el.className = 'hover';
Stylesheet:
li.hover{
background-color:#f90;
font-weight:bold;
text-decoration:underline;
}Remember though, it's better to change the styles of anchors instead of li's when dealing with mouseover's due to incomplete support for mouseover event handling and the like in different browsers. Anchor's (<a>) already have :hover, :active, :visited, etc stylesheet capabilities in the revision 1 of the w3c's specification (http://www.w3.org/TR/CSS1#anchor-pseudo-classes). Try changing the background image on the anchors instead of the li's if you want to keep your menu/list viewable by the widest possible audience. Just a tip
Great question rnr8
Last edited by chrelad : Jan 1st, 2008 at 11:04 pm. Reason: Forgot to wrap the CSS in code tags
•
•
Join Date: Aug 2007
Posts: 4
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Thank you very much for your well thought out and written response. I appreciate your help and will give that a try!
PS The reason I'm actually using the background-image as a bullet, because, from what I've read, that is the most consistent way to position image bullets (perhaps not accurate).
PS The reason I'm actually using the background-image as a bullet, because, from what I've read, that is the most consistent way to position image bullets (perhaps not accurate).
•
•
Join Date: Nov 2007
Posts: 23
Reputation:
Rep Power: 1
Solved Threads: 3
Newbie Poster
Hi rnr8,
Well, in that case (positioning bullets), positioning via CSS is a great way to achieve the desired effect.
I'm in the same boat with you (blah.style.backgroundImage not always working). The className approach hasn't failed me yet and works in every browser I've laid my hands on thus far.
Let us know if you have any other questions rnr8
Well, in that case (positioning bullets), positioning via CSS is a great way to achieve the desired effect.
I'm in the same boat with you (blah.style.backgroundImage not always working). The className approach hasn't failed me yet and works in every browser I've laid my hands on thus far.
Let us know if you have any other questions rnr8
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
•
•
•
•
ajax asp cross-browser javascript menu with few lines of code css developer development div firefox home html internet javascript javascript smooth scrolling scroll smoothly window document position javascript tab menu with rounded corners generator microsoft msdn office prevent javascript menu from getting hidden under flash movies site software sql symantec tables vista web
- Background-image position change with smooth (HTML and CSS)
- Javascript / css menu image help, pls? (HTML and CSS)
- Background question (JavaScript / DHTML / AJAX)
- How to make CSS opacity setting work in IE7 ? (JavaScript / DHTML / AJAX)
- Selectively Printing only Certain Divs (javascript/css question) (JavaScript / DHTML / AJAX)
- Css Fixed Background Attachment (Site Layout and Usability)
- javascript-firefox issues (JavaScript / DHTML / AJAX)
- Replacing 100% tables with CSS (JavaScript / DHTML / AJAX)
- Background image flickers in IE.... (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Javscript variables to Server-side
- Next Thread: LightWindow thingies
