..:::Главная | Учебники | Документация | Хитрости | Юмор  | Программирование  | Мои ссылки  | Download | Скрипты  | Написать :::..





Рисунки, рисунки...
Как много в этом слове...
Для моей души...


Рейтинг@Mail.ru
top mail.ru
punto
Rambler's Top100
Партия патриотов



Copyrights © 2003 MIxa. All rights reserved.

be number one Рейтинг@Mail.ru

Немного об вставке изображений на сайт

само изображение задаётся тэгом <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>
Теперь посмотрите, что у нас получилось:


Ну вот и всё, что я хотел сказать вам по этому поводу.