Aprire un'immagine in un <div> differente

[cleverboy]

Salve.
La cosa che sto per chiedere probabilmente è frutto della mia mente malata e non ha risposta (senza l'uso di JavaScript).

Il problema è questo. Ho un <div> che contiene una mini galleria di immagini (vedi sotto). La cosa bella sarebbe riuscire, passandoci sopra o cliccandoci, ad aprire l'immagine ingrandita in un altro <div> messo poco lontano.

Ecco il codice (pezzi di codice... tutto è lungo e inutile allo scopo):

div#container{
	width:760px;
	margin:25px auto;
	overflow:hidden;
	
}

div#contenuto{
	clear:both;
	background-color:#fff;
	margin:3px 1px 2px 1px;
	border-right:2px solid;
	border-bottom:2px solid;
	border-top:1px solid;
	border-left:1px solid;
	border-color:#36C;
	text-align:left;
	padding:7px 10px;
}

div#contenuto img{
	margin:10px;
	border:none;
}

div#contenuto dt{
	font-weight:600;
	margin:10px 0 5px 0;
	background-color:#07F;
	padding-left:5px;
	color:#FFF;
}

div#contenuto dd#eng{
	margin-top:3px;
	color:#003399;
}

div#foto{
	clear:both;
	background-color:#FFF;
	margin:3px 1px 2px 1px;
	padding:5px 10px;
	border-right:2px solid;
	border-bottom:2px solid;
	border-top:1px solid;
	border-left:1px solid;
	border-color:#36c;
	height:200px;  /*valore da modificare in base al numero di foto!*/
}

div#foto dl{
	float:left;
	width: 150px;
	height: 160px; 
	margin:10px;
	text-align:center;
	color: #000;
	border:1px solid #06c;
	background:url(clicca.gif) no-repeat;
	background-position:bottom;
}


div#foto dt{ 
	padding: 10px 0;
	cursor:hand;
}

div#foto dt img{
	margin:auto;
	border:2px dotted #c0c0c0;
}

....
....
....

<div id="container">
	<div id="foto">
		<dl>
			<dt>[img]img.gif[/img]</dt>
		</dl>

		<dl>
			<dt>[img]img.gif[/img]</dt>
		</dl>

		<dl>
			<dt>[img]img.gif[/img]</dt>
		</dl>
		
		<dl>
			<dt>[img]img.gif[/img]</dt>
		</dl>
	</div>
</div>

L'idea sarebbe di aggiungere, sotto o da qualche parte, un contenitore <div> o <span> che accolga gli ingrandimenti delle immagini.
Con il Javascript lo so fare... è una cavolata, ma speravo di poter risolvere senza, visto che IExplorer non adora tale tecnologia...

Il risultato del codice soprastante, per avere un'idea, è questo:

[Mich_]

Se ricordo bene, avevo visto qualcosa fatto solo con CSS ...
Dovrebbe essere tra i "link utili", ma non so se tra i menu o i layout.

[cleverboy]

Ci guardo subito...
è già molto che tu creda si possa fare!

[cleverboy]

CAVOLO QUANTA ROBA!!
Non è che per caso ti torna in mente all'incirca dove o cosa dovrei cercare in quella marea di links?

Posso anche guardarmeli tutti... ma temo di non vivere abbastanza a lungo! :rollo:

[cleverboy]

Mi sono guardato più o meno tutti i links delle categorie MENU e LAYOUTS, ma non ho trovato nulla di quello che cercavo. A meno che non mi sia sfuggito un collegamento da qualche parte.

C'è qualcuno che vuole unirsi a Mich_ per darmi qualche consiglio?
Per ora io ho trovato solo uno stralcio di codice che fa qualcosa di simile a quello che dico io, utilizzando l'immagine ingrandita come sfondo di un tag <a>. Carino indubbiamente, ma non è compatibile con Internet Explorer.

Questo è il LINK

HELP ME!! PLEASE

[Mich_]

Perche` non e` compatibile?
Io ho scorso velocemente la spiegazione e il codice, e non ho trovato nulla che non dovrebbe funzionare con IE6.
Eventualmente l'uso di XHTML 1.1; ma il tutto dovrebe essere compatibile anche con XHTML 1.0 Strict, che e` riconosciuto da IE6. Qualche probelama potresti averlo se vuoi usare il transitional, dato che in tal caso vengon sballate le misure di padding e border.

Invece se vuoi farlo funzionare in versioni precedenti (IE5.5 o NN4), devi per forza far ricorso a JS.

[cleverboy]

Ok, allora ricontrollo meglio.
Probabilmente il !DOCTYPE è sballato. Purtroppo con l'HTML sono bravino, ma non sono ancora troppo pratico di specifiche xml/dtd.

A presto e grazie per ora

[Mich_]

Attenzione che XML non e` compatibile con IE6 (cioe` IE riconosce una versione proprietaria, ma non quella ufficiale).

Quello che ragionevolmente si puo` far funzionare anche in IE6 e` XHTML 1.0 Strict (senza il prologo XML, altrimenti e` come non mettere il DOCTYPE - forse e` questo che ti da` fastidio!).

[cleverboy]

fammi capire....
il file deve iniziare con una cosa del genere?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ej" lang="en">

<head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
     <meta http-equiv="Content-Style-Type" content="text/css" />

     <style>
       .....
       .....
    </style>
</head>

[Mich_]

Esatto. E il DOCTYPE deve essere la prima riga (pena il non riconoscimento da parte di IE).

Nota che i valori degli attributi xml:lang e lang devono ssere uguali (non ha senso che siano diversi), e poi che lingua e` "ej" (mi sa tanto un errore di battitura)