Немного об вставке изображений на сайт
само изображение задаётся тэгом
<img src="URL">.
URL, в данном слуцае, это путь к изображению. Если файл находится в одной папке с онным (запрашивающим документом), то
в
src пишется просто название файла-изотражения (например
<img SRC="primer_risunka.gif">). Далее дело немного усложняется - наш файл находится в
папке(каталоге), или вообще на другом сайте. В таких случаях пишут так:
<img src="primfolder/primer_risunka.gif">
<img src="http://www.my_site.ru/primfolder/primer_risunka.gif">
| Сразу и пример |
этом ничего сложного нет, по крайней мере я так считаю!
Теперь перейдём к рамкам и научимся менять размеры изображения.
Размеры задаются в процентах(от размеров самой картинки) или пикселях, с помощью параметров
width и heighn длинна и высота изображения соответственно. В нашем примере я писал тэг так:
<img src="grafic/loco.jpg" width="40%"heighn="40%">
Теперь наше изображение поместим в рамку. Сразу поставим цвет рамки и её толщину:
<img src="grafic/loco.jpg" width="40%"heighn="40%"
border="7" bordercolor="#000000">
|
|
Хочу заострить ваше внимание на одной важной особенности некоторых интернетчиков: они
путешествуют по интернету с отключенной графикой! Именно поэтому не надо перебарщивать с
картинками на своём сайте, особенно, если эти самые картинки являются ссылками (данные индивиды
просто их не увидят). Поэтому советую добавлять комментарии к своим картинкам.
А теперь о том, как это делается:
Комментарии прописываются параметром
alt="Комментарии"
(наведите мышкой на картинку).
<img src="grafic/loco.jpg" width="40%"heighn="40%"
border="4" bordercolor="#000000" ALT="Моё фото! Правда красивый?">
|
|
Теперь сделаем данное изображение ссылкой.
Делается это с помощью тэга
<A> , в который мы и помещаем нашу картинку:
<a href="mailto:mixa2000mv@mail.ru">
<img src="grafic/loco.jpg" width="40%"heighn="40%"
border="0" ALT="клик на почту"> < /a>
|
|
Так, с этим мы закончили! Взаключение могу посоветовать много пробовать и тем самым развивать
свои навыки.
Теперь перейдём к тэгу
MAP
Замечали ли вы, путешествуя по интернету, что на некоторых сайтах есть изображения-меню, нажав на
одну область изображения нам открывается одна ссылка, нажав на другую - другая ссылка. Вы не
задумывались случайно, долго соображая: "А не сделали ли они хитрую таблицу?"... Всё это легко делается и без
таблиц, хотя их многие используют для создания из кусков одного, но большого изображения(так
картинка быстрее грузится). Сейчас я научу вас таким штукам.
Основным атрибутом тэга MAP является имя, которое задаётся так:
<MAP name="Карта_number_one"> </MAP>
Сам по себе он ни на что не влияет, т.к. не задана область, а она задаётся тэгом
Area
Областью(shape) могут быть прямоугольник(rect), круг(circle) или многоугольник(poly). Давайте сразу пропишем для трёх
областей свой тэг area, со своей ссылкой
<Map name="mapta_first">
<area shape="rect"coords="11,10,113,108"href="НД">
<area shape="circle"coords="185,87,47"href="НД">
<area shape="poly"coords="11,139,26,130,102,120,132,161,69,183,20,183,33,158"href="НД">
</Map>
<img src="grafic/area.gif" usemap="#mapta_first"border="0">

В случае с прямоугольником мы вводим координаты начальной и конечной точки: coords="х1,у1,х2,у2" ;
с кругом ещё проще - вводим положение центра круга и его радиус: coords="X,Y,R," ;
С многоугольником немного сложнее - надо вводить координаты всех точек: coords="х1,у1,х2,у2,х3,у3...Xn,Yn"
С координатами закончили, теперь разберёмся с href="НД" (НД это неведомо-далёко, некий аналог забугорного URL),
этот атрибут показывает какой документ откроется при нажатии на данную область.
И, конечно, не забывайте писать знак # ,когда включаете карту у изображения(для тех, кто ещё не
понял, как её включать):
<img src="grafic/area.gif"
usemap="#mapta_first"border="0">
Хорошо, с основой мы справились, теперь немного поговорим об остальных тэгах:
Vspace="..." - задаёт расстояние по верт. до текста
Hspace="..." -||- по гориз.
Align="..." - положение текста, относительно изображения. Значения:
top выровнять по верху строку, следующую за изображением.
middle -||- по середине
left -||- слева
right -||- справа
И напоследок расскажу вам немного о динамических рисунках(при наведении на них курсора они
меняются). Ничего сложного в создании этого атрибута дизайна нет(я покажу как это надо записать,
чтобы это работало, а, позже, я посвящу этому статью).
В тэге рисунка пишутся параметры
OnMouseOver и
OnMouseOut.
Первый показывает, какой рисунок показать при наведении курсора, второй - какой показать при
отстранении. Пишется это так:
<a href= " URL(адрес ссылки)"
onMouseOver = "document.images[0].src='URL(второй)';"
onMouseOut="document.images[0].src='URL(первый)';" >
<img src=" URL(первый)"Border="0">
</a>
Теперь посмотрите, что у нас получилось:
Ну вот и всё, что я хотел сказать вам по этому поводу.