Flávia Siqueira#flawebwriting

Imagem interativa com CSS

Um mapa como exemplo:

- Destacar os continentes quando se passa o mouse em cima;- Utilizaremos sprintes para a troca das imagens;- As legendas serão inseridas com as pseudo-classe: target

O resultado será:

Mãos à obra.....

Organizar as imagens....

O CSS Sprite é uma técnica para trabalhar com as imagens que vamos utilizar na animação

Base....

<ul class="continentes">

<li id="america"><a href="#america" >América</a>

</li><li id="europa">

<a href="#europa" >Europa</a></li><li id="asia">

<a href="#asia" >Ásia</a></li><li id="africa">

<a href="#africa" >África</a></li><li id="oceania">

<a href="#oceania" >Oceania</a></li>

</ul>

Marcação e regras do Css

.continentes {position:relative; float:left; height:260px; width:535px; margin-left:100px; background:url(mapa.gif) no-repeat left top;}

Posicionamento das imagens no css

.continentes li{list-style:none; position:absolute; }

#africa{width:120px; height:140px; left:208px; bottom:40px;}

#america{width:226px; height:258px;}

#asia{width:214px; height:164px; right:40px;}

#europa{width:121px; height:75px; left:211px; top:6px;}

#oceania{width:103px; height:89px; right:0; bottom:17px;}

.continentes li a{display:block; height:100%; text-indent:-999px;}

A Troca Das Imagens

.continentes li a:hover{background:url(mapa.gif) no-repeat;}

li#america a:hover{background-position:0px -275px;}

li#africa a:hover {background-position:-227px -381px;}

li#europa a:hover {background-position:-227px -284px;}

li#asia a:hover {background-position:-347px -287px;}

li#oceania a:hover{background-position:-359px -457px;}

Legenda

:target

A chave para o funcionamento da legenda é a pseudo-classe :target, uma das novidades do CSS 3.

Uma página pode ser dividida em seções com âncoras. Um texto longo, por exemplo, tem o índice no topo com os links para os títulos. Ao clicar em um destes links você é levado para a parte da página correspondente a ele.

A pseudo-classe :target permite estilizar o destino deste link. Resalva para o não funcionamento desta pseudo-classe no Internet Explorer.

A Legenda

<ul class="legenda"><h2>Legenda</h2><li><a href="#africa" >África</a></li><li><a href="#america" >América</a></li><li><a href="#asia">Asia</a></li><li><a href="#europa" >Europa</a></li><li><a href="#oceania" >Oceania</a></li><li><a href="#" >Nenhum</a></li>

</ul>

legenda li {margin:0 10px; line-height:18px;}

.legenda a:hover{color:#999;}

.legenda{position:relative; float:left; margin:50px; list-style-type:circle; list-style-position:inside; background:#eaeaea; border:3px solid #c0c0c0; padding-bottom:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

Adicionando Dica No Mapa<ul class="continentes">

<li id="america"><a href="#america" title="area da america“>América</a><span>Área: 42 189 120 km²</span>

</li><li id="europa">

<a href="#europa" >Europa</a><span>Área: 10 498 000 km²</span>

</li><li id="asia">

<a href="#asia" >Ásia</a><span>Área: 43 810 582 km²</span>

</li><li id="africa">

<a href="#africa" >África</a><span>Área: 30.221.532 km²</span>

</li><li id="oceania">

<a href="#oceania" >Oceania</a><span>Área: 9.008.458 km²</span>

</li>

</ul>

E por fim duas regras CSS. Uma para esconder e outra para mostrar a informação.

.continentes li span{display:none; position:absolute; top:50px; left:50px; padding:7px; background:#333; color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; z-index:500; width:120px; text-align:center;}

.continentes li a:hover + span{display:block;}