Форум

YozUP · #1 (**permalink**) 04.09.2012, 10:33

Пробую разные клики на кнопки... Как сделать, чтоб заливался только div???

<style type='text/css'>
div#div1 {
	border:double;
 width:120; 
 height:100;
 }

 </style>
 <table border=0 align=center>

<tr><td><form>

<input type=button value="красный" onClick="document.bgColor='ff0000'">

<input type=button value="желтый" onClick="document.bgColor='ffff00'">

<input type=button value="синий" onClick="getElementById("div1").document.bgColor='0000ff'">

<input type=button value="голубой" onClick="document.getElementById("div1").bgColor='87ceeb'">

<input type=button value="коралловый" onClick="getElementById("div1").bgColor='87ceeb'">

</form></td>

</table>


 

<div id="div1"></div>

YozUP · #2 (**permalink**) 04.09.2012, 10:34

Чтоб не все тело заливалось, а только div, да и как вместо цвета использовать изображение???

ksa · #3 (**permalink**) 04.09.2012, 10:39

Сообщение от YozUP

Как сделать, чтоб заливался только div?

Таки менять свойства только у ДИВа...
http://htmlbook.ru/css/background-color

ksa · #4 (**permalink**) 04.09.2012, 10:40

Сообщение от YozUP

как вместо цвета использовать изображение?

Начни уже читать букварь...

http://htmlbook.ru/css/background-image

lord2kim · #5 (**permalink**) 04.09.2012, 10:43

YozUP,не забывайте закрывать все теги (а именно </tr>), внутри двойных кавычек нужно использовать одинарные и наоборот...

<style type='text/css'>
div#div1 {
    border:double;
 width:500;
 height:345;
 }
 
 </style>
 <table border=0 align=center>
 
<tr><td><form>
 
<input type=button value="красный" onClick="document.getElementById('div1').style.backgroundColor='ff0000'">
 
<input type=button value="желтый" onClick="document.getElementById('div1').style.backgroundColor='ffff00'">
 
<input type=button value="синий" onClick="document.getElementById('div1').style.backgroundColor='0000ff'">
 
<input type=button value="голубой" onClick="document.getElementById('div1').style.backgroundImage='url(http://img3-fotki.yandex.net/get/6504/3821868.a3/0_STATIC863b3_cae309a0_S)'">
 
<input type=button value="коралловый" onClick="document.getElementById('div1').style.backgroundImage =  'url(http://img4-fotki.yandex.net/get/6608/17898081.143/0_STATIC8c804_a324cdda_L)'">
 
</form></td></tr>
 
</table>
 
 
  
 
<div id="div1"></div>

YozUP · #6 (**permalink**) 04.09.2012, 10:45

Огромное СПАСИБО!!!

YozUP · #7 (**permalink**) 04.09.2012, 15:41

А как сделать плавную смену картинок самым простым способом, перепробовал все примеры вообще ничего не происходит...

<table border=0 align=center>
<tr><td align="center"><form>
<input type=button value="Белая" onClick="document.getElementById('div1').style.backgroundImage='url(colors/w-got.png)'">
<input type=button value="Черная" onClick="document.getElementById('div1').style.backgroundImage='url(colors/b-got.png)'">
</form></td>
</tr>
<tr>
<td><div id="div1" style="width:926px; height:471px; border:double; text-align:center; background:url(colors/obe.jpg) #00F;"></div></td>
</tr>
</table>

YozUP · #8 (**permalink**) 04.09.2012, 15:54

Или плавное при щелчке на картинку например сюда...

<table border=0 align=center>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
    
    <IMG ID = "myimg" SRC = 'colors/obe.jpg' onclick = "imgchange()">
 <SCRIPT>
 var flag=false
 function imgchange(){
 if (flag) document.all.myimg.src = "colors/w-got.png"
 else document.all.myimg.src = "colors/b-got.png"
 flag=!flag 
 }
 </SCRIPT>
    
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

ksa · #9 (**permalink**) 04.09.2012, 16:23

Сообщение от YozUP

А как сделать плавную смену картинок самым простым способом

Как вариант 2 самых простых способа:
1.
- Т.н. спрайт
http://htmlbook.ru/faq/kak-sdelat-ch...vedenii-na-nee

2.
- сделать картинку прозрачной до невидимости
- выполнить замену картинки
- после загрузки картинки убрать прозрачность

YozUP · #10 (**permalink**) 04.09.2012, 16:46

ksa,
То что ты советуешь) Это все понятно и не то... Спасибо конечно, но вообще не то... Я думаю это сделать вклеив библиатеку jquery или просто на javascript, вот как пример, только как это сюда прикрепить... Вод пример кода плавной смены...

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>background-image</title>
  <script type="text/javascript" language="javascript">
numimg=0;
imgslide=new Array()
imgslide[0]=new Image();
imgslide[1]=new Image();
imgslide[2]=new Image();
imgslide[3]=new Image();
imgslide[0].src="image/sl1.gif";
imgslide[1].src="image/sl2.gif";
imgslide[2].src="image/sl3.gif";
imgslide[3].src="image/sl4.gif";
function demoslides()
{
document.img.src=imgslide[numimg].src;
numimg++;
if(numimg==4)
numimg=0;
setTimeout("demoslides()", 1000)
}
</script>
   </head>
 <body onload="demoslides()">
<div id="demoslides" style="padding-left:400px;">
<img src="image/sl1.gif" name="img"/>
</div>
 
 </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript