Эффекты на основе Java Script, jQuery и т.д.

Вернуться в каталог >>>

Подсказки к иконке-ссылке в дисплее, при клике картинка открывается в полный размер

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<STYLE type=text/css>
/* стили переключателя и его элементов */
li {list-style: none;}
li img {-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; 	border: 2px solid #aaa; width: 80px;}
/* стили большой картинки если установлен uwel_kart_klik.js */
.xboxcontent img {border: #cc0000 2px solid; width: 240px; height: 160px; visibility: visible; cursor: pointer; margin: 5px; float: left;}
</style>
<script language="JavaScript">
// массивы
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var img6 = new Image();
var img7 = new Image();
var img8 = new Image();
// задание элементов массивов
img1.src = "http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb2_400x300.jpg";     // картинка к первой иконке-ссылке и т.д.
img2.src = "http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb3_400x300.jpg";
img3.src = "http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb4_400x300.jpg";
img4.src = "http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb5_400x300.jpg";
img5.src = "http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb10_400x300.jpg";
img6.src = "http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb12_400x300.jpg";
img7.src = "http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb14_400x300.jpg";
img8.src = "http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb18_400x300.jpg";
</script>
<script language="JavaScript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/kart_statichna/427/pri_nawed_na_icon_prosmotr_displ.js"></script>

<script type="text/javascript">
var b_ramka = "#00ff00 2px solid";      // стиль рамки большой картинки, если она нужна
var podskaz_clear = "Кликните для сброса"  // текст подсказки при наведении на большую картинку
</script>
<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/kart_statichna/427/uwel_kart_klik.js"></script>

Впринципе всё должно быть понятно. Прописываем картинки-подсказки которые будут соответствовать конкретной иконке-ссылке, определяем их колличество и задаём нужные стили переключателя и его элементов.

Внутри тега <BODY> - </BODY> там где у Вас будет переключатель картинок.

Прописываем структуру переключателя и его стили. Картинки-иконки соответствующие картинкам-подсказкам. Кроме того к каждой ссылке можно прикреплять обработчики которые будут выполнять нужные Вам функции, например: переход по заданному адресу, увеличивать картинку-подсказку в полный размер при клике по ссылке(как в примере), вызывать всплывающие окна и т.д.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.