(nota: provato solo per Firefox)
Proverei con il JavaScript...
Comincio con il creare due DIV ognuno dei quali porta un numero da 1 a 3.
Cliccando sul DIV dovrebbe apparire al puntatore del mouse un "cartellino" contenente il numero rappresentato dal DIV.
Come si può creare un DIV a runtime? Rinfreschiamoci le idee...
<style>
.numero{
font-size:60px;
background-color:#AACCFF;
width:100px;
height:100px;
}
</style>
<script>
function creaDiv(){
var mioDiv=document.createElement('div');
mioDiv.className="numero";
mioDiv.innerHTML=1;
document.getElementsByTagName("body")[0].appendChild(mioDiv);
}
</script>
<body onLoad="creaDiv()">
</body>
Adesso vediamo di creare dei DIV affiancati, in file di tre.Ricordo un classico schema per creare delle griglie di elementi...
Ecco, l'ho messo in pratica, ho rinunciato ad andare per passettini creando solo 1, 2 e 3, e ho fatto di getto tutto, ed ecco la funzione grid(left, top) che mi crea una griglia di elementi che ha la posizione specificata dai parametri:
<style>
.numero{
font-size:100px;
background-color:#AAEEDD;
width:100px;
height:100px;
border: 2px solid green;
line-height:100%;
text-align:center;
vertical-align:text-middle;
}
</style>
<script>
function main(){
grid(300,50);
}
function grid(left,top){
var x,y;
for(n=0;n<9;n++){
x=n%3;
y=Math.floor(n/3);
creaDiv(x,y,left,top,n);
}
}
function creaDiv(x,y,left,top,n){
var mioDiv=document.createElement('div');
mioDiv.className="numero";
mioDiv.innerHTML=n+1;
mioDiv.style.position="absolute";
mioDiv.style.left=left+x*parseInt(getComputedStyle(mioDiv).getPropertyValue("width"));
mioDiv.style.top=top+y*parseInt(getComputedStyle(mioDiv).getPropertyValue("height"));
document.getElementsByTagName("body")[0].appendChild(mioDiv);
}
</script>
<body onLoad="main()">
</body>
Ecco la griglia:
Mi piace, ogni tanto, ripassare e approfondire il JavaScript!
Nessun commento:
Posta un commento