Доброе время суток. Совсем недавно взялся за изучение JS, и вчера имел честь написать свой первый скрипт. Все, чудесно, все работает, но длина: 100 строк. Можно ли укоротить этот
кошмар шедевр путем использования цикла? Или иные варианты сделать код короче. Заранее спасибо!
// JavaScript Document
var imgArr = ["url('./img/pic_1.png')","url('./img/pic_2.png')","url('./img/pic_3.png')","url('./img/pic_4.png')"];
var background = "url('./img/podlojka.png')";
var background_empty = "url('./img/podlojka_empty.png')";
function Wallpaper() {
var element1 = document.getElementById('price1');
element1.onmouseover = ShowBackElement1;
element1.onmouseout = HideBackElement1;
var element2 = document.getElementById('price2');
element2.onmouseover = ShowBackElement2;
element2.onmouseout = HideBackElement2;
var element3 = document.getElementById('price3');
element3.onmouseover = ShowBackElement3;
element3.onmouseout = HideBackElement3;
var element4 = document.getElementById('price4');
element4.onmouseover = ShowBackElement4;
element4.onmouseout = HideBackElement4;
}
function ShowBackElement1() {
var backgroung = document.getElementById('price1');
backgroung.style.backgroundImage = background;
var red = document.getElementById('under_price1');
red.style.color = '#430606';
var yellow = document.getElementById('old_price1');
yellow.style.color = '#ffc601';
var backImg = document.getElementById('wallpaper');
backImg.style.backgroundImage = imgArr[0];
}
function HideBackElement1() {
var backgroung = document.getElementById('price1');
backgroung.style.backgroundImage = background_empty;
var red = document.getElementById('under_price1');
red.style.color = '#cd5d5d';
var yellow = document.getElementById('old_price1');
yellow.style.color = '#ff8d06';
var backImg = document.getElementById('wallpaper');
backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement2() {
var backgroung = document.getElementById('price2');
backgroung.style.backgroundImage = background;
var red = document.getElementById('under_price2');
red.style.color = '#430606';
var yellow = document.getElementById('old_price2');
yellow.style.color = '#ffc601';
var backImg = document.getElementById('wallpaper');
backImg.style.backgroundImage = imgArr[1];
}
function HideBackElement2() {
var backgroung = document.getElementById('price2');
backgroung.style.backgroundImage = background_empty;
var red = document.getElementById('under_price2');
red.style.color = '#cd5d5d';
var yellow = document.getElementById('old_price2');
yellow.style.color = '#ff8d06';
var backImg = document.getElementById('wallpaper');
backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement3() {
var backgroung = document.getElementById('price3');
backgroung.style.backgroundImage = background;
var red = document.getElementById('under_price3');
red.style.color = '#430606';
var yellow = document.getElementById('old_price3');
yellow.style.color = '#ffc601';
var backImg = document.getElementById('wallpaper');
backImg.style.backgroundImage = imgArr[2];
}
function HideBackElement3() {
var backgroung = document.getElementById('price3');
backgroung.style.backgroundImage = background_empty;
var red = document.getElementById('under_price3');
red.style.color = '#cd5d5d';
var yellow = document.getElementById('old_price3');
yellow.style.color = '#ff8d06';
var backImg = document.getElementById('wallpaper');
backImg.style.backgroundImage = imgArr[0];
}
function ShowBackElement4() {
var backgroung = document.getElementById('price4');
backgroung.style.backgroundImage = background;
var red = document.getElementById('under_price4');
red.style.color = '#430606';
var yellow = document.getElementById('old_price4');
yellow.style.color = '#ffc601';
var backImg = document.getElementById('wallpaper');
backImg.style.backgroundImage = imgArr[3];
}
function HideBackElement4() {
var backgroung = document.getElementById('price4');
backgroung.style.backgroundImage = background_empty;
var red = document.getElementById('under_price4');
red.style.color = '#cd5d5d';
var yellow = document.getElementById('old_price4');
yellow.style.color = '#ff8d06';
var backImg = document.getElementById('wallpaper');
backImg.style.backgroundImage = imgArr[0];
}
В HTML:
<script type="text/javascript" src="js/wallpaper.js"></script>
<script type="text/javascript">
window.onload = function() {
Wallpaper();
}
</script>