Карта изображений при помощи CSS

Aleksty · April 9, 2011

Карта изображений при помощи CSS

На скрине показано, как это работает -

1. Загружено фоновое изображение.

2. При наведении на любой черно-белый сектор картинки применяем hover, это просто украшаловка.

3. При наведении на цветные участки имеем ссылку на нужный вам ресурс.

В данном примере три условных поля:

- на главную

- новости

- контакты

Полей может быль сколь угодно много, не проблема.

В архиве Map_CSS.rar (193 Кб), 4 файла -

- index.html

- style.css (tooltip + mapimage)

- karta.png

- karta_hover.png

Стили меняются под ваши нужды без всяких проблем.

Кроме html и css больше ничего не применяется, никаких скриптов.

CSS:


body { 
	font-weight: bold;
	font-style: normal;
	font-size: 10px;
	vertical-align: top;
	outline: none;
}
a:link, a:visited, a:active {
	text-decoration: none;
}

/*--tooltyp for page--*/
a.tooltip span {
	position: relative; 
	width: 130px;
	display: none; 
	background: #ddd; 
	border: 1px solid #818181; 
	padding: 2px 2px; 
	line-height: normal;
	text-align: center;
	color: #000;
}
a.tooltip:hover span {
	position: relative; 
	display: block; 
	KHTMLOpacity: 0.90; /* прозрачность*/
	MozOpacity: 0.90;
	opacity: 0.90;
	-webkit-border-radius: 5px; /* скругленные углы */
	-moz-border-radius: 5px;
	border-radius: 5px;
	z-index: 100;
}

/*--map navigation for page--*/
#mapcss {
	width:226px;
	height:339px;
	position: absolute;
}
#mapcss div.map1 a {
	display: block;
	width: 113px;	/*размер активной области*/
	height: 113px;	/*размер активной области*/
	left: 0px;	/*координаты точки относительно картинки*/
	top: 0px;	/*координаты точки относительно картинки*/
	position: absolute;
}
#mapcss div.map2 a {
	display: block;
	width: 113px;	/*размер активной области*/
	height: 113px;	/*размер активной области*/
	left: 113px;	/*координаты точки относительно картинки*/
	top: 113px;	/*координаты точки относительно картинки*/
	position: absolute;
}
#mapcss div.map3 a {
	display: block;
	width: 113px;	/*размер активной области*/
	height: 113px;	/*размер активной области*/
	left: 0px;	/*координаты точки относительно картинки*/
	top: 226px;	/*координаты точки относительно картинки*/
	position: absolute;
}

/*——-1——*/
#mapcss div.fon1 {
	display:block;
	background: url(karta.png) 0 0 no-repeat;
	width:226px;
	height:339px;
	position: relative;
}
#mapcss div.fon1:hover {
	background: url(karta_hover.png) 0 0 no-repeat;
}
/*——-2——*/

/*——-3——*/

/*——-n——*/

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Решение карты изображений на CSS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
	<div id="mapcss" style="position: absolute; left: 400px; top: 100px;">
		<div class="fon1"></div>
		<div class="map1"><a href="index_1.html" class="tooltip"><span style="left: -100px; top: 20px;">на главную</span></a></div>
		<div class="map2"><a href="index_2.html" class="tooltip"><span style="left: -100px; top: 20px;">новости</span></a></div>
		<div class="map3"><a href="index_3.html" class="tooltip"><span style="left: -100px; top: 20px;">контакты</span></a></div>
	</div>
</body>
</html>

Координаты тултипа (тут - [span style=left:-100px;top:20px]), настраиваются индивидуально, хотя можно и в стилях.

Вот вроде и все...

Может кому и пригодится.

Скачать

Aleksty · April 10, 2011

Дополнение!

Координаты точки - это верхний левый угол обозначенной вами же фигуры, квадрата или прямоугольника.

Как найти: откройте в любом графическом редакторе и определите координаты.

Например есть картинка 500х500 пикселей.

Тогда активная область определяется так -

точка с координатами x=0; y=0; и размером 100х100 будет расположена в левом верхнем углу большой картинки, а

точка с координатами х=400; y=400; и размером 100х100, в нижнем правом углу большой картинки.

хотим в середине, пожалуйста - х=200; y=200; и так далее..

Serlutin · April 10, 2011

Aleksty, все ваши приёмы-уроки довольны полезны для новичков (и не только), однако здесь ведь это скоро потеряется. Так что предлагаю вам сделать свой блог, а потом сыпать фразами: «Эту проблему я описал в своей заметке», «Вот моя статья по этому поводу» или «Это самый лучший блог по CSS»

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

Edited April 10, 2011 by Serlutin

Быколай · April 10, 2011

я вчера, как увидел подряд 3 темы от одного автора подумал грешным делом спам какой. оказалось нет - рецепты

Aleksty · April 10, 2011

Парни, спасибо за советы, блог не нужен, просто, как вспомню, сколько времени потеряно на поиски всякой всячины, то жуть берет. Пусть уж народ поменьше мучается, раз есть такой замечательный форум, где можно найти ответы на практически любые вопросы, где и помогут, и ...накажут за косяки (это не камень в огород)

Sign In

Карта изображений при помощи CSS

Question

Aleksty

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Aleksty

Link to comment

Share on other sites

Serlutin

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

Aleksty

Link to comment

Share on other sites

Join the conversation

Forums

Important Information