Ciao
Vorrei centrare in un div alcune immagini che hanno dimensioni diverse.
Il tag img che devo centrare ha l’altezza (height) di 100px pertanto tutte le immagini che saranno caricate avranno l’altezza di 100px e la loro larghezza sarà automaticamente modificata per mantenere le proporzioni.
Per centrare queste immagini basterebbe un semplice tag <center> ma purtroppo è stato dichiarato obsoleto e allora come si fa?
Questa è la pagina (solo l’essenziale)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta http-equiv="imagetoolbar" content="no">
<style TYPE="text/css">
.riq {width:800px; height:440px; position:absolute; left:240px; top:100px; z-index:1; border:3px solid;}
.tbl {width:210px; height:120px; position:absolute; left:275px; top:29px; z-index:1; border:3px solid; background-color:#ffffff;}
.fgr {height:100px;position:absolute; top:10px; z-index:1;}
</style>
</head>
<body id="Documento">
<span id="suono"></span>
<div id="Riquadro" class="riq">
<div id="Cartellone" class="tbl">
<img id="Figure" src="media/vuoto.gif" class="fgr" />
</div>
</div>
<script type="text/javascript">
window.onload=function() {
document.getElementById("Documento").focus();
Cambio()
};
function Cambio() {
document.getElementById("Figure").src="gifferme/imm (33).gif";
var larghezza = document.getElementById("Figure").width;
var posiz = 105 - larghezza / 2;
document.getElementById("Figure").style.left = posiz + "px";
alert(larghezza)
}
</script>
</body> </html>
Lanciando il gioco con l’editor, l’alert visualizza una larghezza sballata, ma rilanciando il gioco questa larghezza è esatta e l’immagine risulta centrata. Non è così se si lancia il gioco direttamente col browser. Sembrerebbe che il browser non faccia in tempo a modificare la larghezza prima che sia letta.
Potrei risolvere il problema mettendo la larghezza di ogni immagine (dopo averle modificate) in un array. Ma è un lavoraccio !
Le immagini e il gioco intero sono a questo indirizzo
www.giochieducativi.eu/lettereparole.rar
rudyF
Rispondi quotando
