Visualizzazione dei risultati da 1 a 10 su 11

Hybrid View

  1. #1

    Aprire un'immagine in un <div> differente

    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):

    codice:
    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:
    Immagini allegate Immagini allegate
    Dice il saggio:
    Non ci sono domande difficili, esistono solo risposte che non conosciamo!
    "Se qualcosa può andare male, lo farà" - Murphy

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.