ridimensionamento immagine

kerotan

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.

greyfox

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>

kerotan

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.

greyfox

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>

kerotan

Sempre il solito discorso tutto dentro un while.

greyfox

Edit:

Inizia i messaggi con una maiuscola e termina con un punto.

kerotan

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?

greyfox

Guarda se è quello che vuoi:
[...]
(è in php adesso)
se dovessero sparire le immagine, riaggiorna e riprova

Questo è 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>

kerotan

Perfetto...!!!

Essendo alquanto ignorante in materia JS...due righe di spiegazione?

GRAZIE

greyfox

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...

kerotan

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>