JQuery how to change background image

JQuery how to change background image

In last post we saw how to add background image inside DIV tag. In this tutorial we will change background image of Div dynamically using JQuery.

JQuery Script to change background image dynamically

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript"> 
   
   $("document").ready(function(){
   
   var imagesArray = ["url('http://i2.ytimg.com/vi/mIs4sXi3INA/hqdefault.jpg')", 
                      "url('http://i1.ytimg.com/vi/Tq3zBH6f0Dk/hqdefault.jpg')",
                      "url('http://lh5.ggpht.com/-F9bqez_dq5A/Ttp1OyW3eLI/AAAAAAAAAdY/7fJiOic2NI8/28122010425.jpg')",
                      "url('http://lh4.ggpht.com/-c_iL-PplRqA/Ttp1cPQ5YrI/AAAAAAAAAdo/kwOEI3s04os/28122010424.jpg')",
                      "url('http://lh4.ggpht.com/-XwcIhy_LO1w/Ttp1NFuldtI/AAAAAAAAAdI/FHHsIoed8Dg/09042011476.jpg')",
                      "url('http://img.youtube.com/vi/JLMqGKGKut0/0.jpg')",
                      "url('http://i1.asp.net/fan-cdn/avatar/satalaj.jpg?forceidenticon=False&dt=634866217200000000&cdn_id=20121003-001')",
                      "url('http://i.ytimg.com/vi/spPQqiwN2L4/0.jpg')",
                      "url('https://lh5.googleusercontent.com/-9GJERN1Zcc8/AAAAAAAAAAI/AAAAAAAAAsI/Fn74Z1B8pU8/s200-c-k/photo.jpg')"
                     ]
                     
     var currentIndex = 0;
     var imagesCount = imagesArray.length;
   
         $("#div1").click(function(){
         if(currentIndex == imagesCount )
         currentIndex = 0;
         else
         currentIndex++;            

            $(this).css('background-image',imagesArray[currentIndex]);
       
            
          });
  
    });
   
</script>

In above code you can see we have stored Url of images inside an array called imagesArray. You can also get those array dynamically via JQUERY AJAX API or JSON request.

Syntax for changing background image

$(“Selector”).css(“background-image”,”url(‘http://www.yourdomain,com/ImageName.jpg?id=1’)”);

To access clicked instance which has raised the event, you can use $(this) inside the function.

Once you get that element, attach update required property like css or html of it.

Tags:

Jquery

JQuery Change Div background Color and Text Color On Clickasp net image uploadAsp.net Convert String To ImageJquery image click eventAsp.net Convert Image To Base64How to check image is loaded using JQueryDiv Background ImageLearning JqueryJQuery Select ChangeJquery Gridview Dropdownlist Selected Change Enable Disable ControlsJQuery Slide

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.