Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Link estranho na imagem ~ SOBRENATURAL =|

Anderson Ferreira

Perguntado por Anderson Ferreira,

 Share

Pergunta

Anderson Ferreira

Anderson Ferreira

Postado
Postado (editado)

Olá galera, :D

Como colocar um hover em uma imagem?

Eu coloquei uma imagem através da tag <img>. E nesta tag, coloquei a propriedade id="logo", ficando da seguinte maneira:

HTML:

<a href="http://www.link.com/"><img id="logo" src="img/logo2.jpg" /></a>
Ai eu queria colocar um efeito de "hover" sobre esta imagem, igual a do logotipo da Globo.com, que quando passa o mouse, ele troca de imagem, ou seja, trocando aquele logotipo mais escuro, por um mais claro. Então, no CSS coloquei da seguinte maneira: CSS: 
#logo { width: 290px; height: 67px; margin: 10px 0 0 0; }
#logo:hover { background: url(../img/logo_hover.jpg); }

Mais não funciona =\

Não tem hover :'(

Como fazer isto?

Obrigado,

Anderson Ferreira

Editado por Anderson Ferreira
Link para o comentário
Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

  • 0
vini_loock

vini_loock

Postado
Postado (editado)

É simples...

para fazer isso você não coloca imagen no html, você só coloca uma div com o tamanho das imagens. e depois no css coloca:

background-image: url("imagen.gif")--para a imagen que vai ficar aparecendo

e...no hover da div você coloca igual, só que com imagen diferente:

background-image: url("imagen_hove.gif")

Dai ficaria parecido com isso:

<html>
<head>
<style type="text/css">
#imagen{background-color:#00ccff;width: 300px;height: 300px;}
#imagen:hover{background-color: red;}
</style>
</head>
<body>
<a href="#"><div id="imagen"></div></a>
</body>
</html>

Só que em vez de background-color, você vai usar background-image

Qualquer coisa posta ai

Fl.w

Editado por vini_loock
Link para o comentário
Compartilhar em outros sites
  • 0
Matheus Matos

Matheus Matos

Postado
Postado

hehe Caro Anderson, (mlk muito zikka)

como você quer colocar um background em uma imagem? :huh:

como o CSS é lido primeiro que o HTML, ele irá colocar a imagem de background na tag, depois, o html vai colocar a imagem que está no src. Ou seja, seu background não está pegando de maneira alguma.

Para isso, você teria que utilizar outra tag, como já é um link, a tag seria o a. Ou seja, dê o id ao link e não à uma imagem dentro do link, assim:

<a href="http://futuro-dominador-do-google.com" id="logo"></a>

depois, no css, é só fazer o que você fez e mostrou aí.

Agora, eu tenho uma dica, dessa maneira, a imagem de hover, só será carregada quando for solicitada, ou seja, quando passar o mouse por cima do logo, dependendo do tamanho da imagem, esse efeito não será imediato, pois ela terá que ser carregada. O que se pode fazer é juntar as imagens de hover e normal em uma só, alinhe a imagem no topo da tag com position-y. No hover, basta mudar o position-y da imagem de background. Assim:

#logo {background: url(logo.png) no-repeat top}

#logo:hover {background: url(logo.png) no-repeat -50px}

Tenta fazer aí e se quiser posta! ;)

Vlw

Matheus Matos

Link para o comentário
Compartilhar em outros sites
  • 0
Anderson Ferreira

Anderson Ferreira

Postado
  • Autor
Postado

Salve Matheus .. Eu tentei do seu jeito, e não funcionou :S // Já tinha testado desta maneira antes, mais não funciona :'(

E Vini, da sua maneira funciona, eu também já havia testado assim. O problema é ... Coloquei uma <div>, e defini um background pra essa <div>. E nessa <div>, defini 300px de Width.

O problema é q, como a <div> ta dentro de um link, é óbvio q a <div> inteira vai ser um link. Mas éra só pra os 300px de width ser o link. Sendo q o link dessa <div>, estranhamente, ta pegando a página inteira, ao invés de só os 300px =\

Um exemplo é o print da maneira do Vini, q seria a mais correta (na minha opinião), e q a tem melhor resultado até agora:

imgfp.png

A parte vermelha é o logotipo de 300px, é uma <div>... Ele ta dentro de um link <a>... Éra pra sómente ele ser o link, mas a parte de azul, também esta sendo o link :S (mas a parte cinza, o menu, não é link :D)

Deu pra entender? :$

