- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- ridimensionamento immagine
-
ridimensionamento immagine
Ciao a tutti,
volevo fare uno script in javascript che mi permetta di ingrandire e diminuire l'immagine cliccandoci sopra.
function grande(Immagine) { var elem = document.getElementById(Immagine); elem.width = 200; } </script> echo"<img id="Immagine" onClick=grande('Immagine') src=\"Foto68.jpg\" />"; ```** Edit:** > * Inizia i messaggi con una maiuscola e termina con un punto.
-
Ciao kerotan se è questo che vuoi:
[..]Questa è la soluzione:
<center><img onclick="javascript:change()" id="_img" src="Immagine.png" /></center> <script> var img=document.getElementById('_img'); var _h0=img.height;//style.offsetHeight; var _w0=img.width; var _fattore=10; var flag=true; function change(){ img.height=(flag)?_h0*_fattore:_h0; img.width=(flag)?_w0*_fattore:_w0; flag=!flag; } </script>
-
No ma come questo.
<html> <head> <title>image resize</title> <script type="text/javascript"> var imgState; var imgWidth; var imgHeight; function imageresize(theimage){ imgWidth = document.getElementById(theimage).width; imgHeight = document.getElementById(theimage).height; imgWidth = eval(imgWidth/2); imgHeight = eval(imgHeight/2); document.getElementById(theimage).width = imgWidth; document.getElementById(theimage).height = imgHeight; imgState = 'small'; } function changeimageSize(thisimage){ if(imgState == 'small'){ imgWidth = document.getElementById(thisimage).width; imgHeight = document.getElementById(thisimage).height; imgWidth = eval(imgWidth*2); imgHeight = eval(imgHeight*2); document.getElementById(thisimage).width = imgWidth; document.getElementById(thisimage).height = imgHeight; imgState = 'large'; }else{ imgWidth = document.getElementById(thisimage).width; imgHeight = document.getElementById(thisimage).height; imgWidth = eval(imgWidth/2); imgHeight = eval(imgHeight/2); document.getElementById(thisimage).width = imgWidth; document.getElementById(thisimage).height = imgHeight; imgState = 'small'; } } </script> </head> <body onload="imageresize('firstimage');"> <img src="balloons.jpg" width="190" border="0" alt="" id="firstimage" onclick="changeimageSize(id)"> ```cosi clicco sull immagine...se volessi richiamare la funzione da un link?
<a href="#" onclick="changeimageSize('firstimage')" >Cambia</a>
Grazie comunque della disponibilità, ma se io clicco sull'immagine (molto carina tra l'altro :) ) mi sparisce (nel tuo script). EDIT: Se io volessi applicare questo script a più immagini nella solita pagina?? sono sempre alle prese con questi problemi...forse sono duro io a capire.
-
A si scusa problema mio...
Ora è ok:
[..]Il codice che hai postato fa esattamente cio che fa il mio in diciamo il doppio delle righe se non il triplo.
Questo è il mio:
<body onLoad="javascript:init();"> <center><img onclick="javascript:change()" id="_img" src="/test/lab/soluzioni/Immagine.png" /></center> <script> var img=document.getElementById('_img'); var _h0; var _w0; var _fattore; function init(){ _h0=img.height;//style.offsetHeight; _w0=img.width; _fattore=10; } var flag=true; function change(){ img.height=(flag)?_h0*_fattore:_h0; img.width=(flag)?_w0*_fattore:_w0; flag=!flag; } </script> </body>
-
Sempre il solito discorso tutto dentro un while.
-
Edit:
- Inizia i messaggi con una maiuscola e termina con un punto.
-
Per esempio il php è cosi:
<?php $i=1; while($i<=10) { echo"<center><img onclick=\"javascript:change()\" id=\"_img".$i."\" src=\"balloons.jpg\" /></center>"; $i++; } ?> ```Il Js come lo dovrei modificare?
-
Guarda se è quello che vuoi:
[...]
(è in php adesso)
se dovessero sparire le immagine, riaggiorna e riprovaQuesto è il source studialo:
<body > <script> var _imgArray=new Array(); function add_img(num){ var img=document.getElementById('_img'+num); _imgArray[num]=new Array(); _imgArray[num][0]=img.height; _imgArray[num][1]=img.width; _imgArray[num][3]=1; } var _fattore=5; function change(num){ var img=document.getElementById('_img'+num); img.height=(_imgArray[num][3]==1)?_imgArray[num][0]*_fattore:_imgArray[num][0]; img.width=(_imgArray[num][3]==1)?_imgArray[num][1]*_fattore:_imgArray[num][1]; _imgArray[num][3]=(_imgArray[num][3]==1)?0:1; } </script> <?php echo '<center>'; for($i=0;$i<10;$i++){ echo'<p><img onclick="javascript:change('.$i.')" id="_img'.$i.'" src="Immagine.png" /></p>'; } echo '<script> var y=0; for(y=0;y<10;y++){ add_img(y); } </script>'; echo '</center>'; ?> </body>
-
Perfetto...!!!
Essendo alquanto ignorante in materia JS...due righe di spiegazione?
GRAZIE
-
Ciao, anchio sono abbastanza ignorante in js, ma una volta imparata la struttura, tutti i linguaggi vengono facili...
Comunque:
Prima cosa creo un array globale, ossia riconosciuto da ogni funzione e in qualsiasi chiamata.
La funzione add_img non fa altro che aggiungere un altro array come valore nella posizione $i dell'array globale.
A sua volta questo nuovo array-valore tiene 3 argomenti: i primi 2 sono le dimensioni iniziali della singola immagine e il terzo è il valore 'booleano' che distingue se aumentare o diminuire le dimensioni.La funzione change usa l'operatore condizionale:
(espressione)?<true>:<false>; per assegnare le dimensioni o originali o modificate a seconda del flag sopra citato.In php aggiungo le immagini e poi aggiungo uno script che 'inizializza' le singole immagini 'registrandole' nell'array gobale...
-
Edit:
- Inizia i messaggi con una maiuscola e termina con un punto.
<html> <head> <title>image resize</title> <script type="text/javascript"> var imgState; var imgWidth; var imgHeight; imgWidth = 95; function changeimageSize(thisimage){ imgWidth = document.getElementById(thisimage).width; imgHeight = document.getElementById(thisimage).height; if(imgWidth == 95){ imgWidth = eval(imgWidth*2); imgHeight = eval(imgHeight*2); document.getElementById(thisimage).width = imgWidth; document.getElementById(thisimage).height = imgHeight; }else{ if(imgWidth == 190){ imgWidth = eval(imgWidth/2); imgHeight = eval(imgHeight/2); } document.getElementById(thisimage).width = imgWidth; document.getElementById(thisimage).height = imgHeight; } } </script> </head> <body> <? $i=0; while($i<=10) { echo"<img src=\"balloons.jpg\" width=\"95\" border=\"0\" alt=\"\" id=\"firstimage".$i."\" onclick=\"changeimageSize(id)\">"; $i++; } ?> </body> </html>