ingrandire le fotografie

26-06-2012, 10.03.42

Buongiorno, seguo le indicazioni datemi ed apro un nuovo topic.

Sul mio sito vorrei pubblicare una foto (nome: boraaudace.png) che si ingradisca cliccandoci sopra.
In una vecchia discussione ho reperito il codice che, adattato alle mie necessità, ammesso che ci abbia capito, dovrebbe essere:
<a href="boraaudace.png" target="_blank"><img src="boraaudace.png" height="50%" width="50%"></a>

Mi è stato anche detto di inserire detto codice o prima o dopo la foto caricata.
Ho provato, ma la foto rimane sempre quella e non si ingrandisce.
DOve e cosa ho sbagliato?

Vi ringrazio per la gentile collaborazione: sono un vero neofita e TENTO di fare del mio meglio..

29-06-2012, 19.15.51

Scusatemi, questa non è una risposta, ma la semplice volontà di chiarire meglio il mio precedente.
Ho la necessità di far ingrandire una immagine mediante cliccaggio della stessa con il mouse. Ho cercato di fare come sopra specificato.
Non ho ottenuto alcun risultato.
C'è qualcuno che ha la cortesia (e la pazienza) di prendermi per mano e di darmi le indicazioni necessarie?
GRazie a tutti.
Ciao

Silvano

**naturaeclima** · 29-06-2012, 19.34.49

<a href="http://www.bielmonte.net/dosso.jpg" target="_blank"><img src="http://www.bielmonte.net/dosso.jpg" width="140" height="100" border="0" />
prova così ovviamente sostituisci i link con quelli delle tue immag. Per modificare la grandezza dell'anteprima cambia i "140" e "100"

29-06-2012, 20.30.05

Ciao,
ti ringrazio ma non è quello che io cerco (se possibile).
La foto che io vorrei ingrandire è una foto che io ho su un CD e che quindi voglio caricare sul sito. Ovviamente per il sito opera il resize. Ora io desiderei che la foto che io ho caricato (con dimensioni diverse da quelle che poi appaiono sul sito) si ingrandisca al cliccaggio con il mouse.
Comunque ancora grazie per la tua gentilezza

Silvano

**naturaeclima** · 29-06-2012, 20.53.38

Scusa Silvano ma quello fa esattamente quello, carichi la foto nella cartella del tuo sito passando dal pannello di controllo > invia file una volta che l'immag. è nella cartella la clicci si apre la pag nella dimensione originale copi l'indirizzo e lo incolli nello scrip. Ho forse tu vuoi che si ingrandisca senza aprire un 'altra pag.?
Guarda sul mio sito sulla sinistra le immag. e vai sopra con il puntatore http://www.meteomongrando.com/

30-06-2012, 21.04.25

ciao, scusami il ritardo ma il lavoro non mi ha consentito di risponderti prima. Ho dato un'occhiata al tuo sito: bello!
Ecco, hai capito, mi andrebbe quanto succede per le tue tabelle meteo: si ingrandiscono con il posizionamento del mouse.
Continui a darmi una stra-gradita mano?
Grazie

Silvano

**tartarugasprint** · 07-07-2012, 23.14.58

Se ricordo bene:
Copia la foto con aggiungi + immagine, ora ti trovi la foto in formato per web in tre misure diverse nelle directory alterpages/medium, alterpages/small e alterpages/thumb.
Anche se ora cancelli "aggiungi immagine le foto restano e puoi usare il metodo che hai descritto indirizzando foto di misure diverse.
Puoi invece usare aggiungi + multimedia + slideshow che fa tutto da se, carica le foto e le presenta nei tre formati, guarda " i nostri ricordi" del mio sito.
Mi piace Trieste, quando ci torno ti vengo a trovare.
Se Benco (Antiche distillerie) è tuo fornitore salutamelo, Claudio da Roma

**tartarugasprint** · 08-07-2012, 17.09.58

Sono sempre io.
mi sono ricordato di avere questo codice che ti permette di variare le dimensioni delle foto al passaggio del mouse.
Basta una foto della misura grande, scrivi width="ww" height="hh" con i numeri che vuoi e il gioco è fatto, (metti anche il nome delle foto), l'esempio ha due foto e due testi come origini ma puoi modificarlo a tuo piacimento, ti avevo scritto anche ieri sera ma si è perso il messaggio o non l'ho mandato.
Ciao.
A onor del vero il codice Style andrebbe nel Head ma funziona anche se lo metti in body
Resto in attesa di vedere i sito modificato

CODICE DA METTERE IN: AGGIUNGI UN NUOVO ELEMENTO <HTML>:

Codice HTML:

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*carateristiche dell'immagine ingandita e del testo relativo*/
position: absolute;/* mettere: relative invece di absolute per dare una posizione relativa alla foto piccola*/
background-color: lightyellow;/*colore sfondo della foto*/
padding: 5px;/*cornice*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*caratteristiche dell'img ingrandita*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*posizione dell'img ingrandita*/
visibility: visible;
top: 100;/*posizione verticale dell'img */
left: 60px; /*posizione orizzontale dell'img */

}

