
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>