2012-09-30 2 views
1

Я пытаюсь создать функцию, где нажатием кнопки и фонового изображения выбрано для div. Вот то, что я начал ниже, но это не похоже на работу кто может указать, где я собираюсь неправильно ... :)image background onclick

<style type="text/css"> 
#txt{ 
    width: auto; 
    height: auto; 
    border: solid #000; 
    } 
</style> 

<script type="text/javascript"> 

    function backg1(){ 
     var test = new string(); 
     test = document.getElementById('txt'); 
     test.style.backgroundImage="url('cloud.jpg')"; 
    } 

</script> 
</head> 

<body> 
<div id="txt"> 
<input type="button" value="BG1" onclick="backg1()"/> 
</div> 
+0

Любые ошибки в вашей консоли ошибок? Кстати, 'new string()' бесполезно, особенно если вы сразу же перезаписываете его DOMNode из 'getElementById()' –

+0

. Мне кажется, вам нужно установить ширину и высоту 'div # txt' к размеру изображения. (также относительное положение) –

+0

Да что сработало угощение .. – Yojimbo

ответ

2

Так как ваш не <div> изначально содержит в себе ничего, кроме ввода кнопки, он не имеет размера снаружи границы этой кнопки. Вам нужно будет установить явную ширину и высоту (вместе с position: relative), чтобы увидеть фон.

Я бы рекомендовал установить их в соответствии с вашими размерами.

/* in the CSS */ 
#txt{ 
    /* use the width, height of your image */ 
    width: 400px; 
    height: 250px; 
    position: relative; 
    border: solid #000; 
} 

Или, если вам нужно установить их динамически:

function backg1() { 
    test = document.getElementById('txt'); 
    test.style.backgroundImage="url('cloud.jpg')"; 

    // <div> needs a width & height for the background image to be visible outside the 
    // bounds of the one element contained in the div. 
    test.style.width = "400px"; 
    test.style.height = "250px"; 
    test.style.position = "relative"; 
} 
0

Существует Javascript ошибка в этой строке. var test = new string();

Вы можете сделать это как var test = new String(); Тогда это должно сработать.

Кроме того, я заметил, что вы создаете строковый объект, а затем вы переопределяете объект DOM. Не знаю, почему это так. Вы можете просто создать переменную типа var test;