Картинка как ссылка

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

<a href="photo.html"><img src="photo.jpg"></a>

Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:

<a href="mailto:pochta@mail.ru"><img src="photo.jpg"></a>

Теперь в своем примере я сделаю картинку с симпатичной бабочкой ссылкой на страницу с картинками.

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
<a href="photo.html"> <img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" alt="Перейти на стр.с картинками"></a>
<font size="+1" face="Cosmic Sans, arial, verdana, courier">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
<br clear="left">
<b> Он словно сошел с картинки </b>
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником.
<i> Однако внимание привлекал не столько щегольской наряд пассажира, </i>
сколько импозантная, можно даже сказать, эффектная внешность.
<u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u>
ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>
   посмотреть

Как видно из примера, картинка "photo.jpg" стала ссылкой на страницу с картинками "photo.html". Вокруг картинки появилась рамка, убрать рамку можно с помощью атрибута border присвоив ему значение "0" или оставить соответственно присвоив значение 1,2,3, и т.д. В случае если вы хотите оставить рамку и раскрасить ее другим цветом, то вам на помощь придет атрибут bordercolor.

<img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" border="3" bordercolor="#CC0000 alt="Перейти на стр.с картинками">

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

В случае если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который вы задали для ссылок в тэге body с помощью link, vlink, alink, в этом случае атрибут bordercolor уже не влияет на цвет рамки вокруг картинки.

В выше изложенном примере видно, что при нажатии на картинку с бабочкой открывается страница с картинками в том же окне, для открытия страницы в новом окне используется атрибут target для тега <a></a>. К примеру вам надо чтобы при нажатии на маленькую картинку (small.jpg) открылась большая картинка (big.jpg), но в новом окне. Сама запись будет такого плана:

<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>

Добавляем в наш пример картинку с пейзажем и делаем эту картинку ссылкой на большую картинку с тем же пейзажем который откроется в новом окне браузера.


  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<a href="big.jpg" target="_blank"><img src="smal.jpg" width="240" height="180" hspace="30" vspace="5" alt="Посмотреть болшую картинку"></a>
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
<a href="photo.html"> <img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" alt="Перейти на стр.с картинками"> </a>
<font size="+1" face="Cosmic Sans, arial, verdana, courier">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
<br clear="left">
<b> Он словно сошел с картинки </b>
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником.
<i> Однако внимание привлекал не столько щегольской наряд пассажира, </i>
сколько импозантная, можно даже сказать, эффектная внешность.
<u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u>
ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>

</body>
</html>
   посмотреть


Вернуться назад Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru
  Помощь в заполнение налоговой декларации 3 ндфл подробнее.