Карта на основе CSS

maddogrts · February 6, 2008

Делал карту решил поделиться. Наверника описанно тысячу раз но все равно полезно .

Если знаете как лучше сделать милости прошу

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег COLGROUP</title>
<style>
.maprussia {
background: url("http://www.ostwest.com/upload/wysiwyg/image/cities/en-cities.gif");
width: 455px;
height: 290px;
position: relative;
}
.maprussia ul {
list-style: none;
float: left;
}
.maprussia a {
position: absolute;
width: 100px;
height: 20px;
color: #02828A;
text-decoration: none;
}
.maprussia a .note {
position: absolute;
bottom: -2em;
width: 10em;
padding: 0.2em 0.1em;
background-color: #fff;
text-align: center;
left: -30000px;
margin-left: -5em
}
.maprussia a:hover {
border:1px dotted #064145;
}
.maprussia a:hover .note {
left: 50px;
}
.maprussia .spb a {
top: 55px;
left: 0px;
}
.maprussia .vel a {
top: 87px;
left: 75px;
}

.maprussia .psk a {
top: 78px;
left: 0px;
}

.maprussia .mos a {
top: 110px;
left: 25px;
}

.maprussia .kaz a {
top: 133px;
left:37px;
}

.maprussia .eka a {
top: 150px;
left: 140px;
}

.maprussia .nov a {
top: 188px;
left: 165px;
}
.maprussia .irk a {
top: 212px;
left: 175px;
}
.maprussia .ula a {
top: 212px;
left: 279px;
}
.maprussia .vla a {
top: 237px;
left: 300px;
}
</style>
</head>
<body>
<div class="maprussia">
<ul>
	<li class="spb"><a href="/en/russian-cities/stpetersburg/"><span class="note">Saint Petersburg</span></a></li>
	<li class="vel"><a href="/en/russian-cities/veliky_novogorod/"><span class="note">Novgorod</span></a></li>
	<li class="psk"><a href="/en/russian-cities/pskov/"><span class="note">Pskov</span></a></li>
	<li class="mos"><a href="/en/russian-cities/moscow/"><span class="note">Moscow</span></a></li>
	<li class="kaz"><a href="/en/russian-cities/kazan/"><span class="note">Kazan</span></a></li>
	<li class="eka"><a href="/en/russian-cities/ekaterinburg/"><span class="note">Ekaterinburg</span></a></li>
	<li class="nov"><a href="/en/russian-cities/novosibirsk/"><span class="note">Novosibirsk</span></a></li>
	<li class="irk"><a href="/en/russian-cities/irkutsk/"><span class="note">Irkutsk</span></a></li>
	<li class="ula"><a href="/en/russian-cities/ulan_ude/"><span class="note">Ulan-Ude</span></a></li>
	<li class="vla"><a href="/en/russian-cities/vladivostok/"><span class="note">Vladivostok</span></a></li>
</ul>
</div>
</body>
</html>

работает естественно IE6 IE7, и все остальные

Иван Шумов · February 6, 2008

зачот .. сохранил на комп

Vlad · February 6, 2008

Понравился код. Не понял только зачем так далеко прятать note, аж за 30тыщ верст?

maddogrts · February 6, 2008

, это по желанию ) обычно обхожусь 9000 )

Sign In

Карта на основе CSS

Recommended Posts

maddogrts

Link to comment

Share on other sites

Иван Шумов

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

Обсуждения

Forums

Important Information