</style>

<a class="thumbnail" href="#thumb"><img src="bimbo.jpg" width="100" height="66" border="0" ><span><img src="bimbo.jpg" width="100" height="66"><br />Nome Foto 1</span></a>
<br/>
<a class="thumbnail" href="#thumb"><img src="FOTO2.jpg" width="100" height="66" border="0" ><span><img src="FOTO2.jpg" width="100" height="66"><br />Nome Foto 2</span></a>
<br />
<a class="thumbnail" href="#thumb">punto 3<span><img src="FOTO3.jpg" width="100" height="66" border="0" ><br />Nome Foto 3</span></a><br />
<br />
<a class="thumbnail" href="#thumb">Punto 4<span><img src="FOTO4.jpg" width="100" height="66" border="0" ><br />Nome Foto 4</span></a>

08-07-2012, 21.22.37

ciao e grazie!!!! Sei troppa roba!
Cercherò di provare e di riprovare! E siccome sono una schiappa sono sicuro che dovrò farlo più e più volte!
Ben volentieri di incontrerò se deciderai di venire a Trieste... Forse, se non sarò stato in grado di fare quello che vorrei...anche ti farò lavorare!!!! ehehehehehe
Ciao
Silvano

11-07-2012, 21.02.54

ciao Claudio,
come volevasi dimostrare: quando uno (io) è schiappa non c'è nulla fare!

mi sa che lascerò il sito com'é: basic, basic, basic.
Grazie tantissime!!!!!

**tartarugasprint** · 26-07-2012, 15.49.45

Ciao, scusa il ritardo
quale è il problema?
Ho riprovato a caricare il codice ripreso dalla pagina che ti ho inviato e mi funziona, dimmi dove è il problema.
Claudio

30-07-2012, 21.18.29

ciao,
grazie per esserci ancora!
Mi daresti un tuo indirizzo email? Poi capirai perchè te lo chiedo

grazie.
Silvano

11-09-2012, 20.03.10

Buonasera a tutti. Sono ancora con il mio irrisolto problema. Preciso: sono un neofita ed ho bisogno della collaborazione (anzi di essere guidato passo a passo) da qualcuno che abbia un po' di pazienza e che parli un linguaggio a accessibile.
Diciamo che io ho una foto FOTO1.JPG la vorrei caricare e fare in modo che al passaggio del cursore su essa, la stessa venga zoomata.
Cosa devo fare? Basta caricare la foto in quale formato? Dove devo scrivere lo script? Quale script è più adatto?
Ringrazio chi avrà la cortesia, e la pazienza, di darmi le dritte necessarie.
Silvano

**tartarugasprint** · 14-09-2012, 12.46.46

La mia e-mail è muziclaudio chio cciola yahoo.it

18-09-2012, 20.06.24

ciao, grazie.ti ho scritto per il problema

silvano

**salviapizzaebeerfest** · 28-05-2014, 17.57.11

Salve a tutti io ho trovato il codice adatto a me (ingrandire l'immagine al passaggio del mouse) il codice lo inserisco e tutto funziona alla perfezione, il mio problema è che vorrei il testo allineato con l'immagine mentre applicando questo codice il testo me lo mette sotto l'immagine. Per modificare tutto sto usando la gestione articoli fornito da joomla:

Codice HTML per l'ingrandimento dell'immagine al passaggio del mouse

Codice HTML:

<style type="text/css">

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
	text-align:left;
	float: left;
	clear: none; /* set to left or right if needed */	
	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
 	position:relative;
}

.ienlarger span img {
	border: 1px solid #FFFFFF; /* adds a border around the image */
	margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
	position: absolute;
	display:none;
	color: #FFCC00; /* caption text colour */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; /* caption text size */
	background-color: #000000;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 13px;
	padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span { 
	display:block;
	top: 50px; /* means the pop-up's top is 50px away from thumb's top */
	right: 90px
	<!--left: 90px;--> /* means the pop-up's left is 90px far from the thumb's left */
	z-index: 100;
	
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */	

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */	

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
	width: 150px; /* enter desired thumb width here */
	height : auto;
}

/* smart image enlarger ends here */

</style>

questo l'ho inserito nel file template_v1.css del mio template e poi nell'articolo ho fatto così:

Codice HTML:

<div class="ienlarger"><a href="http://www.salviapizzaebeerfest.it/"><img class="resize_thumb" src="images/manifesto.jpg" border="0" alt="thumb" /><span> <img src="images/manifesto.jpg" border="0" alt="large" /><br /> Some text can go here.</span></a></div>

e poi segue il testo inserito.
Ora vorrei che questo testo non stia sotto l'immagine ma in linea con essa. Spero di essermi spiegato e che qualcuno mi aiuti.
Grazie anticipatamente a tutti

Discussione: ingrandire le fotografie

LinkBack

Strumenti discussione

Display

ingrandire le fotografie

ingrandire le immagini con click del mouse

variazione al passaggio del mouse

mail di tartarugasprint

Tags for this Thread

Regole di scrittura