[Resolvido] Estilos, Scripts E Htmls Separados

Saudações a todos,

Estou tentando resolver alguns problemas para colocar meu portifólio no ar, mas o processo é beeeeeem lento já que sou designer gráfico e entendo pouquíssima coisa de códigos. Mesmo assim, vou me arriscando.

Um dos problemas (tem muitos... :-)

é esse: encontrei um código que permite que o rollover das minhas caixas de texto sejam controlados apenas pelo onMouseOver. Até ai blz, ajeitei o treco mais ou menos como queria e funcionou redondo. O código é esse:

Código (inteiro como encontrei)

<html>
<head>
<title>Untitled Document</title>

<STYLE>
P, body, td, tr, div {
scrollbar-base-color: #333333;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #333333;
scrollbar-3dlight-color: #333333;
scrollbar-darkshadow-color: #333333;
scrollbar-track-color: #333333;
scrollbar-arrow-color: #000000;
}
</STYLE>

<script language="JavaScript">

// begin absolutely positioned scrollable area object scripts
// Extension developed by David G. Miles
// Original Scrollable Area code developed by Thomas Brattli
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}

bw=new verifyCompatibleBrowser()
var speed=50
var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}

function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}

function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}

function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}

function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}

var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
// end absolutely positioned scrollable area object scripts
</script>
<style type="text/css">
#divUpControl{position:absolute; width:4; left:300; top:5; z-index:1; text-align: right}
#divDownControl{position:absolute; width:4; left:300; top:5; z-index:1; text-align: right}
#divContainer{
position:absolute;
width:173;
left:auto;
top:0;
height:144;
overflow:hidden;
clip:rect(0,450,250,0);
visibility:hidden;
}
#divContent{position:absolute; widht:173; height: 144; top:5}
</style>
</head>
<body bgcolor="#333333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="InitialiseScrollableArea()">


<div id="divUpControl" style="left: 0px; width: 173; height: 4; top: 0">
<div align="center"><a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="images/strutc_00.gif" width="173" height="4" border="0"></a></div>
</div>
<div id="divDownControl" style="left: 0px; width: 173; height: 4; top: 132px">
<center><a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="images/strutc_00.gif" width="173" height="4" border="0"></a>
</center>
</div>
<div id="divContainer"; top:0; width: 173px; height: 144px; visibility: visible">
<div id="divContent"; top:0; height:144; width: 173px>

These license terms are an agreement between Sysinternals (a wholly owned subsidiary of Microsoft Corporation) and you. Please read them. They apply to the software you are downloading from Systinternals.com, which includes the media on which you received it, if any. The terms also apply to any Sysinternals.

</div>
</div>

</body>
</html>

Só que o negócio ficou meio zoneado, ai resolvi separar tudo:

box_content.css

#divUpControl{
position:absolute;
width:4;
left:300;
top:5;
z-index:1;
text-align:right
}
#divUpControl2{
left:0px;
width:173;
height:4;
top:0"
}
#divDownControl{
position:absolute;
width:4;
left:300;
top:5;
z-index:1;
text-align:right
}
#divDownControl2{
left:0px;
width:173;
height:4;
top:132px"
}
#divContainer{
position:absolute;
width:173;
left:auto;
top:0;
height:144;
overflow:hidden;
clip:rect(0,450,250,0);
visibility:hidden;
}
#divContent{
position:absolute;
widht:173;
height:144;
top:5
}

box_scroll.css

#box_scroll {
P, body, td, tr, div {
scrollbar-base-color: #333333;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #333333;
scrollbar-3dlight-color: #333333;
scrollbar-darkshadow-color: #333333;
scrollbar-track-color: #333333;
scrollbar-arrow-color: #000000;
}

box_scroll_area.js

// begin absolutely positioned scrollable area object scripts
// Extension developed by David G. Miles
// Original Scrollable Area code developed by Thomas Brattli
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}

bw=new verifyCompatibleBrowser()
var speed=50
var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}

function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}

function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}

function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}

function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}

var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}

O Html que não funciona (no processo de limpeza...)

<html>
<head>
<title>Untitled Document</title>
<link href="purgatorio/estrutura/box_content.css" rel="stylesheet" type="text/css">
<link href="purgatorio/estrutura/box_scroll.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="purgatorio/estrutura/box_scroll_area.js"></script>
</head>
<body bgcolor="#333333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="InitialiseScrollableArea()">
<div id="box_scroll">
<div id="divUpControl">
<div align="center">
<a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">
<img src="images/strutc_00.gif" width="173" height="4" border="0">
</a>
</div>
</div>
</div>
<div id="divDownControl2">
<center><a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="images/strutc_00.gif" width="173" height="4" border="0"></a>
</center>
</div>
<div id="divContainer">
<div id="divContent">
These license terms are an agreement between Sysinternals (a wholly owned subsidiary of Microsoft Corporation) and you. Please read them. They apply to the software you are downloading from Systinternals.com, which includes the media on which you received it, if any. The terms also apply to any Sysinternals
</div>
</div>
</div>
</body>
</html>

O lance é que não sei fazer as chamadas das functions do .JS no Html, e ainda tenho dúvidas se separei os elementos corretamente (não sei se a "#divDownControl2" e a "#divUpControl2" deveriam existir, se estão colocadads no lugar errado...). Lembrando que não manjo coisa alguma de códigos; faz uma semana que descobri a possibilidade (no sentido de um ser humnano comum conseguir fazê-lo he, he...) de separar os elementos do html e faço tableless com a ajuda de um programa (table2css).

[ ]'s

PS: Como é que se coloca os códigos dentro de boxes (aqui no fórum)?

Resolvido: o problema era erro de caminho (ai não tem código que funcione, he, he...)

<link href="purgatorio/estrutura/box_content.css" rel="stylesheet" type="text/css">

Edição feita por: Dark Panda, 25/11/2009, 17:01.

#1 Dark Panda

1 user(s) are reading this topic

[Resolvido] Estilos, Scripts E Htmls Separados

#1 Dark Panda

1 user(s) are reading this topic

Entrar