[Resolvido] Redirecionamento interno com imagem

Oi pessoal, tudo bem?

Estou utilizando um código em html para redirecionar meu usuário através de uma imagem para uma página web

O código é o seguinte

<div class="holder">
<div class="imagem" data-title=""><img alt="" data-moblet="22307864" src="https://i.ibb.co/HtDWNcs/teste-de-caixa-promocional.png" style="height: 219px; width: 185px;" /></div>    

<style type="text/css">.holder {
display: flex;
justify-content: center;
}
.imagem {
width: 2000px;
margin: 0px;
position: relative;
text-align: center;
}
.imagem::after {
content: attr(data-title); /* estilo que coloco a legenda no lugar */
position: absolute;
width: 100%;
bottom: -20px;
left: 0;
}
</style>      

Mas não tem funcionado :frowning:

Ele funciona apenas no editor, mas no app instalado (iOS e Android) não tem executado

Como isso pode funcionar?

coloca o data-moblet=“22307864” dentro da div veja como

<div class="imagem" data-title="" data-moblet="22307864" ><img alt="" src="https://i.ibb.co/HtDWNcs/teste-de-caixa-promocional.png" style="height: 219px; width: 185px;" /></div>   

Faça esta alteração depois me avisa se deu certo ok

1 Curtida

Olá @youssefbrahim !

Ao que parece, você inseriu o “data-moblet” na tag de imagem.

Mas não apontou para o sistema que é um item clicável na tela

Este documento traz um exemplo de botão com data-moblet, veja se te ajuda, por favor: https://jsfiddle.net/lucasranna/2dyrpoev/1/

1 Curtida

Não consegui, @uiliancaetano tentei igual você me orientou, mas ainda não está “clicável”

Oi, @LucasRanna com o elemento button eu tenho êxito em fazer, mas com a “imagem clicável” infelizmente não consigo :frowning:

@youssefbrahim @LucasRanna @uiliancaetano Ver se esse resolve

<span color:=" style="><img data-moblet="22855208" src="https://i.imgur.com/5zETAEY.png[/img]" style="width: 100%; height: px;" /></span>

abraços

Ainda não funcionou :frowning:
Será que é um problema no iOS? Não tenho Android pra testar :x

Android funcionou de boa pra mim

Bom dia, é para funcionar sim.

@LucasRanna bom dia, você poderia tirar esta dúvida ref. ao IOS.

obrigado

Teste o código que está neste documento aqui, por favor: https://jsfiddle.net/lucasranna/2dyrpoev/5/

Veja se é o que você quer, por favor

Muito obrigado pessoal pela ajuda! Funcionou!

Se possível, abusando da boa vontade de vocês, como eu removo essas “margens” entre os itens?

 <div class="holder"><button class="btn" data-moblet="22307864" href="#"><img data- 
 moblet="22307864" src="https://i.imgur.com/TLYDXUu.png[/img]" 
 style="width: 100%; border: 0; border-style: none; margin: 0px;" /></button><button 
 class="btn" data-moblet="22307864" href="#"><img data-moblet="22307864" 
src="https://i.imgur.com/TLYDXUu.png[/img]" style="width: 100%; border- 
 style: none; border-width: 0px; margin: 0px;" /></button>
 <style type="text/css">.holder {
 display: flex;
 justify-content: space-around;
 }
.imagem {
 width: 2000px;
 margin: 0px;
 position: relative;
 text-align: center;
 border: 0
 }
 .imagem::after {
 content: attr(data-title); /* estilo que coloco a legenda no lugar */
 position: absolute;
 width: 100%;
 bottom: -20px;
 left: 0;
 }
 {
 margin-left:100px;
 }
  .btn {
    color: #ffffff;
    background-color:#ffffff;
    width: 100%;
    border-radius: 0px;
    border: none;
    margin-top: 0px;
    margin-bottom: 5px;
	    font-size:15px;
    text-decoration: none;
}
</style>
</div>

Está ficando desta forma da imagem, e eu gostaria dos itens mais juntinhos (tanto no centro como nas margens)

Pelo que pude observar essas caixas tem bordas com sombras, por isso elas estão assim afastadas.

Criei uma sem sombras veja que aproximou mais uma da outra.

Conforme postei á cima, editei o link da sua imagem deste código, basta pegá-lo e inserir no seu app.