Шрифт:
В таких ситуациях может помочь атрибут alt. Его значение – текст, который будет показан при наведении указателя мыши на картинку или если картинка не загрузится. Это даст возможность пользователям, которые не видят картинок, понять, хотят ли они увидеть их вообще, а тем, кто видит, поможет понять, что именно они видят.
В листинге 4.7 приведен пример кода для задания альтернативного текста.
<html>
<head>
<title>Встраивание изображения</title>
</head>
<body>
<img src="image.jpg" width="100" align="right" vspace="50" hspace="50" alt="Фотография карликового вислоухого кролика"/>
</body>
</html>
На рис. 4.7 показан результат обработки кода из листинга 4.7 при условии, что изображение загрузилось.
Рис. 4.7. Альтернативный текст при загруженном рисунке
Альтернативный текст всплывает при наведении указателя мыши на картинку.
На рис. 4.8 показан результат обработки кода из того же листинга, но в случае, когда изображение не загрузилось.
Рис. 4.8. Альтернативный текст при незагруженном рисунке
Вместо картинки виден поясняющий текст, и при наведении указателя мыши на рисунок появляется всплывающая подсказка.
Предварительная загрузка
Если изображений на сайте много и их загрузка занимает немало времени, можно не испытывать терпение посетителя, а дать ему примерное представление о том, что он увидит.
Это делается с помощью атрибута lowsrc, где в качестве значения используется адрес изображения худшего качества, но того же содержания, что и основная картинка. При первом проходе браузером страницы это изображение будет быстро загружено, и у пользователя появится представление о том, что он увидит дальше. При последующем проходе страницы браузер загрузит главное изображение хорошего качества.
Совет
Для получения изображения худшего качества нужно использовать специальные программы для работы с изображениями. В них возможно уменьшение размеров изображения за счет уменьшения количества цветов, например.
В листинге 4.8 приведен пример кода, который задает изображение с предварительной загрузкой.
<html>
<head>
<title>Встраивание изображения</title>
</head>
<body>
<img src="image.jpg" width="100" vspace="10" hspace="10" lowsrc= "lowimage.jpg">
</body>
</html>
На рис. 4.9 показан результат предварительной загрузки изображения, на следующем проходе браузер загрузит изображение нормального качества.
Рис. 4.9. Предварительное изображение
Альтернативный текст и предварительная загрузка изображения делают сайт удобнее.
Ссылки изображения
Используя картинки, можно повысить функциональность сайта, создавая изображения-ссылки.
Ссылки – главное в Интернете, и, естественно, существует возможность использовать в качестве ссылок изображения.
Для создания ссылки из картинки достаточно поместить элемент IMG внутри тегов <А> и </A>, при этом вокруг картинки появится рамка, которой можно управлять с помощью атрибута border. Синие рамки вокруг рисунков выглядят некрасиво, зато с ними сразу понятно, что можно щелкнуть кнопкой мыши на этой картинке и перейти на другую страницу.
В листинге 4.9 приведены примеры создания ссылок-изображений с различными размерами рамок.
<html>
<head>
<title>Встраивание изображения</title>
</head>
<body>
Ссылка без задания атрибута border (рамка ставится по умолчанию)<br/>
<a href="#"><img src="image.jpg" width="100" vspace="10" hspace="10" alt="Фотография карликового вислоухого кролика" /> </a><br />