O documento aborda a criação de um mapa interativo utilizando CSS, onde continentes são destacados ao passar o mouse e legendas são apresentadas através da pseudo-classe :target. A utilização de sprites CSS é discutida para a animação e troca de imagens. Além disso, são apresentadas regras CSS para estilizar elementos, exibir informações adicionais e garantir interatividade no mapa.

1. Flávia Siqueira#flawebwriting

2. Imagem interativa com CSS

3. 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

4. O resultado será:

5. Mãos à obra.....

6. Organizar as imagens....

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

9. Base....

10. <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>

11. Marcação e regras do Css

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

13. Posicionamento das imagens no css

14. #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{list-style:none; position:absolute; }#africa{width:120px; height:140px; left:208px; bottom:40px;}#america{width:226px; height:258px;}

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

18. A Troca Das Imagens

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

21. li#americaa: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;}

22. Legenda

23. :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.

24. 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>

25. 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;}

26. Adicionando Dica No Mapa<ulclass="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>

27. 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;}