Caro Maujor,
Tenho uma dúvida, eu alterei a imagem do topo do meu blog, ficou legal, mas como fazer com que a imagem inteira seja um link "home" e não apenas o nome do meu blog (como está no seu, por exemplo)?
Desde já agradeço e muito obrigado. (utilizo o wordpress)
Retirei a citação acima de um comentário postado por um visitante em uma matéria deste Blog. Daí veio a motivação para escrever esta matéria explicando como resolver a dúvida daquele leitor. Tomarei como base para desenvolver esta matéria os templates do WordPress baseados no tema Padrão, que serve de base para a grande maioria dos temas.
Observe abaixo o código onde é inserida a imagem de topo no Blog:
<div id="headerimg">
<h1>
<a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a>
</h1>
<div class="description">
<h2>
<?php bloginfo('description'); ?>
</h2>
</div>
</div>
Entendendo o código:
H1
é o nome do Blog, inserido com código PHP e é também um link para a Home Page. No meu Blog é o texto "Blog do Maujor" escrito no canto inferior direito do topo. Passe o mouse sobre aquele texto e você constatará que ali é um link;H2
é a descrição do Blog, inserido com código PHP. No meu Blog é o texto "Tutoriais e pensamentos – CSS, web standards, acessibilidade, tableless" escrito logo abaixo de "Blog do Maujor";Assim, examinando o código acima e como já tinha sido observado pelo meu visitante, somente o nome do Blog é um link.
Queremos que toda a imagem do topo seja um link.
A imagem abaixo é um link para meu site. Experimente clicando nela e a HP do CSS para Web Design vai abrir em uma nova janela.
O código da imagem acima:
<a href="http://www.maujor.com/" target="_blank">
<img src="/blog/mat-img/flower.jpg" alt="Link para CSS para Web Design" width="100" height="100" />
</a>
Hum assim é fácil!
A imagem foi inserida no código HTML da página (e não via CSS) e a seguir foi colocada dentro de um elemento âncora (link) a
Quando a imagem é inserida via CSS, como é o caso da imagem de topo do WP temos que procurar outra solução, pois não há um elemento img
na marcação para ser colocado dentro de um elemento a
.
Na verdade o que estamos querendo é fazer com que o elemento HTML onde foi inserida a imagem de fundo se torne ele todo (em toda a extensão de sua largura e de sua altura) um link. Notar que as dimensões deste elementos corresponde às dimensões da imagem de fundo ou seja do topo.
Vimos no código do WP que o elemento que contém a imagem do topo é a
<div id="headerimg"></div>
Ah! então é fácil, basta fazer:
<a href="http://www.maujor.com/blog>
<div id="headerimg">
...
</div>
</a>
Resolvido! Vai funcionar? Sim vai, agora toda a imagem de topo tornou-se um link. Mas, há um problema. Você saberia dizer qual é o problema com o código acima? Garanto a você que vai funcionar legal e este não é o problema.
Se você submeter ao validador o código XHTML mostrado, vai resultar o seguinte erro:
"…o Doctype não permite o elemento <div id="headerimg"> no contexto onde foi colocado…
Uma possível causa para o erro é que você colocou um elemento nível de bloco dentro de um elemento inline…"
E foi isto exatamente o que fizemos de errado. Colocamos um elemento nível de bloco (uma DIV
) dentro de um elemento inline (um link a
) o que não é permitido.
E que tal se invertermos? Ou seja, colocamos o elemento a
dentro do elemento DIV
. Isto é permitido.
Mas, não vai funcionar, pois a área clicável de um elemento link é seu conteúdo (um texto ou uma imagem como naquele exemplo lá em cima onde a imagem está no código HTML.
Obrigado às CSS pela regra display:block; através da qual você pode atribuir um comportamento nível de bloco a um elemento inline definindo para ele dimensões (largura e altura).
Então se declararmos display:block; para o elemento a e fizermos suas dimensões iguais as dimensões da imagem do topo o problema estará resolvido pois agora o elemento a
é um retângulo, independente de ter ou não um texto ou imagem dentro dele.
Teoria esclarecida e entendida vamos à prática, em um passo a passo:
WP
.<div id="headerimg">
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><div class="description"><?php bloginfo('description'); ?></h2></div>
</div>
<div id="headerimg">
<a href="/seuBlog" style="display:block;width:760px;height:200px;"></a>
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?><h2></h2></div>
</div>
Onde:
href=endereço da HP do blog;
width:760px – a largura da imagem de topo;
height:200px – a altura da imagem de topo.
Esta não é a única maneira de fazer da imagem de topo um link. Você poderia, por exemplo, retirar a imagem das CSS e colocá-la na marcação, passando para a imagem o nome e a descrição do blog (quem sabe com letras trabalhadas, sombras etc.) e declarar regras CSS para image replacement.
No exemplo mostrado as regras CSS para o link foram declaradas inline, mas você poderá colocá-las na folhas de estilos do blog se preferir.
Além disto mesmo seguindo certinho os passos desta matéria, poderá sair algo errado devido a alguma condição particular do tema que você usa, pois como eu disse no início a matéria baseia-se no tema que serviu de base para a maioria dos temas, mas não todos. Se você tiver dificuldades, poste nos comentários que sempre terá alguém para ajudá-lo. Se você alterou no seu Blog poste informando se deu ou não certo.
Recebi um email perguntando se é possível trocar a imagem de topo por uma animação em FLASH. O que você acha?
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Muito obrigada! Testei de várias formas e só assim deu certo!!!
Mesma coisa do Patrick: não rolou a troca de imagem do topo.... E agora?!
Abrass...
Olá Maujor, tentei fazer isto na última versão do wordpress que baixei hoje, porém não está surtindo efeito..
O que pode ser?
Abraço
cara seu site é o melhor ouviu, o melhor !!!
aonde você for pode contar comigo, quero ser seu amigo, sempre, o conhecimento é um benção de Deus, e aquele que distribui o conhecimento sempre será abençoado, !!!
Cara, vc entende do assunto, parabéns!
Santo Google, Santo Maujor.
Seu artigo é de junho de 2006. Hj é setembro de 2007 e vc conseguiu me resolver um grande problema.
Obrigado!!!!!!
Gostaria de saber como faço para colocar um link tipo "clique aqui" para abrir uma determinada imagem em uma outra página?
Obrigada
Era isso mesmo que eu procurava!
muito bom esse esclarecimento feito!
Olá:
Seu blog é muito bom, e tem explicações muito importantes. Tenho 2 perguntas: 1 - Eu criei um blog no novo blogger (blogspot). Coloquei uma imagem no header, e quero colocar uma imagem de fundo, mas, não sei como fazer... Tem que adicionar o código no CSS? 2 - Quando o modelo tem uma imagem que rola com a barra de navegação, como é que faz prá deixá-la fixa? Grata e Feliz Ano Novo!
to meio atrasado (o post é do dia 23...), mas quero agradecer pela grande dica! Nunca tinha visto tão bem explicado como você faz!
Um abraço