Como é feito o botão do Hotmail?

[adiemus 0]

Alguém sabe me dizer como é feito o botão do Hotmail?Creio que é CSS. Baixei o CSS deles mas não consegui aplicar com sucesso.ALGUÉM PODE ME AJUDAR? É MEIO URGENTE!Obrigado!

[Martinelli 0]

qual botao?

[fael 1]

é um input com imagem de background.use

.btn {  background-image: url(caminho_da_imagem);}

[tiagoborges.net 0]

Velho, é HTML + CSS + JS:Sakae (Só o botão "Excluir"):

<td class="P" nowrap onmouseover="MO()" onmouseout="MU()" onclick="Subm('delete',0,1)"><img src="http://64.4.55.109/i.p.delete.gif" border=0 align=absmiddle hspace=1 alt="Excluir"> <a href="#" onclick="Subm('delete',0,1);return false;" tabindex=1>Excluir</a></td>

Qm faz o efeito de troca de CSS é o JS:

http://by10fd.bay10.hotmail.msn.com/cgi-bi..._90900000014.js

O arquivo é meio pirado! Baixa ele e se tiver dúvidas postae.você já tem o CSS né? Agrupa tudo agora.Att,

[adiemus 0]

Caramba! põe pirado nisso!O código é doido!Vou tentar, mas será que não existe uma forma mais simplificada que dê o memso efeito?abraços galera!

[tiagoborges.net 0]

Ve se é marromenos assim: http://www.includes.com.br

[adiemus 0]

