Reference no: EM13996334

Create a function named switchPix, and assign the names file and desc to values passed to the function. Add a statement to the function that sets the value of the HTML code for the element with the id pix to the text <img />. In nearby.html, add code that loads the contents of the gallery.js file. Add an event handler to the a element for the text Asian Art Museum that responds to the mouse pointer moving over the element to call the switchPix function, passing the values ′asian′,′Asian Art Museum′. Add a second event handler that responds to the link being selected to call the same function with the same values.

Here's what I have come up with for the function: function switchPix(file,desc){
  document.getElementById('pix').innerHTML = '<img src="images/' + file + '.jpg" width = "480" height = "270" alt="' + desc + '" />'
}

and in my html file :

<figure id="pix" class="right">
          <img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
        </figure>
        <ul id="listclick">
          <li><a href="https://www.asianart.org/" onmouseover="switchPix('asian','Asian Art Museum')">Asian Art Museum</a></li>
          <li><a href="https://bit.ly/93E5VI" onmouseover="switchPix('cityhall','San Francisco City Hall')">City Hall</a></li>
          <li><a href="https://www.hocfarmersmarket.org/" onmouseover="switchPix('market','Civic Center Farmers Market')">Heart of the City Farmer's Market</a></li>
          <li><a href="https://www.sfcablecar.com/"onmouseover="switchPix('cablecar','Cable Car turnaround')">Cable Car turnaround</a></li>
        </ul>