Проблема с переключателем фона блоков
[1 ] Koeshiro [14.05.2012, 00:33]
Второй день пытаюсь написать скрипт для смены фона блоков (по клику соответствующей картинкой ) вот что у меня вышло Code
<script type="text/javascript">function changeBg(e){ document.getElementById('bg').style.backgroundImage='url('+name+')'; document.getElementsByTagName('img').name. }</script>
тут понятное дело много чего не хватает . . . . только чего именно? скажите пожалуйста как мне сделать такое чудо?
[2 ] likbezz [14.05.2012, 06:15]
Koeshiro , Quote (Koeshiro )
Второй день пытаюсь написать скрипт для смены фона блоков (по клику соответствующей картинкой ) вот что у меня вышло
Что-то по моему, у вас ничего не вышло. Нужно как-то вот так: Code
<script type="text/javascript">function changeBg(e){ document.getElementById('bg').style.background='url('+e.src+')'; } </script> <div id="bg" style="width:200px;height:150px;">Здесь располагается содержимое id "bg"</div> <img onclick="changeBg(this);return false;" src="/_example/_img/_anime/_01_800x600_s.jpg" width="50" /> <img onclick="changeBg(this);return false;" src="/_example/_img/_anime/_02_800x600_s.jpg" width="50" /> <img onclick="changeBg(this);return false;" src="/_example/_img/_anime/_03_800x600_s.jpg" width="50" />
Где: changeBg(this); запускаем функцию changeBg и передаём в неё объект по которому кликнули - то бишь картинку, как объект. document.getElementById('bg').style.background='url('+e.src+')'; - находим блок с ID == bg и устанавливаем ему стиль background == атрибуту src переданного в функцию объекта. ... Вот, разбирайся. Постарайся вкурить что такое this и как передавать объекты и значения в функцию ☑ http://likbezz.ru/_example/_rest/_2012/p1/chenge_bg_block.html ...
[3 ] Deadshot [14.05.2012, 19:40]
likbezz , от я идиот (вспомнил пароль от этой стр.) спасибо многому научили ^^Добавлено (14.05.2012, 19:37) --------------------------------------------- что-то не работает =\
Добавлено (14.05.2012, 19:40) --------------------------------------------- как можно импортант прописать в js?
[4 ] likbezz [14.05.2012, 20:31]
Deadshot , Quote (Deadshot )
как можно импортант прописать в js?
Только через setAtribute Но учти, переписываются все стили добавленные через атрибут style Code
document.getElementById('bg').setAttribute('style','background:url('+e.src+')!important');
... А зачем тебе important в скрипте? Контекстные перебивают табличные, если там не указан important, конечно. ...
[5 ] Deadshot [14.05.2012, 21:17]
likbezz , то есть могу прописывать тут всё что угодно из css?Добавлено (14.05.2012, 21:16) --------------------------------------------- мда не хочет вот главная =\
Code
<script type="text/javascript">function changeBg(e){ document.getElementById('bg').setAttribute('style','background:url('+e.src+')!important'); </script> <img onclick="changeBg(this);return false;" src="/Fon_pleera/1.png" width="25" height="25" /> <img onclick="changeBg(this);return false;" src="/Fon_pleera/2.png" width="25" height="25" /> <img onclick="changeBg(this);return false;" src="/Fon_pleera/3.png" width="25" height="25" /> <img onclick="changeBg(this);return false;" src="/Fon_pleera/4.png" width="25" height="25" /> <img onclick="changeBg(this);return false;" src="/Fon_pleera/5.png" width="25" height="25" /> <style type="text/css"> body {background:#000;margin:0;padding:0;overflow-x:hidden;} </style> <style type="text/css"> .scrollbar[orient="horizontal"] { display: none !important; } </style> <table align="center" style="border-image: url{/tochechnyj_risunok.png}; background-image: url(/Fon_pleera/1.png); background-size: cover;" border="2" width="100%" title="Нажмите один раз чтобы слайды пошли с права на лева и два раза чтобы с лева на право" cellspacing="8" id="bg"> <tr> <td><center> <marquee scrollAmount=1 onmouseover=this.scrollAmount=0 onclick=this.direction="left" ondblclick=this.direction="right" onmouseout=this.scrollAmount=3 direction="right" width=100% height=200 title="Нажмите один раз чтобы слайды пошли с права на лева и два раза чтобы с лева на право"> <a href="http://my-soul.ucoz.com/news/klejmor_claymor/2012-04-11-46"><img style="margin:0;padding:0;border:0;" src="http://stat9.privet.ru/lr/13c21157ed67248f330f0a349748f9d4" width="200" height="200"/></a> <a href="http://my-soul.ucoz.com/news/korona_grekha_92_venec_veny/2012-02-07-11"><img src="http://my-soul.ucoz.com/korona_grekha.jpg" border="0" alt="Корона Греха" height="200"></a> <a href="http://my-soul.ucoz.com/news/naruto/2012-02-16-1"><img src="http://my-soul.ucoz.com/Naruto.png" border="0" alt="Наруто" width="200" height="200"></a> <a href="http://my-soul.ucoz.com/news/khvost_fei/2012-03-09-12"><img src="http://my-soul.ucoz.com/Fairy_Tail.png" border="0" alt="Fairy Tail" width="200" height="200"></a> <a href="http://my-soul.ucoz.com/news/blich/2012-01-31-2"><img src="http://my-soul.ucoz.com/Blech.png" border="0" alt="Блич" width="200" height="200"></a> </marquee></center> </td> </tr> </table> <?if($ADD_ENTRY_LINK$)?><div style="text-align:right;padding-bottom:3px;">[ <a href="$ADD_ENTRY_LINK$">Добавить новость</a> ]</div><?endif?>$LAST_NEWS$
Добавлено (14.05.2012, 21:17) --------------------------------------------- страница где стоит http://my-soul.ucoz.com/
[6 ] likbezz [14.05.2012, 22:52]
Deadshot , Quote (Deadshot )
мда не хочет вот главная =\
А где у тебя здесь переключатели? ...
[7 ] Koeshiro [15.05.2012, 18:55]
likbezz , ну за него должны быть картинки . . . . я с js ещё не в ладах . . . . это второй скрипт который пытаюсь написать . . . .
[8 ] likbezz [16.05.2012, 01:04]
Koeshiro , Quote (Koeshiro )
ну за него должны быть картинки . . .
Так в данном коде ничего нет, ни картинок, ни блока ... Пример выше - сделай по подобию. ...
[9 ] Koeshiro [16.05.2012, 13:49]
likbezz , это как?
[10 ] likbezz [16.05.2012, 13:59]
Koeshiro , Quote (Koeshiro )
likbezz, это как?
По подобию - это как в примере, только со своими картинками. ...
[11 ] Koeshiro [16.05.2012, 14:02]
likbezz , так я вед ставил в самом начале кода стоит
[12 ] likbezz [16.05.2012, 14:41]
Koeshiro , Quote (Koeshiro )
так я вед ставил в самом начале кода стоит
Ну и все работает: http://likbezz.ru/_example/_rest/_2012/p1/chenge_block_bg.html А-, ты скобочку забыл, закрывающую функцию в скрипте. ...
[13 ] Koeshiro [17.05.2012, 16:16]
likbezz , спасибо спасибо спасибо (такая мелоч а столько проблем >.<)Добавлено (17.05.2012, 16:16) --------------------------------------------- блин теперь проблема в том что я не могу сделать так чтоб по тем же картинкам переключался фон и таблиц (блоков\колонок с даными и ссылкой на аниме) ну от так всё прописано
Code
<script type="text/javascript">function changeBg(e){ document.getElementById('bg').setAttribute('style','background:url('+e.src+')!important'); document.getElementById('animetabl').setAttribute('style','background:url('+e.src+')!important'); }; </script> <img onclick="changeBg(this);return false;" src="/Fon_pleera/1.png" width="25" height="25" /> <img onclick="changeBg(this);return false;" src="/Fon_pleera/2.png" width="25" height="25" /> <img onclick="changeBg(this);return false;" src="/Fon_pleera/3.png" width="25" height="25" /> <img onclick="changeBg(this);return false;" src="/Fon_pleera/4.png" width="25" height="25" /> <img onclick="changeBg(this);return false;" src="/Fon_pleera/5.png" width="25" height="25" />
и код самих таблиц
Code
<div style="width:45%; float:left; padding:10;" ><table border="1" cellpadding="0" style="border-color: #4A4A4A; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: url(http://my-soul.ucoz.com/1.png); background-size: cover; width:490; height:490;" cellspacing="8" id="animetabl"><tbody><tr ><td style="padding:3px;"> <div name="novost"><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?> <div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div> <?if($MESSAGE$)?><div class="eMessage" style=" text-align:left; clear:both; padding-top:2px; padding-bottom:2px; " align="center">$MESSAGE$</div><?endif?> <?if($ATTACHMENTS$)?><div class="eAttach"> Прикрепления: $ATTACHMENTS$</div><?endif?><div class="eDetails" style="clear:both;"> <?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','0','float')?></div><?endif?> <?if($CATEGORY_NAME$)?>Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> |<?endif?> Просмотров: $READS$ | <?if($USERNAME$)?>Добавил: <a href="$PROFILE_URL$">$USERNAME$</a> |<?endif?> Дата: <span title="$TIME$">$DATE$</span> </div></td></tr></tbody></table><br /> </div></div>
[14 ] likbezz [17.05.2012, 16:31]
Koeshiro , Quote (Koeshiro )
блин теперь проблема в том что я не могу сделать так чтоб по тем же картинкам переключался фон и таблиц (блоков\колонок с даными и ссылкой на аниме)
Вам проще это сделать через стили. Присваивать родительскому блоку, например body класс, например «blueFon» и прописывать стили от него: Типа: Code
.blueFon #animetabl{background:....;}
... А вообще, уберите мусор из шаблонов, оформление должно быть в стилях , а не в шаблонах. Имеется в виду вот эта муть: Quote (РHTM )
<div style="width:45%; float:left; padding:10;" ><table border="1" cellpadding="0" style="border-color: #4A4A4A; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: url(http://my-soul.ucoz.com/1.png); background-size: cover; width:490; height:490;" cellspacing="8" id="animetabl"><tbody><tr ><td style="padding:3px;">
... И кроме того, ID - это уникальный элемент на странице - он может быть только один. Два и более - это уже ошибка. ...
[15 ] Koeshiro [17.05.2012, 16:37]
likbezz , Quote (likbezz )
А вообще, уберите мусор из шаблонов, оформление должно быть в стилях, а не в шаблонах. Имеется в виду вот эта муть:
у меня просто стоит 5 css и было влом прописывать в каждое от это . . . .Quote (likbezz )
Вам проще это сделать через стили. Присваивать родительскому блоку, например body класс, например «blueFon» и прописывать стили от него:
а не могли бы вы это описать? интерестно но не очень понял как это . . . . .Добавлено (17.05.2012, 16:37) ---------------------------------------------
Quote (likbezz )
И кроме того, ID - это уникальный элемент на странице - он может быть только один. Два и более - это уже ошибка
кажись понял почему так вышло =\