[javascript]img che si ingrandiscono
siccome sono molto inesperto e sto cercando fare un bel sito ormai da qualceh tempo, nel bene e nel male sto riuscendo a fare tutto quello che voglio, ma c'è un ennessimo problema che mi affligge.
ho messo 3 piccole foto su una parte del sito e voglio che al passaggio del mouse ogni foto si ingrandisce ed esce la descrizione(non è una commerciale ma un gioco)
ci sono riuscito tutto bene ma quando provo l 'anteprima ho tutto accavallato finchè non passo il mouse su una foto
posso evitare questa cosa???
il codice che ho messo:
Codice HTML:
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
"poi tutto quello che c'è nel sito"
<body onload="MM_showHideLayers('Layer2','','hide')">
<div id="Layer1" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')"><a href="#">
<img src="dj's/mrfreez.jpg" width="155" height="116"/></a></div>
<div id="Layer2" style="position: absolute; left: 267px; top: 234px; width:432px">
<img src="dj's/mrfreez.jpg" width="155" height="116"/>rimini
MASTER FREEZ dj hip hop r'n'b da una vita e mezzo, sta ora suonando al "YAB" (FI) oe tutto il resto di qualsisa txt </div>
</div>
<div style="position: absolute; width: 100px; height: 125px; z-index: 1; left:688px; top:302px" id="livello54">
<body onload="MM_showHideLayers('Layer4','','hide')">
<div id="Layer5" onmouseover="MM_showHideLayers('Layer4','','show')" onmouseout="MM_showHideLayers('Layer4','','hide')"><a href="#">
<img src="dj's/mrfreez.jpg" width="155" height="115"/></a></div>
<div id="Layer4" style="position: absolute; left: -3px; top: 236px; width:432px; height:298px">
<img src="dj's/mrfreez.jpg" width="155" height="116"/>
</div>
<p> </p>
<div style="position: absolute; width: 100px; height: 100px; z-index: 52; left:226px; top:31px" id="livello55">
<body onload="MM_showHideLayers('Layer6','','hide')">
<div id="Layer7" onmouseover="MM_showHideLayers('Layer6','','show')" onmouseout="MM_showHideLayers('Layer6','','hide')"><a href="#">
<img src="dj's/mrfreez.jpg" width="155" height="115"/></a></div>
<div id="Layer6" style="position: absolute; left: -229px; top: 206px; width:433px; height:298px">
<img src="dj's/mrfreez.jpg" width="155" height="116"/>a<p>sdddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
<p>ddddddddddddddddddddd
</div>
spero essere stato chiaro. ci sono riuscito in parte in quello che volevo ma voglio che quando apro la pagina web ci devono essere solo le foto piccole, poi se passi il mouse sopra ti esce tutto, ma non tutto accavallato come mi compare
trovato altro codice che mi può essere d'aiuto ma non riesco a mettere il testo sotto l'img.con html quando visualizzio la pagina mi da il testo sotto la prima img e cioè quella di dimensioni ridotte...come posso fare?
Codice HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
</head>
<body>
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: transparent;
padding: 0px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: transparent;
text-decoration: underline;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}
</style>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="livello1">
<a class="thumbnail" href="#"><img src="lampadario.jpg" width="302" height="604" border="0"><span style="position: absolute; left: 312px; top: 201px"><img src="flay.png" width="512" height="297"></span></a></div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: 406px; top: 187px" id="livello2">
<div style="position: absolute; width: 100px; height: 661px; z-index: 1; left:-400px; top:11px" id="livello1">
<p align="left"> <a class="thumbnail" href="#"><img src="lampadario.jpg" width="302" height="604" border="0"><span style="position: absolute; left: 339px; top: -103px" id="guerra"><img src="flay.png" width="512" height="297"></a><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaa
</a></span></div>
</div>
</body>
</html>
