Чат сообщества
|
   |
| Модератор форума: dotbot |
| Сообщество uCoz Архивариус Корзина Привязать ссылку к картинке ((Прилагаю сайт и исходный код для просмотра)) |
| Привязать ссылку к картинке |
|
Сайт http://kadavrq1.ucoz.ru
Видите внизу четыре одинаковых картинки?Здесь вопрос. Как сделать так,что бы при нажатии на на одну такую картинку пользователя кидало на указанный адрес? P.S. как менять картинку и текст в ней я знаю.Не знаю лишь как прибить ссылку. Как и гарантировал,прилагаю исходный код этого блока (зовется он ROTATOR) Code <!-- Rotator --> <div class="rokintroscroller-container" style="position: relative; "> <div id="isr_left" onclick="isr_left()" class="rokintroscroller-leftarrow" style="position: absolute; cursor: pointer; top: 83.5px; left: 0px; visibility: visible; zoom: 1; opacity: 1; "></div> <div class="rokintroscroller-wrapper"> <div id="rokintroscroller" class="" style="width: 2835px; height: 178px; "> <div style="display:none"> <div id="box1"> <div style="float: left;margin: 0px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> </div> <div id="box2"> <div style="float: left;margin: 0px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> </div> </div> <div id="isr_outer" onmouseover="isr_hover_on()" onmouseout="isr_hover_off()"> <div id="middle_outer" style="height: 178px; width: 940px;"> <div id="isr_middle" style="height: 178px; width: 940px;"> <div style="float: left;margin: 0px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> </div> </div> </div> <script type="text/javascript"> var isr_displaytime = 20000; var isr_chrome; </script> <script language="javascript" type="text/javascript" src="/js/rotator.js"></script> </div> </div> <div id="isr_right" onclick="isr_right()" class="rokintroscroller-rightarrow" style="position: absolute; cursor: pointer; top: 83.5px; right: 0px; visibility: visible; zoom: 1; opacity: 1; "></div> </div> <!-- /Rotator --> http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg это и есть данная картинка,там же и текст выше можно поменять.А как привязать ссылку... Сообщение отредактировал webanet - Воскресенье, 24 Июн 2012, 21:24:45
|
|
Madness6479,
Quote (Madness6479) Как сделать так,что бы при нажатии на на одну такую картинку пользователя кидало на указанный адрес? Quote (Madness6479) А как привязать ссылку... Вот так: Code <a href="АДРЕС_ССЫЛКИ"><img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /></a>  |
|
Умно,но не могли бы вы мне показать куда именно вставлять?Ну место что ли....
|
|
Madness6479,
Quote (Madness6479) <!-- Rotator --> <div class="rokintroscroller-container" style="position: relative; "> <div id="isr_left" onclick="isr_left()" class="rokintroscroller-leftarrow" style="position: absolute; cursor: pointer; top: 83.5px; left: 0px; visibility: visible; zoom: 1; opacity: 1; "></div> <div class="rokintroscroller-wrapper"> <div id="rokintroscroller" class="" style="width: 2835px; height: 178px; "> <div style="display:none"> <div id="box1"> <div style="float: left;margin: 0px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"><a href="АДРЕС_ССЫЛКИ"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /></a> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> </div> <div id="box2"> <div style="float: left;margin: 0px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> </div> </div> <div id="isr_outer" onmouseover="isr_hover_on()" onmouseout="isr_hover_off()"> <div id="middle_outer" style="height: 178px; width: 940px;"> <div id="isr_middle" style="height: 178px; width: 940px;"> <div style="float: left;margin: 0px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> <div style="float: left;margin-left: 17px;position: relative;"> <div class="scroller-title" style="bottom: 23px;left: 5px;position: absolute;width: 212px;"> <h2 style="font-size: 120%;margin: 0px;padding: 8px 5px;text-align: center;">Ваш текст</h2> </div> <div class="feature-img-surround"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /> </div> </div> </div> </div> </div> <script type="text/javascript"> var isr_displaytime = 20000; var isr_chrome; </script> <script language="javascript" type="text/javascript" src="/js/rotator.js"></script> </div> </div> <div id="isr_right" onclick="isr_right()" class="rokintroscroller-rightarrow" style="position: absolute; cursor: pointer; top: 83.5px; right: 0px; visibility: visible; zoom: 1; opacity: 1; "></div> </div> <!-- /Rotator --> Вот вам более подробный пример! Синим это ваши картинки... Красным код который нужно добавить чтоб картинки стали кликаберными.  Сайт пранка 18+ :) Сообщение отредактировал DIREN - Воскресенье, 24 Июн 2012, 22:31:49
|
|
Все работает.Сделал.Но а как можно привязать уже не просто ссылку,а видео из yоutube например?
|
|
происходило переход на видео на ютюбе.
Ммм выглядит прям как у Джина по желанию :)) |
|
Madness6479,
Quote (DIREN) <div class="feature-img-surround"><a href="http://youtu.be/bevu7lKk9l4" target="_blank"> <img class="feature-img" alt="" src="http://kadavrq1.ucoz.ru/geforce-gtx-680-performance-revealed-1.jpg" /></a> </div> target="_blank" - это код позволяющий открывать ссылку в новой вкладке(это чтоб ваш сайт не закрывался, а оставался открытым.Видео будет открыто в новой вкладке) Сайт пранка 18+ :) Сообщение отредактировал DIREN - Воскресенье, 24 Июн 2012, 22:54:00
|
|
Благодарю.Ну?а вы на сайте ужи заметили?возле поиска есть popup module.Как его активировать,ну шоб вспывало окошко...?
|
|
Опечатка.У меня на сайте http://kadavrq1.ucoz.ru/ ниже картинок,правее поиска есть надпись popup module.Вот как его активировать?
В коде что я давал в моем вопросе он есть прописан. |
| |||
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!