galleria

**azzurroclaudio** · 03-11-2011, 16:35

anzitutto mi scuso con tutti voi se questa è la sezione sbagliata per postare il mio problema.

allora io ho creato questa galleria immaggine

codice:

  
<link rel="stylesheet" type="text/css" href="galleria.css" />
<body>
<div id="contenitore">
	<div id="css_galleria_1">
		[img]1b.jpg[/img]<span>Descrizione pic1</span>
		[img]img/pic_2.jpg[/img]<span>Descrizione pic2</span>
		[img]img/pic_3.jpg[/img]<span>Descrizione pic3</span>
		[img]img/pic_4.jpg[/img]<span>Descrizione pic4</span>
		[img]img/pic_5.jpg[/img]<span>Descrizione pic5</span>
		[img]img/pic_6.jpg[/img]<span>Descrizione pic6</span>
		[img]img/pic_7.jpg[/img]<span>Descrizione pic7</span>
	</div>
</div>

come posso far si, che cpassando con il mouse sull'mmaggine, l'immaggine si ingrandisca prendento tutto il quadro?

**Peppe psp** · 03-11-2011, 17:53

fornisci qualche altro dettaglio, tipo per la realizzazione della gallery utilizzi framework quali jquery o prototype, utlizzi html+javascript ho ti basi anche su linguaggi server quali php e asp

**azzurroclaudio** · 03-11-2011, 19:25

Originariamente inviato da Peppe psp
fornisci qualche altro dettaglio, tipo per la realizzazione della gallery utilizzi framework quali jquery o prototype, utlizzi html+javascript ho ti basi anche su linguaggi server quali php e asp

per realizzare la galleria di immaggine uso html+css.
questo il codice html:

codice:

div id="contenitore">
 <div id="css_galleria_1">
 [img]1b.jpg[/img]<span>Descrizione pic1</span>
 [img]img/pic_2.jpg[/img]<span>Descrizione pic2</span>
 [img]img/pic_3.jpg[/img]<span>Descrizione pic3</span>
 [img]img/pic_4.jpg[/img]<span>Descrizione pic4</span>
 [img]img/pic_5.jpg[/img]<span>Descrizione pic5</span>
 [img]img/pic_6.jpg[/img]<span>Descrizione pic6</span>
 [img]img/pic_7.jpg[/img]<span>Descrizione pic7</span>
 </div>
 </div>

mentre questo e il codice css:

codice:

 
	body{
	background-color:#000000;
	}
	img{
	border:none;
	}
	#contenitore{
	width:600px;
	margin:auto;
	margin-top:50px;
	color:#FFFFFF;
	}
	a{
	color:#99CC00;
	text-decoration:none;
	}
	
	 /*inizio stile css galleria*/
	#css_galleria_1{
	position:relative;
	width:595px;
	height:370px;
	border:1px solid #FFFFFF;
	padding:20px 10px 20px 20px;
	}
	#css_galleria_1 a{
	display:block;
	float:left;
	width:75px;
	height:350px;
	margin-right:10px;
	padding-bottom:10px;
	outline:none;
	border-bottom:10px solid #333333;
	color:#FFFFFF;
	text-decoration:none;
	}
	#css_galleria_1 a:hover{
	border-bottom:10px solid #666666;
	}
	#css_galleria_1 a b, #css_galleria_1 a span{
	display:none;
	}
	#css_galleria_1 a:hover b{
	display:block;
	position:absolute;
	top:20px;
	left:20px;
	z-index:1;
	}
	#css_galleria_1 a:hover span{
	display:block;
	position:absolute;
	width:555px;
	left:30px;
	bottom:50px;
	padding:5px;
	background-color:#000000;
	z-index:2;
	}
	#css_galleria_1 #pic_1{
	background: url(1p.jpg) no-repeat;
	}
	#css_galleria_1 #pic_2{
	background: url(img/pic_2.jpg) no-repeat;
	}
	#css_galleria_1 #pic_3{
	background: url(img/pic_3.jpg) no-repeat;
	}
	#css_galleria_1 #pic_4{
	background: url(img/pic_4.jpg) no-repeat;
	}
	#css_galleria_1 #pic_5{
	background: url(img/pic_5.jpg) no-repeat;
	}
	#css_galleria_1 #pic_6{
	background: url(img/pic_6.jpg) no-repeat;
	}
	#css_galleria_1 #pic_7{
	background: url(img/pic_7.jpg) no-repeat;
	margin-right:0;
	}

come posso far si, che cpassando con il mouse sull'mmaggine, l'immaggine si ingrandisca prendento tutto il quadro?

**azzurroclaudio** · 06-11-2011, 16:37

possibile che nessuno mi sappia aiutare nel mioo problema?

**Vincent.Zeno** · 06-11-2011, 20:19

claudio,
per favore usa sempre il tag CODE per postare codice.

come posso far si, che passando con il mouse sull'mmaggine, l'immaggine si ingrandisca prendento tutto il quadro ?

quale quadro, esattamente?

l'operazione richiede un evento onmouseover, quindi sposto in javascript.
intanto prova a fare un ricerca tra le migliaia di script che ci sono con questa funzione

Discussione: galleria

Strumenti discussione

Ricerca discussione

Visualizza

galleria

Permessi di invio