Карта изображения, CSS
Возможно вы видили во всяких соц сетях такую функцию ка котметить друга и при наведении на определённую область вам подсвесивает лицо и пишется подпись (Наведите на лицо арни или парня)? Щелкая мышью на отдельных частях изображения, пользователь может выполнять те или иные действия, переходить по той или иной ссылке на другие документы и т.п. Так вот данная фишка пишется достаточно просто и вполне достаточно будет стандартных средств HTML и CSS.
Теперь перейдём к практике
Создадим файл: index.htm
и вставми в него следующий код:
1 2 3 4 5 6 7 | <head> <title>Карты изображений</title> </head> <body> <div id="photo"> <p class="epple"><a href="http://www.epple.ru">ссылка 1</a></p> <p class="helpmate"><a href="http://www.#">ссыл |
добавим теперь между тэгами Head стили для карты
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <style>#photo { width: 300px; /*ширина контейнера*/ height: 194px; /*высота контейнера*/ position: relative; /*относительное позиционирование*/ background: url(images/epple.jpg) no-repeat; /*фоновое изображение без повторений*/ } #photo a { position: absolute; /*абсолютное позиционирование*/ width: 50px; /*ширина контейнера гиперссылки*/ height: 50px; /*высота контейнера гиперссылки*/ text-indent: -1000em; /*отрицательный отступ*/ } #photo a:hover { border: 1px solid #663300; /*рамка контейнера гирерссылки*/ } #photo .epple a { top:35p |
Нет комментариев на "Карта изображения, CSS"
Нет комментариев.
Вы можете продолжить обсуждение этой статьи на форуме