Immagini che si zoomma cliccando

**makkinho87** · 14-03-2004, 20:18

In fine, ecco un piccolo link, come alternativa alle validissime proposte già postate:

http://www.simplebits.com/bits/photo_zoom.html

MI piace molto l'esempio.Come faccio a farlo???

**liquido** · 14-03-2004, 20:23

Originariamente inviato da makkinho87
MI piace molto l'esempio.Come faccio a farlo???

Visualizza il codice sorgente e studiati un pò il codice (credimi, è molto elementare). Poi salvati la pagina in locale, sostituisci le immagini con quelle tue e fai un paio di test..

Ti potrei dare il codice direttamente qui sul forum, ma suppongo che per te, che sei alle prima armi, sia più costruttivo cavartela da solo ed osservare per bene ciò che usi nel tuo sito web, non limitandoti ad un semplice copia&incolla

Per qualsiasi problema mi trovi qui

Ciao

**Lardoman** · 14-03-2004, 20:27

Originariamente inviato da makkinho87
In fine, ecco un piccolo link, come alternativa alle validissime proposte già postate:

http://www.simplebits.com/bits/photo_zoom.html

MI piace molto l'esempio.Come faccio a farlo???

Nel Foglio di stile metti questo:

codice:

.container {
	width: 500px;
	padding: 15px;
	margin: 3px 0 20px 0;
	border: 1px solid #ccc;
	background: #fff;
	}

#zoom a {
	float: right;
	margin: 0 0 10px 10px;
	border: 1px solid #000;
	text-indent: -1000em; 
	overflow: hidden;
	display: block;
	width: 125px; 
	height: 94px;
	background: url(../images/zoom.jpg) no-repeat top left;
	}

#zoom a:hover {
	width: 300px; 
	height: 225px;
	background-position: 0 -104px; 
	}

#footer {
	color: #999;
	}

e nella pagina:

codice:

<div class="container">

<div id="zoom">
	

</div>

</div>

Ovviamente in entrambi i codici al posto di /images/zoom.jpg metti il percorso della tua immagine

**Lardoman** · 14-03-2004, 20:27

Originariamente inviato da liquido
Visualizza il codice sorgente e studiati un pò il codice (credimi, è molto elementare). Poi salvati la pagina in locale, sostituisci le immagini con quelle tue e fai un paio di test..

Ti potrei dare il codice direttamente qui sul forum, ma suppongo che per te, che sei alle prima armi, sia più costruttivo cavartela da solo ed osservare per bene ciò che usi nel tuo sito web, non limitandoti ad un semplice copia&incolla

Per qualsiasi problema mi trovi qui

Ciao

Azz sti messaggi che s'incrociano

**liquido** · 14-03-2004, 20:32

Originariamente inviato da Lardoman
Azz sti messaggi che s'incrociano

Ehehe, capita

Il fatto è che la mia politica non comprende l'opzione "pappa pronta",
preferisco, magari, perdere più tempo nell'aiutare qualcuno, aiutandolo a capire le parti del codice che gli sono meno chiare che fornirgli un copia&incolla pronto da cui possibilmente non imparerà nulla

Naturalmente sono punti di vista

Ciao

**makkinho87** · 14-03-2004, 22:50

Non ho capito quale sarebbe il Foglio Stile e la pagina...
Infine richiedo

uò venire da HD o obbligatoriamente da internet la mia immagine?

**liquido** · 14-03-2004, 22:54

Originariamente inviato da makkinho87
Infine richiedo

uò venire da HD o obbligatoriamente da internet la mia immagine?

Se il sito deve essere visualizzato online, allora sarai costretto a inserirla sul tuo spazio web, in caso contrario, quindi se devi visualizzare una pagina html offline (sul tuo computer), puoi tenere le immagini sul tuo HD..

Bye

**makkinho87** · 15-03-2004, 14:52

<BODY bgcolor="white">

<table border="0" cellpadding="0">
<tr>
<td width="100%"><img src="immagine01.jpg" width="240" height="160" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center>

<script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="immagine01.jpg"
photos[1]="immagine02.jpg"
photos[2]="immagine03.jpg"
photos[3]="immagine04.jpg"
photos[4]="immagine05.jpg"

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()">

Ricomincia</p>
</center></div>
</form>
</td>
</tr>
</table>

</body>
</html>

Ho trovato questo code dal sito.Però non riesco le immagini non me le visualizza!!!Devo metterle dove ho scritto in rosso giusto??E nella scritta blu devo mettere la prima immagine o cosa??non riesco a saltarci fuori

**liquido** · 15-03-2004, 14:59

Originariamente inviato da makkinho87
Ho trovato questo code dal sito.Però non riesco le immagini non me le visualizza!!!Devo metterle dove ho scritto in rosso giusto??E nella scritta blu devo mettere la prima immagine o cosa??non riesco a saltarci fuori

Direi proprio di si.. Stai attento che la destinazione delle immagini sia corretta, quindi, che l'immagine si trovi (per come è indicato nello script in questo momento) nella stessa cartella della pagina html che contiene il codice postato..

**makkinho87** · 15-03-2004, 15:40

Non è un problema quello dell'immagine.Solo che non capisco bene il punto blu...
Infine:l'indirizzo dell immagine è quuuesto:

OPPURE solo http://makkinho87.altervista.org/imm...adra_nuovo.jpg

Discussione: Immagini che si zoomma cliccando

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio