Суть кнопки, при нажатии меняет фоновое изображение по функции JS.
Вот такой код у меня работает без проблем, с трудом кстати его написал:
<html>
<head>
<script type="text/javascript">
function SmenabgImage(){
if (document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'){
document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")';
}
else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'){
document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")';
}
else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")'){
document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")';
}
else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")'){
document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")';
};
}
</script>
</head>
<body style='background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'>
<button onclick="SmenabgImage()">Сменить картинку заднего фона</button>
</body>
</html>
Но теперь мне нужно более сложная его версия, мне нужно в классе изменить фоновое изображение, делаю я это следующим образом:
<html>
<head>
<script type="text/javascript">
function SmenabgImage(){
if (document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'){
document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")';
}
else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'){
document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")';
}
else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")'){
document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")';
}
else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")'){
document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")';
};
}
</script>
<style>
.styleBgImage{background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg");}
</style>
</head>
<body class="styleBgImage">
<button onclick="SmenabgImage()">Сменить картинку заднего фона</button>
</body>
</html>
Но у меня не работает и я не понимаю что именно не так, я сдаюсь, помогите.
Ссылки на изображения рабочие.