Использование кнопок радио для изменения фонового изображения Div

Я пытаюсь использовать радиокнопки в форме, чтобы изменить фоновое изображение div, но это просто не работает, но многие методы я пытаюсь. Я уверен, что это что-то простое в моем коде, но я просто смотрел на него слишком долго.Использование кнопок радио для изменения фонового изображения Div

Я включил свой HTML, Javascript и CSS, поэтому, если бы кто-нибудь мог просмотреть, это было бы набуханием.

HTML и Javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 




<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="styles/styles.css" /> 
<title>Birthday Card Generator</title> 


<script language="javascript"> 

function bgColor(bg) 
{ 
        document.getElementById("ecard").style.backgroundImage = "url(images/" + bg + ".jpg)"; 
} 


</script> 

</head> 

<body> 

    <div id="left"> 



     <div id="background"> 
     <form> 
     <input type="radio" id="bg1" name="bg" value="bg1" onChange="bgColor(this.value)">Background 1 
     <br /><br /> 
     <input type="radio" id="bg2" name="bg" value="bg2" onChange="bgColor(this.value)">Background 2 
     </form> 
     </div> 
    </form> 
    </div> 

    <div id="right"> 

    <div id="ecard"> 

    </div> 

    </div> 

</body> 
</html>

CSS

@charset "utf-8"; 
/* CSS Document */ 

#left 
{ 
    float: left; 
    width: 50%; 
    height: 100%; 
    overflow: scroll; 
    overflow-x:hidden; 
} 

#right 
{ 
    float: right; 
    width: 50%; 
    height: 100%; 
    overflow: scroll; 
} 

#background 
{ 
    float: left; 
    width: 100%; 
    height: 100px; 
    overflow: scroll; 
    overflow-y:hidden; 
} 

#ecard 
{ 
    width:400px; 
    height:300px; 
    margin:0px auto; 
}

источник

2013-11-21 GreenEggs_

вы уверены, что ваш IMG SRC работает? –

Изображение src работало, да. –

Я получил его на работу, изменив имя вашей функции changeBackground и очистки вашей HTML немного:

<input type="radio" id="bg1" name="bg" value="bg1" onClick="changeBackground(this.value);" />Background 1

JS:

function changeBackground(bg) { 
    document.getElementById("ecard").style.backgroundImage = "url(images/" + bg + ".jpg)"; 
}

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

Демо: http://jsfiddle.net/verashn/F6zPc/

источник

2013-11-21 00:44:56 VLS

Ты замечательный волшебник кода. –

Использование кнопок радио для изменения фонового изображения Div

ответ

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