Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Приемы сайтостроения (маленькие хитрости) arrow Web: маленькие хитрости. Склеиваем разрезанную картинку (div, CSS, html, img, пример)
28.02.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Web: маленькие хитрости. Склеиваем разрезанную картинку (div, CSS, html, img, пример) Печать E-mail
Автор megabax   
16.04.2010 г.
New Page 1

Склеиваем разрезанную картинку (div, CSS, html, img, пример)

Предположим, у нас есть вот такая картинка:

Склеиваем разрезанную картинку (div, CSS, html, img, пример)

И мы хотим, что бы у нас на сайте было графическое меню, как на картинке. И еще что бы этот сайт нормально индексировался в поисковых системах. Очевидно, картинку нам придется разрезать и потом каким то волшебным образом "склеить", при чем так, что бы выглядела она как целая. Действительно, если мы хотим, что бы поисковики нас проиндексировали, каждый пункт меню нужно сделать отдельной картинкой. К тому же, если мы выбираем какой то пункт меню, то у нас вместо слова "О компании" должно быть что то, соответствующее данному пункту. Тоесть, другая картинка.

Сначала разрежем картинку на кусочки в каком нибудь графическом редакторе и сохраним эти кусочки в отдельных файлах. готовые кусочки картинки вы можете скачать здесь (тэги div, CSS, html, img, пример).  

Что бы их "склеить", применим вот такой HTML-текст:

<html>

<head>
<title></title>
<STYLE TYPE="text/css">
<!--
#menu {
position:Absolute ;
left:0;
top:0;
}
#header {
position:Absolute ;
left:178;
top:1;
}
#image {
position:Absolute ;
left:178;
top:63;
}
-->
</STYLE>
</head>

<body>

<div id='menu'>
<img src="menu.PNG">
</div>
<div id='header'>
<img src="header.PNG">
</div>
<div id='image'>
<img src="girl.PNG">
</div>

</body>

</html>

Как видим, ничего сложного, просто используем тэг Div с CSS-стилем, содержащем абсолютное позиционирование. Вот как выглядит этот документ в браузере:

Склеиваем разрезанную картинку (div, CSS, html, img, пример)

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

 

Последнее обновление ( 16.04.2010 г. )
 
« След.
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги