ajax代码在模板中更改网页上的图像

Question

我有一个网站，是工作的模板。

在模板中有一个主图片&我想替换一些页面上的主图片，而不是完整的网站。我正在寻找的是将主图像更改为页面上的新图像，在这里我需要使用ajax。

当我看到该模板的css时，我发现下面的代码显示图像

.{

背景:url(../images/ top -bg.jpg)顶部中心不重复；位置:相对；}

在php页面上，我发现了下面的一行，它带来了图像。

       <div class="top-bg">

我需要ajax / jquery代码来更改图像。

我的基本逻辑是，我将从MYSQL数据库中获得图像URL，并将其赋值为一个变量，然后我将更改来自数据库的图像，实际上它只显示一页产品，我希望用ref将产品的主图像显示为加载的产品，希望您能够理解我最后需要的是什么。

谢谢

谢谢每一个人的回复，我找到了解决办法

$(document).ready(函数(){$(‘#image容器’).css(“背景-图像”，“url(图像/cube.jpg)”)；

} )；

这对我来说是个小窍门，不管怎么说，谢谢，还有-ve投票的感谢.:((

Answer 1

虽然我认为Ajax是解决问题的错误解决方案，但我将提供以下内容(至少满足您的问题)：

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

单击id="changeImage"的一个元素会将id="imageID"的内容从位于http://path.to.php/file.php的url的php文件加载到id="imageContainer"的元素(想必是div，但无论如何)。

也就是说，我建议遵循@Nick Craver和@Aaron Digulla的建议，并使用CSS。

如果您是view source的话，我的站点上有一个jQuery的load的工作演示(针对不同的SO问题发布)在http://davidrhysthomas.co.uk/play/loadDemo.html上。

编辑以回应来自OP的评论。

若要自动执行此操作，请在页面加载：

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

Answer 2

为此，您根本不需要任何JavaScript，只需将另一个样式表(或<style>块)包含在您希望图像更改的网页上即可。把这个放进去：

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

或者<style>版本：

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

只要在模板样式表之后声明了这一点，background属性就会覆盖模板一个，并且您将在这些页面上获得您的自定义图像。

Answer 3

我认为AJAX是错误的方法。当用户与网页交互时，应该使用AJAX加载新数据。

您的问题可以解决得更简单:如果您可以在页面的代码中添加AJAX调用，那么为什么不简单地添加一个新的CSS样式：

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

或者创建第二个模板，并将其用于除主页之外的所有模板。