javascript onClick изменить фоновую картинку div - PullRequest
Новая
       12

javascript onClick изменить фоновую картинку div

0 голосов
/ 04 января 2012

Моя конечная цель - изменить фон div, щелкнув по изображению сэмпла.

Сначала я написал это: 

<a onclick="document.getElementById('sp').style.background="url('/assets/castle.png')"">...<a>

, но это не сработало.Я заметил, что проблема заключалась в использовании нескольких "и". Поэтому поместите функцию в тег скрипта: 

<script type="text/javascript">
    var pic="";
    function showP(pic) { document.getElementById('sp').style.background='url(pic)';};
</script>

<a onclick="showP(/assets/castle.png)"><img src="/assets/castle.png" width="50px" height="50px"></a>

Как и предполагалось при просмотре / assets dir, это приложение rails. Я также попытался использоватьСелекторы jQuery, такие как $ ("# sp"). css () или полное удаление переменной и пробование функции как: 

function showp1() { document.getElementById('sp').style.cssText='background: transparent url(/assets/castle.png) no-repeat 0 0;'}

, чтобы попробовать решения, предложенные в вопросах с похожими заголовками, но ни один из них не сработал.Я пытаюсь, на html-источнике, часть showP (/assets/castle.png) " ниже помечена красным: 

<a onclick="showP(/assets/castle.png)"><img src="/assets/castle.png" width="50px" height="50px"></a>

Есть ли какие-либо предложения?

Ответы [ 4 ]

3 голосов
/ 04 января 2012

Не используйте JS в своем HTML-коде. Используйте ненавязчивые слушатели событий. Они очень просты в jQuery: 

$('#clickMe').on('click', function() {
    $('#changeMe').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})

Смотрите эту скрипку.

1 голос
/ 04 января 2012

Попробуйте это: 

<script type="text/javascript">
    function showP(pic) { 
        document.getElementById('sp').style.background = 'url(' + pic + ')';
    };
</script>

<a onclick="showP('/assets/castle.png')">
    <im  src="/assets/castle.png" width="50px" height="50px" />
</a>

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

0 голосов
/ 04 января 2012

Как уже говорили другие, у вас, похоже, есть проблема с кавычками.Вы можете проверить мой рабочий пример на jsFiddle .

0 голосов
/ 04 января 2012

URL фонового изображения не требует кавычек. Попробуйте: 

<a onclick="document.getElementById('sp').style.background='url(/assets/castle.png)'">...<a>
...