Cambio immagine passando su scritta

**lu1782** · 16-11-2016, 13:01

Originariamente inviata da lucavizzi

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>

**lucavizzi** · 16-11-2016, 16:57

Originariamente inviata da lu1782

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>

**lu1782** · 17-11-2016, 13:44

Originariamente inviata da lucavizzi

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

Discussione: Cambio immagine passando su scritta

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Tag per questa discussione

Permessi di invio