• User

    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. 

  • User

    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>
    
    

  • User

    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.

  • User

    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>
    
    

  • User

    Sempre il solito discorso tutto dentro un while. 🙂


  • User

    Edit:

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

  • User

    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?

  • User

    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>
    
    

  • User

    Perfetto...!!!

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

    GRAZIE


  • User

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


  • User

    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>