• Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Модератор форума: Admin, Cибиря4ка, Komoff, Diana  
Проблема с переключателем фона блоков
Дата: Понедельник, 14.05.2012, 00:33 |
Генерал-майор
Группа: Проверенные
Сообщений: 440
Награды: 0
Репутация: 14
Статус: Offline


Второй день пытаюсь написать скрипт для смены фона блоков (по клику соответствующей картинкой ) вот что у меня вышло
Code
<script type="text/javascript">function changeBg(e){
document.getElementById('bg').style.backgroundImage='url('+name+')';
document.getElementsByTagName('img').name.
}</script>

тут понятное дело много чего не хватает . . . . только чего именно? скажите пожалуйста как мне сделать такое чудо?


 
Дата: Понедельник, 14.05.2012, 06:15 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


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
...


 
Дата: Понедельник, 14.05.2012, 19:40 |
Deadshot
Рядовой
Группа: Проверенные
Сообщений: 11
Награды: 0
Репутация: 0
Статус: Offline


likbezz, от я идиот (вспомнил пароль от этой стр.)
спасибо многому научили ^^

Добавлено (14.05.2012, 19:37)
---------------------------------------------
что-то не работает =\

Добавлено (14.05.2012, 19:40)
---------------------------------------------
как можно импортант прописать в js?

 
Дата: Понедельник, 14.05.2012, 20:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Deadshot,
Quote (Deadshot)
как можно импортант прописать в js?

Только через setAtribute
Но учти, переписываются все стили добавленные через атрибут style
Code
document.getElementById('bg').setAttribute('style','background:url('+e.src+')!important');

... А зачем тебе important в скрипте? Контекстные перебивают табличные, если там не указан important, конечно.
...


 
Дата: Понедельник, 14.05.2012, 21:17 |
Deadshot
Рядовой
Группа: Проверенные
Сообщений: 11
Награды: 0
Репутация: 0
Статус: Offline


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/

 
Дата: Понедельник, 14.05.2012, 22:52 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Deadshot,
Quote (Deadshot)
мда не хочет вот главная =\

А где у тебя здесь переключатели?
...


 
Дата: Вторник, 15.05.2012, 18:55 |
Генерал-майор
Группа: Проверенные
Сообщений: 440
Награды: 0
Репутация: 14
Статус: Offline


likbezz, ну за него должны быть картинки . . . . я с js ещё не в ладах . . . . это второй скрипт который пытаюсь написать . . . .

 
Дата: Среда, 16.05.2012, 01:04 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Koeshiro,
Quote (Koeshiro)
ну за него должны быть картинки . . .

Так в данном коде ничего нет, ни картинок, ни блока ...
Пример выше - сделай по подобию.
...


 
Дата: Среда, 16.05.2012, 13:49 |
Генерал-майор
Группа: Проверенные
Сообщений: 440
Награды: 0
Репутация: 14
Статус: Offline


likbezz, это как?

 
Дата: Среда, 16.05.2012, 13:59 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Koeshiro,
Quote (Koeshiro)
likbezz, это как?

По подобию - это как в примере, только со своими картинками.
...


 
Дата: Среда, 16.05.2012, 14:02 |
Генерал-майор
Группа: Проверенные
Сообщений: 440
Награды: 0
Репутация: 14
Статус: Offline


likbezz, так я вед ставил в самом начале кода стоит wink

 
Дата: Среда, 16.05.2012, 14:41 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Koeshiro,
Quote (Koeshiro)
так я вед ставил в самом начале кода стоит

Ну и все работает:
http://likbezz.ru/_example/_rest/_2012/p1/chenge_block_bg.html
А-, ты скобочку забыл, закрывающую функцию в скрипте.
...


 
Дата: Четверг, 17.05.2012, 16:16 |
Генерал-майор
Группа: Проверенные
Сообщений: 440
Награды: 0
Репутация: 14
Статус: Offline


likbezz, спасибо спасибо спасибо (такая мелоч а столько проблем >.<)

Добавлено (17.05.2012, 16:16)
---------------------------------------------
блин теперь проблема в том что я не могу сделать так чтоб по тем же картинкам переключался фон и таблиц (блоков\колонок с даными и ссылкой на аниме)
ну от так всё прописано


и код самих таблиц


 
Дата: Четверг, 17.05.2012, 16:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


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


 
Дата: Четверг, 17.05.2012, 16:37 |
Генерал-майор
Группа: Проверенные
Сообщений: 440
Награды: 0
Репутация: 14
Статус: Offline


likbezz,
Quote (likbezz)
А вообще, уберите мусор из шаблонов, оформление должно быть в стилях, а не в шаблонах.
Имеется в виду вот эта муть:

у меня просто стоит 5 css и было влом прописывать в каждое от это . . . .
Quote (likbezz)
Вам проще это сделать через стили.
Присваивать родительскому блоку, например body класс, например «blueFon» и прописывать стили от него:

а не могли бы вы это описать? интерестно но не очень понял как это . . . . .

Добавлено (17.05.2012, 16:37)
---------------------------------------------

Quote (likbezz)
И кроме того, ID - это уникальный элемент на странице - он может быть только один. Два и более - это уже ошибка

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


 
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск:


Мобильная версия