Как сделать смену картинок, фона по клику? - Скрипты и коды для юкоз - Форум аццкого кодера
Фильтр по:
  

Страница 1 из 11
Модератор форума: likbezz 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать смену картинок, фона по клику? (Смена картинок, фона. JavaScript)
Как сделать смену картинок, фона по клику?
Дата: Пятница, 17.06.2011, 10:26 |
Concordio
Сержант
Группа: Проверенные
Сообщений: 23
Награды: 0
Репутация: 0
Статус: Offline


Привет,

Страница сайта делится на 3 части: хедер, контент и футер. Так вот, "контент" представляет из себя картинку (а всего таких около 5 штук). Необходимо, чтобы все эти картинки меняли друг друга, но не в автоматическом варианте, а чтоб их менял пользователь (например, нажимая кнопку "Сменить"). При этом обновляется исключительно контентная часть.


 
Дата: Пятница, 17.06.2011, 11:13 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9092
Награды: 23
Репутация: 457
Статус: Unknown


Concordio,
Доброе)
Quote (Concordio)
Страница сайта делится на 3 части: хедер, контент и футер. Так вот, "контент" представляет из себя картинку (а всего таких около 5 штук).

Контент именно картинка? - или всё же фоновая картинка? Это существенно.
-- Каким образом заданы картинки (фоны) для контент блока? Это тоже существенно.
Quote (Concordio)
При этом обновляется исключительно контентная часть.

- Именно обновлялась, или просто менялся фон?
...
По сути - скрипт не сложный - массив картинок - фоном или картинкой, по клику меняется либо атрибут src или параметр background-image - контент блока.
Как только определитесь с выше поставленными вопросами, объясню подробнее ... или набросаю примерный код )
...


 
Дата: Пятница, 17.06.2011, 11:39 |
Concordio
Сержант
Группа: Проверенные
Сообщений: 23
Награды: 0
Репутация: 0
Статус: Offline


likbezz,

Quote (likbezz)
Контент именно картинка? - или всё же фоновая картинка? Это существенно.
-- Каким образом заданы картинки (фоны) для контент блока? Это тоже существенно.


Картинка или фон я еще не определился, т.к. не знаю что будет лучше. Будут в формате jpg или png.

Quote (likbezz)
- Именно обновлялась, или просто менялся фон?

Скорее менялась, но менялась при нажатии на кнопку.

Как то так)


 
Дата: Пятница, 17.06.2011, 13:20 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9092
Награды: 23
Репутация: 457
Статус: Unknown


Concordio,
Quote (Concordio)
Картинка или фон я еще не определился, т.к. не знаю что будет лучше. Будут в формате jpg или png.

-- А при чём здесь формат? - и то и другое и на фон и на картинку подходят ))

Quote (Concordio)
Скорее менялась, но менялась при нажатии на кнопку.

- Ну это понятно, что при нажатии )

Quote (Concordio)
Как то так)

Ну, тогда вот как-то так ...

Фон repeat ...

Фон no-repeat center center ...
...
-- Там не кнопка, а просто ссылка - лень было кнопку искать ... )
... Повторение - по кругу. Можно изменить. Привязка по ID - к любому элементу, блоку, таблице и тп.


 
Дата: Пятница, 17.06.2011, 23:07 |
Concordio
Сержант
Группа: Проверенные
Сообщений: 23
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)
☑ Фон no-repeat center center ...

Во, примерно это мне и нужно)
Напиши код, пожалуйста)


Сообщение отредактировал Concordio - Пятница, 17.06.2011, 23:09
 
Дата: Суббота, 18.06.2011, 01:48 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9092
Награды: 23
Репутация: 457
Статус: Unknown


Concordio,
Quote (Concordio)
Во, примерно это мне и нужно)
Напиши код, пожалуйста)

Quote (JS)
<script type="text/javascript">
function changeBg(e){
var bg=[
"http://likbezz.ru/_example/bg/lib4/_01.png",
"http://likbezz.ru/_example/bg/lib4/_02.png",
"http://likbezz.ru/_example/bg/lib4/_04.png",
"http://likbezz.ru/_example/bg/lib4/Jinnyeh_400.png",
"http://likbezz.ru/_example/bg/lib4/martin.jpg",
"http://likbezz.ru/_example/bg/lib4/Keely_400.png"
],i=e.rel||0;if(i>bg.length-1){i=0;}
document.getElementById('myBody').style.backgroundImage='url('+bg[i]+')';
i++;e.rel=i;
}
</script>


Quote (HTML)
<body style="background:url('http://likbezz.ru/_example/bg/lib4/_05.png') no-repeat center center;height:100%;" id="myBody">
<a rel="0" href="javascript://" onclick="changeBg(this);return false;"><strong>Сменить фон</strong></a>
</body>

...


 
Дата: Пятница, 24.06.2011, 10:23 |
Concordio
Сержант
Группа: Проверенные
Сообщений: 23
Награды: 0
Репутация: 0
Статус: Offline


likbezz,
Спасибо)
Попробую, отпишу)

Добавлено (24.06.2011, 10:23)
---------------------------------------------
likbezz,
Еще такой вопрос, как сделать, чтобы картинка (при заходе на сайт) выводилась в случайном порядке?

 
Дата: Понедельник, 27.06.2011, 17:24 |
Группа: Гости





Спасибо за код!

Очень интересует а возможно ли это реализовать с запоминанием на кукис ?


 
Дата: Вторник, 28.06.2011, 16:27 |
SoundVan
Рядовой
Группа: Проверенные
Сообщений: 14
Награды: 0
Репутация: 0
Статус: Offline


Concordio, Какая картинка, теперь уточните, ето может быть шапка, ето может футер из-выше сказанного Вами, что именно? В етом деле немного понимаю...

 
Дата: Воскресенье, 10.07.2011, 14:11 |
Concordio
Сержант
Группа: Проверенные
Сообщений: 23
Награды: 0
Репутация: 0
Статус: Offline


SoundVan, картинка в контент блоке)

 
Дата: Пятница, 03.10.2014, 11:53 |
Anorions
Рядовой
Группа: Зарегистрированные
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


А как в этом коде сделать кнопку на картинку назад? вот вперед this используешь, а назад?

 
Дата: Пятница, 03.10.2014, 12:50 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9092
Награды: 23
Репутация: 457
Статус: Unknown


Anorions,
Цитата Anorions, Пт, 03.10.2014, 11:53:32
вот вперед this используешь

this - передает объект - ссылку с атрибутом rel в котором указан номер фона.

Цитата Anorions, Пт, 03.10.2014, 11:53:32
А как в этом коде сделать кнопку на картинку назад?

Передавать № последней картинки и вместо прибавления (i++) вычитать (i--);
Типа:
Код
function changeBg(e){
var bg=[
"http://likbezz.ru/_example/bg/lib4/_01.png",
"http://likbezz.ru/_example/bg/lib4/_02.png",
"http://likbezz.ru/_example/bg/lib4/_04.png",
"http://likbezz.ru/_example/bg/lib4/Jinnyeh_400.png",
"http://likbezz.ru/_example/bg/lib4/martin.jpg",
"http://likbezz.ru/_example/bg/lib4/Keely_400.png"
],l=bg.length-1,i=e.rel||l;if(i<0){i=l;}
document.getElementById('myBody').style.backgroundImage='url('+bg[i]+')';
i--;e.rel=i;
}


 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать смену картинок, фона по клику? (Смена картинок, фона. JavaScript)
Страница 1 из 11
Поиск: