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

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');
 }
);