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