ajax code to change image on webpage in template

Question

i have one website which is working on templates.

in the template there is one main image & i want to replace that main image on some pages only not on full website. what i am looking for is to change the main image to new image on page where i need with ajax.

when i see the css of that template i found following code to show image

.top-bg{

  background:url(../images/top-bg.jpg)
top center no-repeat;
position:relative;
   }

and on php page i found following line which bring image.

       <div class="top-bg">

i need ajax / jquery code to change image.

my basic logic is, i will get that image URL from MYSQL databse and assign to one variable and then i will change the image which come from database, actually its one page displaying products and i want to display main image of product with ref to loaded product, i hope you will understand what i need at the end...

Thanks

Thanks for every one how reply, i found the solution

$(document).ready( function(){ $('#imageContainer').css("background-image", "url(images/cube.jpg)");
} );

this did trick for me what i need, any way thanks and also for -ve voting thanks... :((

Answer 1

You don't need any JavaScript at all for this, just include another stylesheet (or <style> block) on the webpages you want the imaged changed on. Just have this in there:

.top-bg { background:url(../images/other-image.jpg); }

Or the <style> version:

<style type="text/css">
  .top-bg { background:url(../images/other-image.jpg); }
</style>

As long as this is declared after that template stylesheet, that background property will override the template one, and you'll have your custom image on just those pages.

Answer 2

I think AJAX is the wrong approach here. AJAX should be used to load new data when the user interacts with the web page.

Your problem can be solved much more simple: If you can add an AJAX call to the code of the page, why not simply add a new CSS style:

.tob-bg {
     background:url(../images/other.jpg) top center no-repeat;
}

Or create a second template and use that for all but the main page.

Answer 3

While I think Ajax is the wrong solution for your problem, I'll offer you the following (which, at least, meets your question):

$('#changeImage').click(
    function(){
        $('#imageContainer').load('http://path.to.php/file.php #imageID');
        return false;
    }
);

Clicking an element of id="changeImage" will load the contents of id="imageID" from the php file located at the url of http://path.to.php/file.php into an element (presumably div, but whatever) of id="imageContainer".

That said, I'd suggest following @Nick Craver and @Aaron Digulla's advice and use CSS.

If you view source there's a working demo of jQuery's load on my site (posted in response to a different SO question) at http://davidrhysthomas.co.uk/play/loadDemo.html.

---

Edited in response to comment from OP.

To do this automatically, on page-load:

$(document).ready(
 function(){
   $('#imageContainer').load('http://path.to.php/file.php #imageID');
 }
);