Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Estou fazendo em HTML um menu, com imagens onde ele muda a imagem quando passo o mouse em cima dele.
Porem, no Firefox não está funcionando o menu, ele aparece normal, mas não está funcionando como link e nem muda a imagem. Abaixo está o código do que eu fiz:
<tr>
<td height="30" background="imagem/menu_bg.jpg" onMouseOver="this.background='imagem/menu_bg1.jpg';" onMouseOut="this.background='imagem/menu_bg.jpg';" style="cursor:hand; padding-left:33px" onClick="location.href='/monta.asp?link=???'" align="left">
Nome do Link
</td>
</tr>Alguem pode me ajudar?
Só uma coisa: se for usar o :hover no td, o mesmo não funcionará no Internet Explorer 6, só se estiver aplicado ao a.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
No IE 8 ele funcionou, que é o que meu cliente usa.
Agora preciso fazer, no TD funcionar no Firefox, alguma dica de como fazer isso em tabelas?
Não era bem mais fácil usar uma marcação sem tabelas ?
um CSS sprite cairia muito bem:
http://imasters.com.br/artigo/6041/css/css_sprite/
Em todo caso, acredito que você teria que usar:
backgroundImage.src = ...
ou
backgroundImage = 'url()'..
não lembro bem qual 'é o certo'.
As dicas do Bruno são totalmente válidas, mas não é melhor trabalhar com CSS?
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
>
As dicas do Bruno são totalmente válidas, mas não é melhor trabalhar com CSS?
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Ué Thiago, mas a dica do Bruno não é com CSS??? :unsure:
E Guilherme, se tu fizer isso com CSS, e com uma boa marcação HTML, tu vai ser mais feliz...
por exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu com CSS</title>
<style type="text/css"> font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-bottom: 0.2em;
color: #033;
background: #EEE;
padding: 2px 4px;
width: 132px;
}ol.menu {
font: 14px Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
width: 140px;
}ol.menu li {
background: url([http://semlabs.co.uk/assets/img/content/web_design_icon_pack01.png](http://semlabs.co.uk/assets/img/content/web_design_icon_pack01.png)) -18px -8px no-repeat;
border-bottom: 1px solid #EEE;
}ol.menu li.contato { background-position: -127px -104px; }
ol.menu li.contato:hover { background-position: -17px -138px; }
ol.menu li.home { background-position: -128px -42px; }
ol.menu li.home:hover { background-position: -156px -42px; }
ol.menu li.login { background-position: -183px -264px; }
ol.menu li.login:hover { background-position: -73px -264px; }
ol.menu li.projetos { background-position: -18px -42px; }
ol.menu li.projetos:hover { background-position: -45px -42px; }
ol.menu li a {
display: block;
padding: 2px;
background: #FFF;
margin-left: 20px;
text-decoration: none;
color: #066;
}
</style>
</head>
<body>
<h3>Menu</h3>
<ol class="menu">
<li class="home"><a href="home.html">Home</a></li>
<li class="projetos"><a href="projetos.html">Projetos</a></li>
<li class="login"><a href="login.html">Acesso Restríto</a></li>
<li class="contato"><a href="contato.html">Contato</a></li>
</ol>
</body>
</html>Ué Thiago, mas a dica do Bruno não é com CSS???
ahauhauhauha Sim, mas queria saber por que não quer trabalhar com CSS. ^_^
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Pessoal...
Seria, mas não é o caso, é um freela que estou fazendo pra um cara, e ele me pediu em tabelas...
Podem me ajudar?
Tentou?
>
Em todo caso, acredito que você teria que usar:
backgroundImage.src = ...
ou
backgroundImage = 'url()'..
não lembro bem qual 'é o certo'.
Mas ainda assim, você pode usar CSS sprite.. e deixar todo esse Javascript de lado.
Boa tarde,
Sei que já existem vários, mas resovli contribuir montando mais um menu horizontal basico sem dropdown de exemplo com a técnica CSS-SPRITES.
Testado e funcional em IE5 (incrível ! rsrs)/IE6/IE7/FF/CHROME/SAFARI.
http://angelorubin.zymichost.com/menu_sprites.html
Espero que ajude.
O que acontece com o nosso amigo é o mesmo que acontece com vários webdesigners - O cliente não quer saber se CSS é bom ou se dá chóque , ele quer o site em dois dias e funcionando.
faça certo, não use tabelas para dados não tabulares
a {
a:hover {
faça esse teste e veja se ficou da forma que queria
abraço