Sai associare un evento ad un elemento del DOM?Originariamente inviata da lu1782
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?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
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>
Fantastico, grazie mille.. funziona alla grande!
gentilissimo
Permessi di invio
Rispondi quotando