Ho visto sulla guida che visibility:hidden è come se nascondesse l'oggetto che cmq occupa posto nella pagina diversamente da display:none..
Come mai io nella mia pagina se ho un div che contiene un immagine cn visibility:hidden è un div successivo quello me lo sovrappone??
sto cercando di realizzare un semplice menu a scorrimento che simuli il comportamento dell'immagine allegata..
Come posso regolare lo scorrimento del div fino al div successivo??probabilmente il codice che ho scritto nn è dei migliori..sn accettati consigli o altre soluzioni
codice->
<html>
<head>
<title>sposta immagine</title>
<script type="text/javascript">
var spostamento = 10;
var contatore=0;
var timer;
var timer1;
function miafunc(){
var top = document.getElementById("div1").style.top;
var elem=document.getElementById("div1");
elem.style.zIndex="-1";
top = parseInt(top);
top += spostamento;
contatore=contatore+1;
document.getElementById("div1").style.visibility=" visible";
document.getElementById("div1").style.top=top+"px" ;
timer=setTimeout("miafunc()",100);
if(contatore==10){
clearTimeout(timer);
timer=0;
contatore=0;
}
}
function ritorna(){
var top = document.getElementById("div1").style.top;
top = parseInt(top);
top -= spostamento;
contatore+=1;
document.getElementById("div1").style.top=top+"px" ;
timer1=setTimeout("ritorna()",100);
if(contatore==10){
clearTimeout(timer1);
timer1=0;
contatore=0;
}
}
</script>
</head>
<body>
<input type=checkbox name=radio onclick="miafunc();"> sposta immagine</input>
<input type=checkbox name=radio2 onclick="ritorna();">torna indietro</input>
<div id=div1 style="position:absolute; top:60px;visibility:hidden;" >
[img]paperino.jpg[/img]</img>
</div>
<div id=div2 style="border:solid; border-color:red; width:100px;height:100px;background-color:blue;position:absolute;">
</div>
<div id=div2 style="border:solid; border-color:red; width:100px;height:100px;background-color:blue;">
</div>
</body>
</html>
Rispondi quotando