Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2016
    Messaggi
    4

    Cambio immagine passando su scritta

    Buongiorno a tutti, vi spiego ciò che vorrei fare.
    ho la pagina centrale di un sito che contiene un elenco di servizi che la ditta effettua e a destra ho messo un'immagine statica. Vorrei che passando il mouse sopra ogni "servizio" uscisse un'altra immagine al posto di quella di default da me inserita.

    Il codice è questo.

    codice HTML:
      <article class="s-13 m-7 l-6">                
      <ul type="circle">        
              <li> <h5>Opere murarie</h5></li>        
              <li><h5>Rifacimento Facciate esterne</h5></li>                                    <li><h5>Tinteggiatura Pareti</h5></li>         
             <li><h5>Impermeabilizzazioni tetti / terrazzi</h5></li>             
         <li><h5>Rifacimento tetti in cemento armato o legno</h5></li>           
           <li><h5>Rinforzi strutturali</h5></li>             
         <li><h5>Recupero sottotetto - rifacimento solai</h5></li>            
          </ul>                           
             </article>
    <article class="s-13 m-7 l-6">       
             <img class="flex" src="img/brick2.png" alt="" ></article>  
    Come potrei fare? l'area l'ho divisa a metà in modo tale che l'immagine resti sempre a destra dell'elenco anche in versione mobile

    ringrazio tutti anticipatamente

    Ultima modifica di lu1782; 11-11-2016 a 11:08

  2. #2
    Stai usando jQuery?

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2016
    Messaggi
    4
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    Stai usando jQuery?

    Non sto utilizzando nulla ora, ho postato qui proprio perchè credo serva javascript per fare ciò che vorrei io ma non saprei da che parte iniziare
    Ultima modifica di lu1782; 14-11-2016 a 09:23

  4. #4
    Quote Originariamente inviata da lu1782 Visualizza il messaggio
    Non sto utilizzando nulla ora, ho postato qui proprio perchè credo serva javascript per fare ciò che vorrei io ma non saprei da che parte iniziare
    Sai associare un evento ad un elemento del DOM?

  5. #5
    Utente di HTML.it
    Registrato dal
    Nov 2016
    Messaggi
    4
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    Sai associare un evento ad un elemento del DOM?
    Sto provando con questa soluzione, che credo sia la direzione corretta, ma non riesco a far cambiare immagine al passaggio

    codice HTML:
    <p id="hoverArea">Rifacimento Tetti</p>
    
    <IMG id="hoverPic" src="img/bricksmall.png"  width="16" height="16">
        
    <SCRIPT type="text/javascript">
    var hoverTxt=document.getElementById("hoverArea");
    var hoverImg=document.getElementById("hoverPic");
    hoverTxt.onmouseover = function(){hoverImg.src="img/brick.png";}
    hoverTxt.onmouseout = function() { hoverImg.src = "img/bricksmall.png"; }</SCRIPT>

  6. #6
    Quote Originariamente inviata da lu1782 Visualizza il messaggio
    Sto provando con questa soluzione, che credo sia la direzione corretta, ma non riesco a far cambiare immagine al passaggio

    codice HTML:
    <p id="hoverArea">Rifacimento Tetti</p>
    
    <IMG id="hoverPic" src="img/bricksmall.png"  width="16" height="16">
        
    <SCRIPT type="text/javascript">
    var hoverTxt=document.getElementById("hoverArea");
    var hoverImg=document.getElementById("hoverPic");
    hoverTxt.onmouseover = function(){hoverImg.src="img/brick.png";}
    hoverTxt.onmouseout = function() { hoverImg.src = "img/bricksmall.png"; }</SCRIPT>
    Ti posto una soluzione funzionante.
    Nota che ho assegnato un id sia al tag ul che al tag img che visualizzerà le immagini.
    Le path delle immagini da utilizzare sono contenute nel data attribute "image" nei tag li.
    Ho utilizzato la versione 3 del DOM.
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM3</title>
    <script type="text/javascript">
    window.onload=function(){
     var list_items=document.querySelectorAll('#images_holder li');
     for(var i=0; i<list_items.length; i++){
      list_items[i].addEventListener("mouseover", function(){
       document.querySelector('#image_tag').setAttribute('src',this.getAttribute('data-image'));
      });
     }
    }
    </script>
    </head>
    <body>
    <article class="s-13 m-7 l-6">
      <ul type="circle" id="images_holder">
        <li data-image="img/img-1.jpg">
          <h5>Opere murarie</h5>
        </li>
        <li data-image="img/img-2.jpg">
          <h5>Rifacimento Facciate esterne</h5>
        </li>
        <li data-image="img/img-3.jpg">
          <h5>Tinteggiatura Pareti</h5>
        </li>
        <li data-image="img/img-4.jpg">
          <h5>Impermeabilizzazioni tetti / terrazzi</h5>
        </li>
        <li data-image="img/img-5.jpg">
          <h5>Rifacimento tetti in cemento armato o legno</h5>
        </li>
        <li data-image="img/img-6.jpg">
          <h5>Rinforzi strutturali</h5>
        </li>
        <li data-image="img/img-7.jpg">
          <h5>Recupero sottotetto - rifacimento solai</h5>
        </li>
      </ul>
    </article>
    <article class="s-13 m-7 l-6"> <img class="flex" src="img/brick2.png" alt="" id="image_tag" ></article>
    </body>
    </html>

  7. #7
    Utente di HTML.it
    Registrato dal
    Nov 2016
    Messaggi
    4
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    Ti posto una soluzione funzionante.
    Nota che ho assegnato un id sia al tag ul che al tag img che visualizzerà le immagini.
    Le path delle immagini da utilizzare sono contenute nel data attribute "image" nei tag li.
    Ho utilizzato la versione 3 del DOM.
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM3</title>
    <script type="text/javascript">
    window.onload=function(){
     var list_items=document.querySelectorAll('#images_holder li');
     for(var i=0; i<list_items.length; i++){
      list_items[i].addEventListener("mouseover", function(){
       document.querySelector('#image_tag').setAttribute('src',this.getAttribute('data-image'));
      });
     }
    }
    </script>
    </head>
    <body>
    <article class="s-13 m-7 l-6">
      <ul type="circle" id="images_holder">
        <li data-image="img/img-1.jpg">
          <h5>Opere murarie</h5>
        </li>
        <li data-image="img/img-2.jpg">
          <h5>Rifacimento Facciate esterne</h5>
        </li>
        <li data-image="img/img-3.jpg">
          <h5>Tinteggiatura Pareti</h5>
        </li>
        <li data-image="img/img-4.jpg">
          <h5>Impermeabilizzazioni tetti / terrazzi</h5>
        </li>
        <li data-image="img/img-5.jpg">
          <h5>Rifacimento tetti in cemento armato o legno</h5>
        </li>
        <li data-image="img/img-6.jpg">
          <h5>Rinforzi strutturali</h5>
        </li>
        <li data-image="img/img-7.jpg">
          <h5>Recupero sottotetto - rifacimento solai</h5>
        </li>
      </ul>
    </article>
    <article class="s-13 m-7 l-6"> <img class="flex" src="img/brick2.png" alt="" id="image_tag" ></article>
    </body>
    </html>
    Fantastico, grazie mille.. funziona alla grande!
    gentilissimo

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.