|
Как сделать смену картинок, фона по клику?
|
|
| [1] Concordio [17.06.2011, 10:26] |
Привет,
Страница сайта делится на 3 части: хедер, контент и футер. Так вот, "контент" представляет из себя картинку (а всего таких около 5 штук). Необходимо, чтобы все эти картинки меняли друг друга, но не в автоматическом варианте, а чтоб их менял пользователь (например, нажимая кнопку "Сменить"). При этом обновляется исключительно контентная часть. |
|
| [2] likbezz [17.06.2011, 11:13] |
Concordio,
Доброе)
Quote (Concordio) Страница сайта делится на 3 части: хедер, контент и футер. Так вот, "контент" представляет из себя картинку (а всего таких около 5 штук).
Контент именно картинка? - или всё же фоновая картинка? Это существенно.
-- Каким образом заданы картинки (фоны) для контент блока? Это тоже существенно.
Quote (Concordio) При этом обновляется исключительно контентная часть.
- Именно обновлялась, или просто менялся фон?
...
По сути - скрипт не сложный - массив картинок - фоном или картинкой, по клику меняется либо атрибут src или параметр background-image - контент блока.
Как только определитесь с выше поставленными вопросами, объясню подробнее ... или набросаю примерный код )
... |
|
| [3] Concordio [17.06.2011, 11:39] |
likbezz,
Quote (likbezz) Контент именно картинка? - или всё же фоновая картинка? Это существенно.
-- Каким образом заданы картинки (фоны) для контент блока? Это тоже существенно.
Картинка или фон я еще не определился, т.к. не знаю что будет лучше. Будут в формате jpg или png.
Quote (likbezz) - Именно обновлялась, или просто менялся фон?
Скорее менялась, но менялась при нажатии на кнопку.
Как то так) |
|
| [4] likbezz [17.06.2011, 13:20] |
Concordio, Quote (Concordio) Картинка или фон я еще не определился, т.к. не знаю что будет лучше. Будут в формате jpg или png.
-- А при чём здесь формат? - и то и другое и на фон и на картинку подходят ))
Quote (Concordio) Скорее менялась, но менялась при нажатии на кнопку.
- Ну это понятно, что при нажатии )
Quote (Concordio) Как то так)
Ну, тогда вот как-то так ...
☑ Фон repeat ...
☑ Фон no-repeat center center ...
...
-- Там не кнопка, а просто ссылка - лень было кнопку искать ... )
... Повторение - по кругу. Можно изменить. Привязка по ID - к любому элементу, блоку, таблице и тп. |
|
| [5] Concordio [17.06.2011, 23:07] |
Quote (likbezz) ☑ Фон no-repeat center center ...
Во, примерно это мне и нужно)
Напиши код, пожалуйста)
Сообщение отредактировал Concordio - Пятница, 17.06.2011, 23:09 |
|
| [6] likbezz [18.06.2011, 01:48] |
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>
... |
|
| [7] Concordio [24.06.2011, 10:23] |
likbezz,
Спасибо)
Попробую, отпишу)Добавлено (24.06.2011, 10:23)
---------------------------------------------
likbezz,
Еще такой вопрос, как сделать, чтобы картинка (при заходе на сайт) выводилась в случайном порядке? |
|
| [8] Гость [27.06.2011, 17:24] |
Спасибо за код!
Очень интересует а возможно ли это реализовать с запоминанием на кукис ? |
|
| [9] SoundVan [28.06.2011, 16:27] |
|
Concordio, Какая картинка, теперь уточните, ето может быть шапка, ето может футер из-выше сказанного Вами, что именно? В етом деле немного понимаю... |
|
| [10] Concordio [10.07.2011, 14:11] |
|
SoundVan, картинка в контент блоке) |
|
| [11] Anorions [03.10.2014, 11:53] |
|
А как в этом коде сделать кнопку на картинку назад? вот вперед this используешь, а назад? |
|
| [12] likbezz [03.10.2014, 12:50] |
Anorions, вот вперед this используешь
this - передает объект - ссылку с атрибутом rel в котором указан номер фона.
А как в этом коде сделать кнопку на картинку назад?
Передавать № последней картинки и вместо прибавления (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;
} |
|