[Ликбез]

Форма входа
Логин:
Пароль:

Меню сайта


Скрипты и коды для юкоз - Форум аццкого кодера » Если вы пришли за помощью, то Вам сюда... » Проблема с переключателем фона блоков

Проблема с переключателем фона блоков
[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, так я вед ставил в самом начале кода стоит wink
[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)
---------------------------------------------
блин теперь проблема в том что я не могу сделать так чтоб по тем же картинкам переключался фон и таблиц (блоков\колонок с даными и ссылкой на аниме)
ну от так всё прописано


и код самих таблиц
[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 - это уникальный элемент на странице - он может быть только один. Два и более - это уже ошибка

кажись понял почему так вышло =\


Полная версия сайта