Recurso de exibir ou ocultar Objeto 
Autor: LUIZ G.
Visitado 318,
Seguidores 1,
Compartilhado 0
Olá. Estou fazendo um projeto que precisa que uma determinada imagem X só apareça na visualização de PC e fique oculta nas mais baixas e uma imagem Y que não apareça em PC, mas apareça nas mais baixas.
Não consigo fazer isso, pq por algum motivo, quando seleciono que uma imagem não seja exibida, ela fica oculta para todas as outras visualizações.
isso compromete que eu determine uma imagem mais adequada para PC e outra mais adequada para CELULARES.
Publicado em
Hi Luiz,
unfortunately I have to confirm that on the page layout you can define to hide some elements, but if you do such elements are hidden for all the lower resolutions, and it isn't therefore possible to define a content to be displayed on mobile only.
You can however do it for the header/footer.
Please let me know if there is anything else I can help you with. Kind regards.
***** Google Translation:
Olá Luiz,
infelizmente tenho que confirmar que no layout da página você pode definir para ocultar alguns elementos, mas se você fizer isso, esses elementos ficarão ocultos para todas as resoluções mais baixas e, portanto, não é possível definir um conteúdo para ser exibido apenas no celular.
No entanto, você pode fazer isso para o cabeçalho/rodapé.
Por favor, deixe-me saber se houver mais alguma coisa em que eu possa ajudá-lo. Atenciosamente.
... (It > Pt) ... .... se você estiver interessado, isso pode ser feito com meu código EXTRA muito simples...
... neste caso você deve postar o LINK da sua página online e indicar qual imagem deseja que seja automaticamente substituída ou restaurada para uma determinada resolução, ...caso contrário ignore minha mensagem...
.
ciao
.
Autor
Olá, Kol... Obrigado pela resposta.
Eu ainda não iniciei o Projeto, porque dependo da certeza dessa solução para aceitá-lo.
Mas a necessidade é a seguinte:
O cliente quer que, dentro da "Área de Conteúdo" para as visualizações para PC e Notebook, seja usada uma imagem 16:9. Para as visualizações de Tablet e Mobile seja usada uma outra imagem 1:1 ou 4:3, na mesma posição relativa.
De forma que se o visitante acessar pelo PC ou Notebook, ele verá uma imagem como um banner. Porém, se acessar por Tablet ou Mobiles, verá no mesmo lugar, uma outra que melhor seja visualizada, uma vez que os textos nas imagens podem ficar pequenos ou grandes demais.
Abraço.
ciao, .... infelizmente sem LINK não consigo avaliar...
... neste caso bastaria que você publicasse um exemplo simples online como normalmente se faz para testes reais, e se o fizer voltarei aqui...
.
ciao
.
Autor
Ok. Vou criar uma página no meu site de teste e te mando por aqui. Deixa só acakmar os trabalhos aqui!
Muito obrigado!
Autor
Olá, Kol...
Segue o link da página de exemplo - https://www.lugan.com.br/clientes.html
Note que existem duas imagens. Uma em formato de banner que deve aparecer no formato PC e Notebook (isso a gente consegue fazer...). E a segunda imagem em formato de quadrado que só deveria aparecer nos formatos de Tablet e Celulares, mas isso não consigo fazer, porque para que apareça, precisa aparecer também junto da outra.
Tem alguma solução pra isso?
Obrigado.
... OK ... não se trata mais de substituir uma imagem no lugar de outra, mas de controlar a visibilidade do seletor...
... em comparação com a estrutura que você aplicou ao seu exemplo atual, você obtém o controle das duas imagens de 720px com este código CSS EXTRA mXedia-querXy:
<style>
@media(min-width:720px) { #imCell_7 {display:none !important} }
</style>
...........................
ciao
.
... cole o código nas propriedades da página, nesta seção:
>> Passo 3 - Mapa > A janela Propriedades da Página >
> Opções na aba Avançadas >
> ▪Código personalizado: > 3^ opção > Antes de fechar a tag HEAD
.
.
Autor
Wow!!! Perfeito, Kol! vc deve ser de outro planeta!
Funcionou perfeitamente!
Para o Projeto, como eu devo fazer? Acredito que essa parte { #imCell_7 {display:none !important} deve mudar, certo?
... clique com o botão direito na imagem para localizar o seletor de referência...
.