onClick CSS Background Change

Редактирование: Изменено имя функции для свопинга, а функция onClick включена в элемент DIV, но не работает.onClick CSS Background Change

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

Ниже в разделе HEAD, моего HTML

<script type="javascript/text"> 
    <!-- 
    function swap() { 
     document.getElementById("links").style.backgroundImage = "url('middle_background.png')"; 
    } 
    --> 
</script>

Ниже в организме:

<div class="nav" id="links" onClick="swap();"> 
    <img src="images/links.png" alt="Links" /> 
</div>

Это CSS в отдельном файле:

.nav { 
    position: relative; 
    float: right; 
    background: url(images/nav_buttons.jpg) no-repeat; 
    width: 111px; 
    height: 100px; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
}

Уверяю вас, изображение: middle_backgrounds находится в корневой папке. (Копия также находится в папке с изображениями.)

источник

2017-02-23 Brent Walker

Вы не должны назвать функцию 'switch'. Это зарезервированное слово в JavaScript. – bejado

Не используйте 'switch' в качестве имени функции его предварительно определенное ключевое слово – Sankar

Проверьте и посмотрите, какие ошибки консоли вы получаете. – bejado

Используйте onclick в родительском div вместо тега img. Тело будет выглядеть ниже

<div class="nav" id="links" onClick="changeBackgroundImage();" > <img src="images/links.png" alt="Links" /> </div>

источник

2017-02-23 04:52:39 Bewilderment

'switch' не является допустимым именем функции. – bejado

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

function switch1() { 
 
    document.getElementById("links").style.backgroundImage = "url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png')"; 
 
}

.nav { 
 
    position: relative; 
 
    float: right; 
 
    background-image: url(images/nav_buttons.jpg) no-repeat; 
 
    width: 111px; 
 
    height: 100px; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 0px 0px 0px; 
 
}

<div class="nav" id="links" onClick="switch1();"> 
 
    <img src="https://images.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Links" /> 
 
</div>

источник

2017-02-23 05:04:11 Sankar

Тогда как я могу переопределить существующее правило CSS? –

@BrentWalker №. Я смутился с тегом img и свойством background-image ... Он будет работать для вас – Sankar

А, ладно. Да, это была проблема, которая требовала гораздо большего кода. Я просто извлек свойство фона CSS из .Nav, а функция onClick не загружает фоновый фон. –

Я проверил свою работу ...

не используйте функцию переключателя (), поскольку это предопределено, измените имя функции

<div class="nav" id="links"><img src="Images/progress.gif" alt="Links" onclick="change();" /></div> 

    function change() { 

$('#links').css('background-image', 'url(Images/progress.gif)'); 


      }

источник

2017-02-23 05:12:42

Я не знаю, как это удалось решить мою проблему. Просто изменив URL-адреса для соответствия моим изображениям и местоположениям. Спасибо!

function switch1() { 
 
    document.getElementById("links").style.backgroundImage = "url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png')"; 
 
}

.nav { 
 
    position: relative; 
 
    float: right; 
 
    background-image: url(images/nav_buttons.jpg) no-repeat; 
 
    width: 111px; 
 
    height: 100px; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 0px 0px 0px; 
 
}

<div class="nav" id="links" onClick="switch1();"> 
 
    <img src="https://images.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Links" /> 
 
</div>

источник

2017-02-23 05:27:36

onClick CSS Background Change

ответ

Смежные вопросы