0

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: reformatted code

2
Contributors
2
Replies
11
Views
2 Years
Discussion Span
Last Post by mitch.hendrix.73
0
<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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.