switchPix, onMouseOver

[mitch.hendrix.73]

I am to add script to a set of links on a page to change the image on that page with the switchPix function every time the mouse moves over the text of 'Asian Art Museum', 'City Hall', etc. I don't even know where to start.

<article>
    <h2 id="main">What's Nearby</h2>
    <figure id="pix" class="right">
    <img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
    </figure>
    <ul>
      <li><a href="http://www.asianart.org/"  target="_blank">Asian Art Museum</a></li>
      <li><a href="http://bit.ly/93E5VI"  target="_blank">City Hall</a></li>
      <li><a href="http://bit.ly/1tthXBU" target="_blank">Heart of the City Farmer's Market</a></li>
      <li><a href="http://www.sfcablecar.com/" target="_blank">Cable Car turnaround</a></li>
    </ul>
  </article>

Here's what I came up with:

function switchPix() {
    document.getElementById("pix").innerHTML=(<img src="images/asian.jpg" width="480" height="270" alt="Picture of Asian Art Museum" />);

onMouseOver='switchPix' added to the <figure id="pix" class="right">

I've tried other ways to try to reference the text of the links to switchpix when moused over, but to no avail.

<article>
    <h2 id="main">What's Nearby</h2>
    <figure id="pix" class="right">
    <img src="maxi.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
    </figure>
    <ul id="listclick">
      <li ><a href="http://www.asianart.org/" class="fig" target="_blank" data-src="Chrysanthemum.jpg">Asian Art Museum</a></li>
      <li ><a href="http://bit.ly/93E5VI" class="fig"  target="_blank" data-src="Desert.jpg">City Hall</a></li>
      <li ><a href="http://bit.ly/1tthXBU" class="fig" target="_blank" data-src="Hydrangeas.jpg">Heart of the City Farmer's Market</a></li>
      <li><a href="http://www.sfcablecar.com/" class="fig" target="_blank" data-src="Penguins.jpg">Cable Car turnaround</a></li>
    </ul>
</article>

<script>
    var gall = document.getElementById('gallery');
    document.getElementById("listclick").addEventListener("mouseover", function(e) {
    if(e.target && e.target.nodeName == "A") {
        gall.src = e.target.dataset.src;
    }
});
</script>

Worked ok for me.

[mitch.hendrix.73]

Thanks diafol,

I got my page to work great with your help.

I'm working at it. I now have an issue with an error of an <article> that has an <aside> needing to be in a <h2>-<h6> header, but every time I try to surround either node, or try to reference it, my content disapears from the page. I'll figure it out somehow, or I'll be back to ask.
Thanks for your time and expertise.

Mitch