Иллюстрированный самоучитель по созданию сайтов › Веб-страницы, реагирующие на действия пользователя › Динамическое изменение графических элементов веб-страницы [страница - 135] | Самоучители по работе в Internet

Динамическое изменение графических элементов веб-страницы

Итак, в предыдущем разделе мы узнали, каким образом можно произвольно изменять любые текстовые элементы на веб-странице. А как быть, если надо динамически изменить не текст, а графику? Допустим, мы создали несколько красивых графических кнопок для гиперссылок и хотим, чтобы при наведении мыши соответствующая кнопка изменяла свой вид (напри мер, подсвечивалась), по аналогии с текстовыми гиперссылками при наличии определенного псевдокласса A:hover.

Подготовка графических кнопок

Для примера модифицируем страницу со ссылками на поисковые машины, которую мы создали в главе 2. Сначала проведем некоторую подготовительную работу, а именно: нарисуем графические кнопки для гиперссылок, а также фоновый рисунок для всей страницы. Затем определим стиль для элемента <BODY>:

BODY { 
    text-align: center; 
    background: url("Zmages/back7.jpg"); 
}

Поскольку все содержимое нашей страницы будет размещено по ее центру, мы определили стилевое свойство text-align: center прямо для основного эле мента страницы <BODY>. Теперь, чтобы заголовок и пояснительный текст не “терялись” на достаточно пестром фоне, определим для них "бордюры" и фоновый цвет:

H1 { 
    border-color: #0063CE; 
    border-style: groover-border-width: thick; 
    padding: 5px; 
    background-color: #ACEDFF; 
    width: 16em; 
} 
SPAN { 
    border-color: #FF63CE; 
    border-style: ridge; 
    border-width: medium; 
    padding: 5px; 
    background-color: #FCEDFF; 
    width: 60 % ; 
    font-size: 20px; 
}

Имеется в виду, что мы заключим пояснительный текст в тег <SPAN>. Теперь напишем основной текст страницы:

<BODY>
    <H1>ПОИСКОВЫЕ МАШИНЫ</H1>
    <SPAN>Если вы ищете в Интернате какую-либо информацию, вам помогут следующие сайты:</SPAN>
    <BR>
    <BR>
    <A HREF="http://www.ALTavista.corn" TARGET="_blank">
        <IMG SRC="Images/Altavista.Jpg" WIDTH="192" HEIGHT="40" BORDER="0" ALT="ALTavista">
    </A>
    <BR>
    <A HREF="http://www .yahoo, corn" TARGET="_blank">
        <IMG SRC="Images/yahoo.jpg" WIDTH="147" HEIGHT="40" BORDER="0" ALT="Yahoo!">
    </A>
    <BR>
    <A HREF="http://www.aport.ru" TARGET="_blank">
        <IMG SRC="Images/aport.jpg" WIDTH="135" HEIGHT="40" BORDER="0" ALT="АпорТ">
    </A>
    <BR>
    <A HREF="http://www.yandex.ru" TARGET="_blank">
        <IMG SRC="Images/yandex.jpg" WIDTH="129" HEIGHT="40" BORDER="0" ALT="Яndex">
    </A>

Видите, пока что ничего нового. Результат показан на рис. 7.13. Согласитесь, что это выглядит немного лучше, чем предыдущий вариант. Однако теперь нужно сделать то, ради чего мы все это начали – подсветить кнопки гиперссылок при наведении на них мыши.

Иллюстрированный самоучитель по созданию сайтов › Веб-страницы, реагирующие на действия пользователя › Динамическое изменение графических элементов веб-страницы
Рис. 7.13. Страница графически оформленных гиперссылок

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