Link para o comentário
Compartilhar em outros sites
  • 0
Anderson Ferreira

Anderson Ferreira

Postado
  • Autor
Postado

Não, não é assim.

Eu fiz uma imagem, e coloquei um hover nela... Funcionou normalmente. Coloquei ela através de uma <div>

Ai eu queria q esta imagem fosse um link, então coloquei <a> na <div>, pra esta <div> (q é minha imagem) virasse um link...

Até ai tudo bem, o problema é q no Firefox e no Chrome, o link ficou na página inteira (horizontalmente).

Sabe a imagem q postei acima? Então, era pra só a parte de vermelho ser o link, mas não sei como, a parte de azul também virou link :mellow:

SOBRENATURAL :ninja:

Link para o comentário
Compartilhar em outros sites
  • 0
Anderson Ferreira

Anderson Ferreira

Postado
  • Autor
Postado (editado)

Fechei sim o <a>... Quando coloco a tag <img> ao invés da tag <div>, funciona normalmente, ou seja, o link fica correto, só na parte de vermelho. O problema é q coma tag <img> o hover da imagem não funciona =\

Lembrando q este problema só acontece no Firefox e no Chrome (é por incrível q pareça, o IE é o único q funciona dessa vez ~ KKK)

Código da pág abaixo:

HTML:

<div id="geral">

     <div class="cabecalho">

        <a href="http://www.link.com/" ><div id="logo"></div></a> <!-- ############### ESTA AQUI O LOGOTIPO ############### -->

        <div id="pesquisar">
            <form action="" method="get">
                <span class="negrito cinza-escuro">PESQUISAR:</span>
                <input name="pesquisar" />
            </form>
        </div>


        <div class="menu">

            <div class="azul">
                <ul class="principais">
                    <li class="titulo-azul"><a href="#">categorias</a></li>
                </ul>

                <ul class="azul-ativo">
                    <li><a href="#">CMS</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Programação</a></li>
                    <li><a href="#">Rede</a></li>
                    <li><a href="#">Linux</a></li>
                    <li><a href="#">Software</a></li>
                    <li><a href="#">Tecnologia</a></li>
                </ul>
            </div>


            <div class="laranja">
                <ul class="principais">
                    <li class="titulo-laranja"><a href="#">ferramentas</a></li>
                </ul>

                <ul class="laranja-ativo">
                    <li><a href="#">Contador de caractéres</a></li>
                    <li><a href="#">Contador de palavras</a></li>
                    <li><a href="#">Gerador de Meta-Tags</a></li>
                    <li><a href="#">Velocímetro</a></li>
                </ul>
            </div>


            <div class="verde">
                <ul class="principais">
                    <li class="titulo-verde"><a href="#">serviços</a></li>
                </ul>

                <ul class="verde-ativo">
                    <li><a href="#">Criação de sites</a></li>
                </ul>
            </div>


            <div class="cinza">
                <ul class="principais">
                    <li class="titulo-cinza"><a href="#">sobre</a></li>
                </ul>

                <ul class="cinza-ativo">
                    <li><a href="#">Contato</a></li>
                    <li><a href="#">Criadores</a></li>
                    <li><a href="#">História</a></li>
                </ul>
            </div>

        </div> <!-- FIM - DIV "menu" -->


        <div id="busca"></div>

    </div> <!-- FIM - DIV "cabecalho" -->

</div> <!-- FIM # DIV "geral" -->


[...]
CSS: 
@import url("reset.css");
@import url("menu.css");

body { background: #dfe9ed; }

.negrito { font-weight: bold; }
.cinza-escuro { color: #666666; }

/* #barra-topo { width: 100%; height: 10px; background: #FFF; } */

#geral { position: relative; top: 20px; left: 50%; margin-left: -480px; width: 960px; }

/* ---------------- Cabecalho --------------- */

.cabecalho    { height: 115px; width: 960px; }

#logo { background: url(../img/logo.jpg); width: 290px; height: 67px; margin: 0 0 0 20px; }
#logo:hover { background: url(../img/logo_hover.jpg); }

#pesquisar { width: 290px; height: 30px; margin: 20px 0 0 35px; }
#pesquisar input { border: #00B6E7 1px solid; }
#pesquisar input:hover { border: #FAB106 1px solid; }

.barra { background: #0c0c0c; width: 100%; height: 5px; margin: 40px 0 0 0; float: left; }


[...]

Editado por Anderson Ferreira
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,9k
×
×
  • Criar Novo...