carregar funcao javascript via css

marcelo morais · Agosto 22, 2009

Boa noite pessoal...sou novo aqui aqui no forum e sou estudante de programaao para web mas como todo aluno apressado sempre quero alguma informaçao um pouco mais alem do que eu sei e a minha duvida é esta...estou montando um site e na minha pagina inicial tem um menu onde os botoes(inicio-biografia-contatos)possuem um efeito em javascript(onmouseover) onde o botao desaparece e quando afasto o mouse o botao volta aparecer esses botoes eu criei no firework então eles estao com jpg e eu simplesmente adicionei este codigo a cada um deles e eles são os mesmo para cada botao so que os codigo ficaram muito extenso ou seja para cada botao tem um codigo então resumindo o que eu quero..quero criar um arquivo .js externo com o codigo em javascript(efeito) e criar um css que chame esta funçao na pagina index e nas outras paginas... vejam ai codigo da minha pagina index

OBS:notem ai que eu já criei na pagina o arquivo javascript.js e o arquivo css

e outa coisa não foi eu quem criei este codigo eu copiei de um site de scripts de graça,mas prometo que futuramente eu mesmo estarei fazendo os meus...por favor me ajudem e desde já agradeço marcelo morais

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Site marcelo Morais</title>
<script LANGUAGE=javascript src='../site marcelo/javascript.js'></SCRIPT>
<link rel='stylesheet' href="../site marcelo/estilos/folha.css"></link>
</head>
<body SCROLL='auto' TEXT='#000000' BGCOLOR='#FFFFFF' TOPMARGIN='0' LEFTMARGIN='0' LINK='#0000FF' VLINK='#800080' ALINK='#FF0000'>

<div id='palco' name='palco' style='position:absolute; left:0px; top:0px; width:800px; height:550px;' align='center' valign='top'><img id='Palco' name='Palco' src='../site marcelo/imagens/capa.png' border='0' width='800' height='550'></img></div>

<div id='botao biografia pagina index' name='botao biografia pagina index' style='position:absolute; left:100px; top:104px; width:130px; height:50px;' align='left' valign='top'>
<p>
  <script language="JavaScript">
<!--
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }       
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

//-->

</SCRIPT>
</p>
<p align="center" style="FILTER: alpha(opacity=90)" onmouseover=nereidFade(this,100,30,50) 
            onmouseout=nereidFade(this,20,50,15)><a href="Conteudo/biografia.htm"><img src="imagens/biografia.jpg" alt="click aqui para ver a minha biografia" name="botao biografia pagina index" width="130" height="50" border="0" id="botao biografia pagina index" style="FILTER: alpha(opacity=90)" onMouseOver=nereidFade(this,100,30,15) 
            onMouseOut=nereidFade(this,20,50,15)></a></p>
</div>

<div id='botao artigos pagina index' name='botao artigos pagina index' style='position:absolute; left:100px; top:146px; width:130px; height:50px;' align='left' valign='top'>
  <script language="JavaScript">
<p>
<!--
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }  
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

//-->
</SCRIPT>
</p>
<p align="center" style="FILTER: alpha(opacity=90)" onmouseover=nereidFade(this,100,30,50) 
            onmouseout=nereidFade(this,20,50,15)><a href="Conteudo/artigos.htm"><img src="imagens/artigos.jpg" alt="click aqui e leia meus artigos" name="botao artigos pagina index" width="130" height="50" border="0" id="botao artigos pagina index" style="FILTER: alpha(opacity=90)" onMouseOver=nereidFade(this,100,30,15) 
            onMouseOut=nereidFade(this,20,50,15)></a></p>
</div>

<div id='botao fotos pagina index' name='botao fotos pagina index' style='position:absolute; left:100px; top:185px; width:130px; height:50px;' align='left' valign='top'>
  <script language=JavaScript>
<p>
<!--
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }    
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

//-->
</SCRIPT>
</p>

<p align="center" style="FILTER: alpha(opacity=90)" onmouseover=nereidFade(this,100,30,50) 
            onmouseout=nereidFade(this,20,50,15)><img src="imagens/fotos.jpg" alt="click aqui e veja as minhas fotos" width="130" height="50" style="FILTER: alpha(opacity=90)" onMouseOver=nereidFade(this,100,30,15) 
            onMouseOut=nereidFade(this,20,50,15)></p>
</div>

<div id='botao cd pagina index' name='botao cd pagina index' style='position:absolute; left:100px; top:235px; width:130px; height:50px;' align='left' valign='top'>
  <script language="JavaScript">
<p>
<!--
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
    clearTimeout(nereidFadeTimers[object.sourceIndex]);    
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

//-->

</SCRIPT>
</p>

<p align="center" style="FILTER: alpha(opacity=90)" onmouseover=nereidFade(this,100,30,50) 
            onmouseout=nereidFade(this,20,50,15)><img src="imagens/cd.jpg" alt="escute e adquira o meu CD" name="botao cd pagina index" width="130" height="50" id="botao cd pagina index" style="FILTER: alpha(opacity=90)" onMouseOver=nereidFade(this,100,30,15) 
            onMouseOut=nereidFade(this,20,50,15)></p>
</div>

<div id='botao contatos pagina index' name='botao contatos pagina index' style='position:absolute; left:100px; top:284px; width:130px; height:50px;' align='left' valign='top'>
  <script language="JavaScript">
<p>
<!--
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }  
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

//-->

</SCRIPT>
</p>
<p align="center" style="FILTER: alpha(opacity=90)" onmouseover=nereidFade(this,100,30,50) 
            onmouseout=nereidFade(this,20,50,15)><img src="imagens/contatos.jpg" alt="Escreva um email" name="botao contatos pagina index" width="130" height="50" id="botao contatos pagina index" style="FILTER: alpha(opacity=90)" onMouseOver=nereidFade(this,100,30,15) 
            onMouseOut=nereidFade(this,20,50,15)></p>
</div>

<div id='musica de fundo' name='musica de fundo' style='position:absolute; left:449px; top:132px; width:133px; height:48px;' align='left' valign='top'>
<EMBED HIDDEN='true' AUTOSTART='true' WIDTH='10' HEIGHT='10' SRC='abracando jacare.mp3' LOOP='true' REPEAT='true' VOLUME='100'></EMBED>
</div>

</body>
</html>

Danilo Moraes · Agosto 24, 2009

nussa, o codigo e bem grandinho e acho que não precisava dele, já que sua duvida não inclue nenhum erro no codigo... Eu não conheco nenhuma maneira de carregar codigo javascript em css, mas porque chamar o codigo por css? Adiciona o evento onmouseover mesmo e quando ele for ativado, ele executa a funcao. Era essa sua duvida? Se não for, por favor de mais detalhes de seu problema.

T+

Entrar

carregar funcao javascript via css

Pergunta

marcelo morais

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Danilo Moraes

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades