AJAX-код для изменения изображения на веб-странице в шаблоне

Question

У меня есть один веб-сайт, который работает с шаблонами.

в шаблоне есть одно основное изображение, и я хочу заменить это основное изображение на некоторых страницах, но не на полном веб-сайте.я ищу, чтобы изменить основное изображение на новое изображение на странице, где мне нужно с помощью ajax.

когда я вижу CSS этого шаблона, я нашел следующий код, чтобы показать изображение

.top-bg {

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

и на странице php я нашел следующую строку, которая приносит изображение.

       <div class="top-bg">

мне нужен код ajax / jquery, чтобы изменить изображение.

моя основная логика заключается в том, что я получу URL этого изображения из базы данных MYSQL и назначу одну переменную, а затем я изменю изображение, полученное из базы данных, фактически на одной странице отображаются продукты, и я хочу отобразить основное изображениепродукта с ссылкой на загруженный продукт, я надеюсь, вы поймете, что мне нужно в конце ...

Спасибо

Спасибо за каждый ответ, я нашел решение

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

это действительно помогло мне, что мне нужно, в любом случае, спасибо, а также за -все спасибо ...: ((

Answer 1

Хотя я думаю, что Ajax - неправильное решение вашей проблемы, я предложу вам следующее (что, по крайней мере, отвечает вашему вопросу):

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

Щелчок по элементу id="changeImage" загрузит содержимое id="imageID" из php-файла, расположенного по адресу http://path.to.php/file.php , в элемент (предположительно div, но неважно) из id="imageContainer".

Тем не менее, я бы предложил следующие советы @ 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

Я думаю, что AJAX - неправильный подход.AJAX должен использоваться для загрузки новых данных, когда пользователь взаимодействует с веб-страницей.

Ваша проблема может быть решена гораздо проще: если вы можете добавить вызов AJAX в код страницы, почему бы просто не добавитьновый стиль CSS:

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

Или создайте второй шаблон и используйте его для всех, кроме главной страницы.

Answer 3

Для этого вам вообще не нужен 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 будет переопределять шаблонное, и ваше пользовательское изображение будет на просто этих страницах.