É bastante comum um desenvolvedor web [4] precisar apresentar, em alguns projetos, grandes imagens que não podem ser totalmente exibidas em função de seus elevados valores de pixels. Uma imagem de 1000x1000px, por exemplo, não pode ser simplesmente “jogada” em um site, dado que existem determinados padrões de telas atualmente que, caso isso ocorra, a apresentação do site será prejudicada.
Mas existe uma maneira de exibir grandes imagens em uma página web de maneira fácil e sofisticada, que permite determinar qual o tamanho do “portview” a ser exibido e, através dos modernos recursos de drag & drop na web, permitir que a imagem possa ser visualizada na íntegra. É o que faz o SpryMap!
Usando o SpryMap
O Sprymap é bastante simples de ser usado e, em menos de 5 minutos, já é possível configurar e usar o SpryMap. Para começar, entre no site oficial do SpryMap [5] e faça download da última versão do SpryMap [6]. Você vai pegar um arquivo compactado que contém o arquivo principal (“spryMap.js”) e uma pasta “images” com somente um arquivo (“closedhand.cur”) que é o ícone de mãozinha fechada que aparece quando há interação com a imagem-alvo.
Algo importante a ser levado em consideração com o SpryMap é que este diretório “images” deve estar, necessariamente, localizado um nível acima da página que está usando o script. Caso contrário, o cursor de mão fechada não vai carregar corretamente. Caso você tenha um pouco mais de experiência, pode abrir o “spryMap.js” e fazer alterações para, mesmo que esta observação não seja cumprida, tudo continue funcionando.
Vejamos uma configuração básica:
<script src="spryMap.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var map = new SpryMap({
id : "worldMap",
height: 400,
width: 600,
startX: 200,
startY: 200,
cssClass: "mappy"
});
}
</script>
<img src="map.jpg" id="worldMap" alt="map" />
Como falado, bastante simples de se usar!
Opções do SpryMap
O SpryMap conta com uma série de opções que podem ser usadas para customizar ainda mais sua apresentação:
<script src="spryMap.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var map = new SpryMap({
// ID da imagem alvo
id : "",
// Largura apresentada (px)
width: 800,
// Altura apresentada (px)
height: 800,
// Posição inicial no eixo X (px)
startX: 0,
// Posição inicial no eixo Y (px)
startY: 0,
// Se a imagem terá pequena animação até parar ("true" ou "false")
scrolling: true,
// Tempo de duração da animação até parar (em ms)
scrollTime: 300,
// Se o scroll se limita ao tamanho da imagem ("true" ou "false")
lockEdges: true,
// Classe CSS que envolve o elemento SpryMap
cssClass: ""
});
}
</script>
Por exemplo, se fosse preciso exibir a imagem de id “map”, envolvida por uma div com classe “map-container”, através de uma apresentação de 300x200px, iniciando em 100px para ambos os eixos, o código seria:
<script type="text/javascript">
window.onload = function() {
var map = new SpryMap({
id : "map",
height: 200,
width: 300,
startX: 100,
startY: 100,
cssClass: "map-container"
});
}
</script>
E, como agora existe um ID e uma classe, é possível trabalhar com CSS para definir aparência, posicionamento, etc.
Conclusão sobre o SpryMap
“Spry”, em inglês, pode significar “ágil”. E é justamente essa uma das características do SpryMap: de maneira bastante ágil e simples, é possível configurar não somente mapas de alguma localização (como sugere o nome do script), mas fazer uma apresentação interativa e sofisticada de qualquer grande imagem através de espaços delimitados.
Com um pouco de criatividade, é possível criar sites com apresentações bem interessantes através do SpryMap. Deixe sua imaginação aberta e faça bastante uso do SpryMap!
