Dean 1 #1 Posted June 15, 2010 Bom, primeiro queria parabenizar o Rhys e todos que apoiaram para que essa seção fosse criada.Esse é meu primeiro tutorial, não sei se posto aqui ou em outras linguagens, algumas coisas estão aqui outras lá, mas isso os moderadores decidem.Esse tutorial não está muito bom porquê fiz ontem a noite com sono, mas se alguém não entender fala que eu arrumo. Modificando estilos através de javascript Chega de conversa e vamos iniciar o tutorial, se você não tem um pouco de conhecimento em javascript vai ficar meio complicado, recomendo ler as aulas do bajt ou esse tutorial:http://forums.otserv.com.br/f45/curso-de-javascript-10946/. A função que modifica estilos é simples, você pode usá-la assim: document.getElementById('NomeDoElemento').style.nomeDoEstilo = propriedade; Agora,explicando: document.getElementById('NomeDoElemento') Vamos dizer que "identifica" o objeto que será transformado. style.nomeDoEstilo = propriedade; = Os estilos você pode verificar aqui: http://codepunk.hardwar.org.uk/css2js.htm, em propriedade vai o que você quer atribuir, por exemplo, se modificasse o estilo backgroundColor, a propriedade seria o código da cor para qual queira mudar. Para dar de exemplo, fiz uma página igual o sistema do baixaki demonstrado no outro tutorial, porém esse é em javascript e não em flash: [spoiler=Código] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function mudar(cor){ document.getElementById('apDiv1').style.backgroundColor = cor; } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #apDiv1 { background:#F00; position:absolute; left:72px; top:65px; width:391px; height:204px; z-index:1; } #apDiv5 { background:#FF0; position:absolute; left:170px; top:269px; width:97.75px; height:50px; z-index:1; } #apDiv4 { background:#00F; position:absolute; left:268px; top:269px; width:97.75px; height:50px; z-index:1; } #apDiv3 { background:#0F0; position:absolute; left:366px; top:269px; width:97.75px; height:50px; z-index:1; } #apDiv2 { background:#F00; position:absolute; left:72px; top:269px; width:97.75px; height:50px; z-index:1; } --> </style> </head> <body> <div id="apDiv1"></div> <div id="apDiv2" onmouseover="mudar('#F00')"></div> <div id="apDiv3" onmouseover="mudar('#0F0')"></div> <div id="apDiv4" onmouseover="mudar('#00F')"></div> <div id="apDiv5" onmouseover="mudar('#FF0')"></div> </body> </html> Qualquer dúvida é só perguntar. Share this post Link to post Share on other sites
