Adicionar links em uma imagem

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.