Cara, valeu! É isso mesmo!Mas o que significa /?id_mdl=6, /?id_mdl=7,.../?id_mdl=14Eu sei que se eu mudo o número ele vai para o item do menu correpondente, mas não consigo aplicar o efeito hover.htc...Falta um detalhe que não sei qual é. :(

[tiagoborges.net 0]

É que eu to usando um arquivo e cada id_mdl seria um id de um módulo que tem dentro de um banco.

 

Voltando pro assunto:

 

É assim, esse código eu peguei do brinkster.com, faz uma data, dae adaptei pra mim.

 

Para que o html abaixo funcione:

 

<table align="center" border="0" cellpadding="0" cellspacing="3" class="tb_menu"> <tr>  <td class="tbMenuItem" classOver="tbMenuItemOver" classDown="tdMenuItemDown" onClick="javaScript:Link('http://designer.includes.com.br')">Principal</td> </tr></table>

você vai precisar dos estilos:

 

.tb_menu {	background-color: #663399;	border: 2px solid #663399;	color: #CCCCCC;	cursor: hand;	font-family: Verdana, Tahoma, sans-serif, Arial, Helvetica;	font-size: 10px;	font-weight: bold;	height: 25px;	text-align: center;	vertical-align: top;	width: 780px;}.tbMenuItem {	border: 1px solid #663399;	behavior:url(funcoes/hover.htc);	color: #FFFFFF;	padding: 2px;}.tbMenuItemOver {	background-color: #9966CC;	border: 1px solid #FF66FF;	color: #FFFFCC;	padding: 2px;}.tdMenuItemDown {	background-color: #FF66FF;	border: 1px solid #000000;	color: #333333;	padding: 2px;}

Vai precisar criar um arquivo hover.htc:

 

<PUBLIC:COMPONENT><PUBLIC:PROPERTY NAME="classOver" /><PUBLIC:PROPERTY NAME="classDown" /><PUBLIC:ATTACH event="onmouseout" handler="swapEffect" /><PUBLIC:ATTACH event="onmouseup" handler="swapEffect" /><PUBLIC:ATTACH event="onmousedown" handler="swapEffect" /><PUBLIC:ATTACH event="onmouseover" handler="swapEffect" /><PUBLIC:ATTACH event="onmouseup" handler="swapEffect" /><script>// Copyright 1999 InsideDHTML.com, LLC. All rights reserved// This code can be reused as long as the above copyright// notice is not removed.var classDefault = element.classNamefunction swapEffect() {	switch (event.type) {  case "mousedown": 	 if (classDown)    element.className = classDown + " " + classDefault  break;  case "mouseup":  case "mouseover": 	 if (classOver)    element.className = classOver + " " + classDefault 	 break;  default: 	 element.className = classDefault	}}</SCRIPT></PUBLIC:COMPONENT>

O pouco que entendi do CODE do brinkster diz que o .htc faz com q o html substitua o class normal por classOver e classOut.

 

Lembrando que este código só funciona no IE.

 

Ah e a página mudou para: http://designer.includes.com.br pq a principal vai filtrar entre o blog, uma revista que to fazendo e o principal.

 

Agora voltando aos id_mdl's sakae:

 

ASP [/tr][tr]<table align="center" border="0" cellpadding="0" cellspacing="3" class="tb_menu">

<tr>

<td class="tbMenuItem<% if id_mdl = "" then response.Write("Selected") %>" classOver="tbMenuItemOver" classDown="tdMenuItemDown" onClick="java script:Link('<%= Home %>')">Principal</td>

<%

Set rsMdl = Server.CreateObject("ADODB.Recordset")

if ucase(request.ServerVariables("APPL_PHYSICAL_PATH")) = "C:\INETPUB\WWWROOT\INCLUDES.COM.BR\DESIGNER\" then

rsMdl.Open "SELECT * FROM tb_mdl WHERE menu = true ORDER BY mdl",Conex,3,3

else

rsMdl.Open "SELECT * FROM tb_mdl WHERE menu = 'true' ORDER BY mdl",Conex,3,3

end if

if rsMdl.recordcount = empty then

response.Write("<td>|</td><td>Ainda não existem MÓDULOS cadastrados.</td>")

else

Do while NOT rsMdl.EOF

response.Write("<td>|</td><td class=""tbMenuItem")

if trim(id_mdl) = trim(rsMdl("id_mdl")) then response.Write("Selected")

response.Write(""" classOver=""tbMenuItemOver"" classDown=""tdMenuItemDown"" onClick=""java script:Link('"& Home &"?id_mdl="& rsMdl("id_mdl") &"')"">"& rsMdl("mdl") &"</td>")

rsMdl.movenext

Loop

end if

Set rsMdl = Nothing

%></tr>

</table>

[/tr]

 

Att,

[adiemus 0]

Cara, você está ajudando pra caramba! Valeu mesmo!

 

Mas estou tendo problema com o arquivo htc...

Quanto ao CSS só o class="tb_menu" é identificado.

 

Criei uma pasta css/styles.css e funcoes/hover.htc e nada do arquivo htc funcionar...

 

aquele efeito que eu quero não aparece de jeito nenhum...

 

o que pode ser?

[tiagoborges.net 0]

Usa na chamada do behavior assimbehavior:url(../funcoes/hover.htc); ou talvez ../../

[adiemus 0]

Cara, você vai me bater...TESTEI TODAS ESSAS FORMAS E O LINK FICAVA AZUL E QD PASSAVA O MOUSE ELE SUBLINHAVA...tentei

BEHAVIOR: url(funcoes/hover.htc);

BEHAVIOR: url(../funcoes/hover.htc);

BEHAVIOR: url(../../funcoes/hover.htc);

Deve estar faltando alguma coisa "besta" que não consigo enchergar!

[tiagoborges.net 0]

Digamos que o arquivo q você esta usando é:/teste.htmlE que o css está integrado ao arquivo, e a pasta do funcao é subpasta ao arquivo teste.html/funcao/hover.htcEntão usa desta forma:BEHAVIOR: url(funcoes/hover.htc);Caso contrário, não funcione, posta a parte do html q está usando aqui pra mim ver.

[adiemus 0]

Tá aí!

 

<html>

<head>

<title>MENU</title>

<link rel="stylesheet" href="css/estilos.css">

</head>

<body>

<p align="center">

<table class="tb_menu" border="0" cellspacing="0" cellpadding="0">

  <tr class="tr_background">

    <td class="tbMenuItem" classOver="tbMenuItemOver" classDown="tdMenuItemDown" classSelected="tbMenuItemSelected">

    <A HREF="#">INICIAR</A></td>

    <td><font color="#000000">::</font></td>

   

    <td class="tbMenuItem" classOver="tbMenuItemOver" classDown="tdMenuItemDown" classSelected="tbMenuItemSelected">

    <A HREF="#">LOGOFF</A></td>

    <td><font color="#000000">::</font></td>

   

    <td class="tbMenuItem" classOver="tbMenuItemOver" classDown="tdMenuItemDown" classSelected="tbMenuItemSelected">

    <A HREF="#">SAIR</A></td>

  </tr>

</table>

</p>

</body>

</html>

[tiagoborges.net 0]

Não fiz nenhum modificação no teu CODE.

 

Baixae e extrai com as pasta internas!

 

Testei no desktop e funcionou:

 

Link: http://www.includes.com.br/downloads/ex_hover.htc.zip

 

Att,

[adiemus 0]

Valeu!!! Deu certo! Obrigado pela força cara!!

 

A única diferença do arquivo que você mandou pro meu foi que no meu CSS estavam todas as classes que você criou para o site, e no que você mandou só tinha as que eu realmente iria precisar!

 

obrigado mais uma vez!

 

[]´s