Гипертекстовые ссылки и картинки 

Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

КАТЕГОРИИ:

Археология
Биология
Генетика
География
Информатика
История
Логика
Маркетинг
Математика
Менеджмент
Механика
Педагогика
Религия
Социология
Технологии
Физика
Философия
Финансы
Химия
Экология

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Гипертекстовые ссылки и картинки

↑
▷ Содержание
⇐ ПредыдущаяСтр 10 из 10
Поиск

Гипертекстовые ссылки и картинки - это свойства объекта "документ", который в свою очередь является частью объекта "окно". И гипертекстовые ссылки, и картинки составляют встроенные массивы, к которым можно обращаться по индексу. Рассмотрим несколько примеров программирования массивов гипертекстовых ссылок и картинок.

Просмотр фотографий образцов через список гипертекстовых ссылок

Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке размещается список выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи списка альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У каждой ссылки определено событие onSelect. Для того, чтобы не происходил переход к другой странице, а выполнялась только обработка события, в поле href необходимо определить вызов JavaScript. Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Пример 2.21. Изменение картинки через гипертекстовую ссылку

<HTML>
<HEAD>
<TITLE>HTTPD\HTDOCS\JAVASCR\EXAMPLE1</TITLE>
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
function l_image(a)
{ document.images[1].src=a }
// -->
</SCRIPT>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFCC" LINK="#0000EE"
VLINK="#551A8B" ALINK="#FF0000">
<H1>
<FONT COLOR="#000099">Просмотр фотографий образцов</FONT>
</H1> <center>
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<TD>
<UL>
<LI>
<A HREF="JAVASCRIPT:L_IMAGE('FREEZE.GIF')">Холодильник</A> </LI>
<LI><A HREF="JAVASCRIPT:L_IMAGE('DUST.GIF')">Пылесосы</LI>
<LI><A HREF="JAVASCRIPT:L_IMAGE('TOSTER.GIF')">Тостер</LI>
<LI><A HREF="JAVASCRIPT:L_IMAGE('COOK.GIF')">Варочный стол</LI>
<LI><A HREF="JAVASCRIPT:L_IMAGE('OVEN.GIF')">Духовка</LI>
<LI><A HREF="JAVASCRIPT:L_IMAGE('WASH.GIF')">Стиральная машина</LI>
<LI><A HREF="JAVASCRIPT:L_IMAGE('DISHWASH.GIF')">Посудомоечная машина</LI>
</UL>
</TD>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC="DUST.GIF" NAME="tool" > </TD>
</TR>
</TABLE>
</center>
</BODY>
</HTML>

В данном примере при выборе гипертекстовой ссылки происходит вызов функции l_image(), которая изменяет значение атрибута SRC в контейнере IMG. Таким образом, можно организовать просмотр различных товаров в одном единственном графическом окне.

Изменение картинки путем выбора предмета из списка.

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

Пример 2.22. Выбор картинки из списка

<!-- элементы заголовка -->...
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
pictures = new Array()
for(i=0;i<8;i++)
{pictures[i] = new Image()
if(i==0) pictures[i].src = "FREEZE.GIF"
if(i==1) pictures[i].src = "DUST.GIF"
if(i==2) pictures[i].src = "TOSTER.GIF"
if(i==3)
pictures[i].src = "COOK.GIF"
if(i==4) pictures[i].src = "OVEN.GIF"
if(i==5) pictures[i].src = "WASH.GIF"
if(i==6) pictures[i].src = "DISHWASH.GIF"}
function l_image()
{document.images[1].src = pictures[document.form1.item.selectedIndex].src}
// -->
</SCRIPT>
[ На начало страницы ]
Фрагмент HTML-разметки с вызовом функции изменения картинки:
<center>
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<th>
<form name=form1>
<select name=item onChange=l_image()>
<option>Холодильник
<option selected>Пылесос
<option>Тостер
<option>Варочный стол
<option>Духовка
<option>Cтиральная машина
<option>Посудомоечная машина

