CODEWITHSUNDEEP
javascripthtmlcss
SRYZDN
SRYZDN

Reputation: 305

background image does not change by java script

I have a list set up in HTML as follows:

HTML:

<ul id="move_2">
 <li id="mv_txt_2" >Move Section Up</li>
</ul> 
<button onClick="position();">change the bg_image</button>

CSS:

#move_2 {
    height:20px;
    background:url(../images/mvup.fw.png) no-repeat;
    padding-left:30px;
    margin-top:15px;
    vertical-align:middle;
    list-style:none;}


#mv_txt_2{
    padding-left:5px;
    cursor:pointer;
    font-size:14px;
    vertical-align:middle;}

But the following javascript does not change the background image:

function position(){
 document.getElementById('move_2').style.background='url(../images/mvdown.fw.png)';
}

I'd be grateful to receive any comments to solve this problem.

Upvotes: 0

Views: 88

Answers (3)

Fathy
Fathy

Reputation: 5199

I think ../images works in CSS because your CSS is in a directory. When working with html you must use absolute path. Did you try :

 document.getElementById('move_2').style.background='url(images/mvdown.fw.png)';

And use "onclick" instead of onClick.

Upvotes: 1

IVIajid
IVIajid

Reputation: 190

  1. You shouldn't use attributes width capital words.
  2. You can use this by jquery:

html: 

 onclick="..."

jquery:

 $(document).ready(function(){
     $("#move_2").css("background" , "yourAddress");
 });

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

Try this:

Demo on Fiddle

HTML:

<ul id="move_2">
    <li id="mv_txt_2">Move Section Up</li>
</ul>
<button>change the bg_image</button>

CSS:

#move_2 {
    height:200px;
    background:url(http://istheapplestoredown.com/images/dashboardwidget.png) no-repeat;
    padding-left:30px;
    margin-top:15px;
    vertical-align:middle;
    list-style:none;
}
#mv_txt_2 {
    padding-left:5px;
    cursor:pointer;
    font-size:14px;
    vertical-align:middle;
}

JavaScript:

$('li').click(function position() {
    document.getElementById('move_2').style.background = 'url(http://istheapplestoredown.com/images/websitewidget.png) no-repeat';
});

Upvotes: 2

Related Questions