Member Avatar for 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.

Edited by diafol because: reformatted code
  • 2 Contributors
  • 2 Replies
  • 103 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by mitch.hendrix.73
Member Avatar for diafol 
<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.

Edited by diafol
Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.