CODEWITHSUNDEEP
javascriptjqueryhtml
alice83
alice83

Reputation: 43

Javascript replaceing img file

I am working on a website that needs to use javascript. I need the Javascript to use an external page. I don't quite understand how to do this. I have 5 files on my computer that needs to be able to replace an image file's name and alt. I cant use an http though.

I have the code for an image:

<img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />

I need use javascript to change the cablecare and alt part to a new image file and description while using onmouseover. The code I have so far is Javascript:

        function switchPix(file, desc){
        var line = '<img src= asian.jpg  width=\'480\' height=\'270\' alt= +desc+/>';
        document.getElementById("pix").write(line);
        }

html:

<figure id="pix" class="right">
      <script src="scripts/gallery.js">
      </script>
      <img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
    </figure>
    <ul>
      <li><a href="http://www.asianart.org/" onmouseOver="switchPix(asian, Asian Market)">Asian Art Museum</a></li>

I have to use the word file to replace cablecar with asian so the file name is asian.jpg at the end the code is suppose to change the image on the page to another image when the mouse is put over one of five links.

Sorry if this is a bit confusing I really am having trouble understanding it myself and wasn't given nearly enough information to understand how to do it myself.

Upvotes: 2

Views: 82

Answers (1)

RizkiDPrast
RizkiDPrast

Reputation: 1725

Hi try to use this code

<figure id="pix" class="right">
      <script src="scripts/gallery.js">
      </script>          
      <img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />
    </figure>
    <ul>
      <!-- fix onmouseover (all small case) and string parameters -->
      <li><a href="http://www.asianart.org/" onmouseover="switchPix('asian.jpg', 'Asian Market')">Asian Art Museum</a></li>

and the javascript code like this work

function switchPix(file, desc) {
var $elm = document.getElementById("gallery"); 
$elm.src = file;
$elm.alt = desc;
}

Upvotes: 1

Related Questions