</select>
</form>
</th>
</tr>
<tr>
<th ALIGN=CENTER VALIGN=CENTER><IMG SRC="DUST.GIF" NAME="tool" > </th>
</TR>
</TABLE>
[ <a href=#top>На начало страницы</a> ]
<HR>
</center>

В данном примере картинка выбирается как элемент списка. При этом происходит событие onChange, и по нему определяют, какой именно элемент был отобран.

Листание картинок и их автоматический просмотр

Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещаются три кнопки управления просмотром картинок "Вперед", "Старт/Стоп", "Назад". Во второй ячейке размещаются картинки, выбранные путем листания. Листание осуществляется кнопками "Вперед" и "Назад". Возможен и другой вариант выбора картинки, когда система сама через некоторый промежуток времени периодически меняет картинки. Для этого следует сначала запустить автоматическую смену картинок, нажав на кнопку "Старт/Стоп", а потом, когда будет показана нужная картинка, остановить автоматическое листание, снова нажав на кнопку "Старт/Стоп". Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Пример 2.23. Листание и прокрутка картинок

<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
pictures = new Array()
for(i=0;i<8;i++)
{pictures[i] = new Image()
if(i==0) pictures[i].src = "FREEZE.GIF"
if(i==1) pictures[i].src = "DUST.GIF"
if(i==2) pictures[i].src = "TOSTER.GIF"
if(i==3) pictures[i].src = "COOK.GIF"
if(i==4) pictures[i].src = "OVEN.GIF"
if(i==5) pictures[i].src = "WASH.GIF"
if(i==6) pictures[i].src = "DISHWASH.GIF" }
n=0; flag=0;
function next_image()
{if(flag==0)
{n++;if(n>6) n=0;
document.images[1].src = pictures[n].src } }
function back_image()
{if(flag==0)
{n--;if(n<0) n=6;
document.images[1].src = pictures[n].src}}
function scroll_image()
{if(flag==1)
{n++;if(n>6) n=0;
document.images[1].src = pictures[n].src }
setTimeout("scroll_image()",1500);}
function start_stop()
{ if(flag==0)
{flag=1}
else
{flag=0 }}
// -->
</SCRIPT>
[ На начало страницы ]
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<th>
<form name=form1>
<input name=f type=button value=Вперед onClick=next_image()>
<input name=ss type=button value="Старт/Стоп"
onClick=start_stop()>
<input name=b type=button value=Назад onClick=back_image()>
</form>
</th>
</tr>
<tr>
<th ALIGN=CENTER VALIGN=CENTER><IMG SRC="DUST.GIF" NAME="tool" > </th>
</TR>
</TABLE>

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

Пример использования client-site imagemap

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

Пример 2.24. Динамический imagemap

<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
function print_form(a)
{document.form1.kuku.value = a }
function set_image(a)
{if(a == "bosh")
{ document.form1.kuku.value= "Техника фирмы Bosh."
document.links[5].href = "javascript:print_form
(\'Refregarator: Bosh-10245(-24C;Remote Control)\')"
document.links[6].href = "javascript:print_form
(\'Aero-Filter: Bosh-1212(Steel Filter)\')"
document.links[7].href = "javascript:print_form
(\'Oven: Bosh-3432(Варочный стол +духовка)\')"
document.links[8].href = "javascript:print_form
(\'Wash mashine: Bosh-2343(Dry Mode)\')"
document.links[9].href = "javascript:print_form
(\'Dish wash machine: Bosh-DW-44\')"
document.links[10].href = "javascript:print_form
(\'Water pipe: Bosh(Steel + Ceramic)\')"}
if(a == "Indesit")
{document.form1.kuku.value= "Техника фирмы Indesit."
document.links[5].href = "javascript:print_form(\'Indesit-105(-18C)\')"
document.links[6].href = "javascript:print_form(\'Indesit-101(Steel Filter)\')"
document.links[7].href = "javascript:print_form(\'Indesit-3432(Варочный стол + духовка)\')"
document.links[8].href ="javascript:print_form(\'Indesit-343(Wash only)\')"
document.links[9].href = "javascript:print_form(\'Indesit-DWR-Safe\')"
document.links[10].href = "javascript:print_form(\'No in the frame\')"}
if(a == "candy")
{document.form1.kuku.value= "Техника фирмы Candy."
document.links[5].href = "javascript:print_form(\'Candy-122(-24C;Hidden model)\')"
document.links[6].href = "javascript:print_form(\'Candy-12(Steel Filter + Carbone Filter)\')"
document.links[7].href = "javascript:print_form(\'Candy(Варочный стол + духовка)\')"
document.links[8].href = "javascript:print_form(\'Candy-343(Dry Mode)\')"
document.links[9].href = "javascript:print_form(\'Candy-DWR Elite\')"
document.links[10].href = "javascript:print_form(\'Candy(Ceramic)\')"}
document.images[1].src= a+".GIF" }
// -->
</SCRIPT>
[ На начало страницы ]
<MAP name=kitchen_map>
<area name=freeze shape=rect coords="14,11,88,171" href="javascript:void(0)">
<area name=aero shape=rect coords="179,12,238,58" href="javascript:void(0)">
<area name=oven shape=rect coords="179,95,237,172" href="javascript:void(0)">
<area name=dry shape=rect coords="239,95,297,173" href="javascript:void(0)">
<area name=wash shape=rect coords="297,96,370,173" href="javascript:void(0)">
<area name=kran shape=rect coords="90,95,138,172" href="javascript:void(0)">
</map>
<TABLE border=0>
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<TH>
<a href="javascript:set_image('bosh')">Bosh</a>
</th>
<th>
<a href="javascript:set_image('idezit')">Indesit</a>
</th>
<th>
<a href="javascript:set_image('candy')">Candy</a>
</th>
</TR>
<TR>
<th colspan=3><IMG SRC="BOSH.GIF" NAME="tool" USEMAP=#kitchen_map></th>
</TR>
<tr><th colspan=3><form name=form1><input name=kuku size=40
value=Выбери набор техники.></form></th></tr>
</TABLE>

В данном примере меняются не только картинки, но и стеки гипертекстовых ссылок под ними. Для каждой новой картинки определяются свои собственные гипертекстовые ссылки.

 


⇐ Предыдущая12345678910

Поделиться:


Познавательные статьи:


Коммуникативные барьеры и пути их преодоления
Рынок недвижимости. Сущность недвижимости
Решение задач с использованием генеалогического метода
История происхождения и развития детской игры


Последнее изменение этой страницы: 2016-08-01; просмотров: 137; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.216.36.138 (0.009 с.)