Estes dias eu estava no trabalho e o designer mandou uma imagem pronta para colocar no site.
Essa imagem tinha dias botoes desenhados.
Um para ligar e outro para mandar e-mail.
Os botões estavam em cima de uma logo e não tinha como pedir para mudar a imagem pois o designer tinha ido embora.
Então eu tive uma ideia de colocar links em cima dos botões de maneira mapeada e assim não precisaria mudar a imagem.
Isso faz com que se o usuário clicar ou passar o mouse em cima da imagem, ela vai mostrar que tem um link.
Um botão tem que ligar e o outro tem que mandar e-mail.
Solução:
O primeiro passo foi encontrar um site que fizesse o mapeamento da imagem pra mim, ou dos locais que eu quisesse. Então encontrei esse: Free Online Image Map Generator (image-map.net)
Lá eu mando a imagem e depois determino o mapa e o local de onde quero colocar o link.
Depois disso usei o código para colocar na parte HTML.
No meu caso foi no Node.JS, tive que mudar algumas coisas mas funcionou perfeitamente.
<img src="images/tunna/art-3.png" useMap="#image-map" alt="limited vip availability" width="100%"/>
{!detect &&(
<map name="image-map">
<area target="_blank" alt="Call 855-STUNNA1" title="Call 855-STUNNA1" href="tel:855-788-6621" coords="198,586,711,766" shape="rect"/>
<area target="_blank" alt="Email Us" title="Email Us" href="mailto:JOBXSTUNNA@RPBTOB.COM&subject=Buy a Ticket" coords="862,584,1382,768" shape="rect"/>
</map>
)}
{detect && (
<map name="image-map">
<area target="_blank" alt="Call 855-STUNNA1" title="Call 855-STUNNA1" href="tel:855-788-6621" coords="200,215,52,159" shape="rect"/>
<area target="_blank" alt="Email Us" title="Email Us" href="mailto:JOBXSTUNNA@RPBTOB.COM&subject=Buy a Ticket" coords="239,160,386,218" shape="rect"/>
</map>
)}
Veja o código 1.1.
Eu coloco a imagem na tag image e uso o useMap com um valor começando do # tag. Depois eu faço um map name com o mesmo valor e nele eu tenho as áreas onde eu preciso colocar o que vai acontecer; por exemplo: coordenadas, links, href e tudo mais.
Eu tive que fazer duas coisas porque um mapeamento era para o acesso mobile e o outro era para o acesso web pelo browser.
Na condição {detect} eu verifico se é mobile ou web baseado no tipo do browser que acessou. Vou colocar aqui a função.
function detectMob() {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
];
return toMatch.some((toMatchItem) => {
//alert(navigator.userAgent.match(toMatchItem));
return navigator.userAgent.match(toMatchItem);
});
}
var detect = detectMob();
Note que a variável detect está aqui logo depois da função e dentro do HTML do Node.Js eu verifico se veio null ou not null
Então assim funcionou e mesmo sendo só imagem na página, consegui colocar um link.
