Динамическое изменение графических элементов веб-страницы
Предварительная загрузка графических объектов
Однако это еще не все. Представьте себе, что пользователь навел мышь на кнопку-гиперссылку. Что должно произойти? Естественно, замена рисунка. Но откуда браузер возьмет новый рисунок? Начнет загружать через Интернет, поскольку до этого новый рисунок не был загружен в память. В результате на некоторое время отобразится пустой прямоугольник, и весь эффект пропадет!
Чтобы этого избежать, придется написать код для предварительной загрузки в память всех картинок. Это можно сделать при помощи объявления объектов типа Image:
var img1 = new Image(); img1.src = 'Images/ALTavista.jpg'; var img2 = new Image(); img2.src = 'Images/ALTavista2 .jpg;…и так далее. Теперь все графические объекты будут загружены в память заранее, и при наведении мыши на кнопку-гиперссылку смена рисунка произойдет практически мгновенно, что и даст требуемый эффект.
Посмотрим, что у нас получилось в целом.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>Страница гиперссылок</TITLE> <STYLE TYPE="text/css"> BODY { text-align: center - background: url("Images/back?.jpg"); } H1 { border-color: #0063CE; border-style: groove; border-width: thick; padding: 5px; background-color: #ACEDFF; width: 16em; } SPAN { border-color: #FF63CE; border-style: ridge; border-width: medium; padding: 5px; padding: 5px; background-color: #FCEDFF; width: 60%; font-size: 20px; } IMG { margin: 7px; } --> </STYLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //<!-- var img1 = new Image() img1.src = 'Images/ALTavista.jpg'; var img2 = new Image() img2.src = 'Images/ALTavista2.jpg'; var img3 = new Image() img3.src = 'Images/yahoo.jpg'; var img4 = new Image() img4.src = 'Images/yahoo2.jpg'; var img5 = new Image() img5.src = 'Images/yandex.jpg'; var img6 = new Image() img6.src = 'Images/yandex2.jpg'; var img7 = new Image() img7.src = 'Images/aport.jpg'; var img8 = new Image() img8.src = 'Images/aport2.jpg'; function change1() { var a = window.event.srcElement; if (a.tagName == "IMG") a.src = a.src.substring(0, a.sre.length - 4) + "2" + a.src.substring(a.sre.length - 4, a.src.length); } function change2() { var a = window.event.srcElement; if (a.tagName == "IMG") a.src = a.src.substring(0, a.src.length - 5) + a.src.substring(a.src.length - 4, a.src.length); } document.onmouseover = changel; document.onmouseout = change2; //--> </SCRIPT></HEAD> <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></BODY> </HTML>Можно, разумеется, придумать и другие средства взаимодействия с графическими элементами. В главе 6, например, мы создали картинку с динамически изменяющимся размером. В разделе 7.2 мы передвигали картинки с помощью мыши. Вы можете также попробовать передвигать картинки без участия пользователя (что создаст эффект анимации) или изменят). их стилевое свойство filter.