Diane Foster Diane Foster - 24 days ago 6
Javascript Question

images won't change on mouseover of link

When you mouseover the link named Adelaide the image australiaMap doesn't change there is something wrong with my code but I can't workout what it is.I thought the linkObj was supposed to the name of the link.

HTML

<div id ="div12">
<ul>
<li><a href ="adelaide.html" class ="caption" id = "south" mouseout = "Adelaide.onmouseout = function()" onmouseover ="Adelaide.onmouseover = function()">Adelaide</a></li>
<li><a href ="alicesprings.html" class = "caption" id = "central" onmouseout = "Adelaide.mouseout()" onmouseover = "Adelaide.mouseover()" >Alice Springs</a></li>
<li><a href ="broome.html" class ="caption" id ="broome">Broome</a></li>
<li><a href = "cairns.html" class ="caption" id ="cairns">Cairns</a></li>
<li><a href ="canberra.html" class ="caption" id ="canberra">Canberra</a></li>
</ul>
</div>
<div id ="div13">
<ul>
<li><a href ="darwin.html">Darwin</a></li>
<li><a href ="goldcoast.html">Gold Coast</a></li>
<li><a href ="hobart.html">Hobart</a></li>
<li><a href ="regionalcities.html">Regional Cities</a></li>
</ul>
</div>
<div id ="div15">
<ul>
<li><a href ="bluemountains.html">Blue Mountains</a></li>
<li><a href ="byronbay.html">Byron Bay</a></li>
<li><a href ="flindersranges.html">Flinders Ranges</a></li>
<li><a href ="frazerisland.html">Frazer Island</a></li>
<li><a href ="freycinet.html">Freycinet</a></li>
<li><a href ="gippsland.html">Gippsland</a></li>
<li><a href ="kakadu.html">Kakadu</a></li>
</ul>
</div>
<div id ="div16">
<ul>
<li><a href ="namadjinationalpark.html">Namadji Park</a></li>
<li><a href ="ningaloo.html">Ningaloo</a></li>
<li><a href ="tasmanianwilderness.html">Tasmanian Wilderness</a></li>
<li><a href ="australianalps.html">Australian Alps</a></li>
<li><a href ="kimberley.html">Kimberley</a></li>
<li><a href ="margaretriver.html">Margaret River</a></li>
</ul>
</div>
<div id ="div14">
<img src="images/australiaMap.jpg" id ="img9" alt=""/>
</div>


JavaScript

"use strict";
window.onload =rolloverInit;

function rolloverInit()
{
for(var i =0;i<document.links.length;i++) {
var linkObj =document.links[i];
var images = new Array("australiaMap.jpg","adelaide.jpg","broome.jpg","cairns.jpg","canberra.jpg","darwin.jpg","goldcoast.jpg","hobart.jpg");
if(linkObj.caption) {
var imgObj =document.getElementById("Adelaide".caption);
if(imgObj) {
setupRollover(linkObj,imgObj);
}
}
}
}

function setupRollover(Adelaide,australiaMap)
{
Adelaide.australiaMap= australiaMap;
Adelaide.onmouseout = function()
{
this.images.australiaMap.src = this.images.australiaMap.src;
}
Adelaide.onmouseover = function()
{
this.images.adelaide.src = this.images.adelaide.src;
}
Adelaide.outImage = new Image();
Adelaide.images.australiaMap.src = "images/australiaMap.jpg";
Adelaide.overImage = new Image();
Adelaide.images.adelaide.src = "images/" + Adelaide.south + "adelaide.jpg";
}

sam sam
Answer

I have created a following snippet according to my understanding. Some details:

  1. added data- attribute to store the image to show on mouse hover(or rollover)
  2. fetching the image to show on mouse hover from element.dataset
  3. replaced mouseover with mouseenter, as mouseenter will be triggered only once when mouse has entered into the element. mouseover will be triggered everytime when the mouse moves over that element.

Try the following snippet:

var AUSTRALIA_IMG = 'australiaMap.jpg', //default image
  imgObj; //stores the #img9 element

function rolloverInit() {
  var rollOverLinks = document.querySelectorAll('a.caption');
  // gets all the links which has caption
  // images which are supposed to show on rollover are passed from `data-img` attribute

  imgObj = document.getElementById('img9');

  for (var i = 0; i < rollOverLinks.length; i++) {
    var linkObj = document.links[i];
    setupRollover(linkObj);
  }
}

function setupRollover(linkObj) {

  //on mouse out of the rollover link, sets back the default image
  linkObj.onmouseout = function() {
    setImage(AUSTRALIA_IMG);
  }

  //on mouse enter in the rollover link, sets the image specified in data-img attribute
  linkObj.onmouseenter = function() {
    setImage(this.dataset['img']);
  }
}

// sets the image in <img> element
function setImage(imgName) {
  if (imgName.indexOf('http') != 0)
    imgName = 'images/' + imgName;
  imgObj.src = imgName;
}

// rolloverInit will execute when document has loaded
(rolloverInit)();
a.caption {
  background: Gold;
  color: black;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <ul>
    <li><a href="adelaide.html" class="caption" id="south" data-img="adelaide.jpg">Adelaide</a>
    </li>
    <li><a href="alicesprings.html" class="caption" id="central" data-img="alicesprings.jpg">Alice Springs</a>
    </li>
    <li><a href="broome.html" class="caption" id="broome" data-img="broome.jpg">Broome</a>
    </li>
    <li><a href="cairns.html" class="caption" id="cairns" data-img="cairns.jpg">Cairns</a>
    </li>
    <li><a href="canberra.html" class="caption" id="canberra" data-img="canberra.jpg">Canberra</a>
    </li>
    <li><a href="google.html" class="caption" data-img="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">Google</a>
    </li>
  </ul>
  </div>
  <div id="div13">
    <ul>
      <li><a href="darwin.html">Darwin</a>
      </li>
      <li><a href="goldcoast.html">Gold Coast</a>
      </li>
      <li><a href="hobart.html">Hobart</a>
      </li>
      <li><a href="regionalcities.html">Regional Cities</a>
      </li>
    </ul>
  </div>
  <div id="div15">
    <ul>
      <li><a href="bluemountains.html">Blue Mountains</a>
      </li>
      <li><a href="byronbay.html">Byron Bay</a>
      </li>
      <li><a href="flindersranges.html">Flinders Ranges</a>
      </li>
      <li><a href="frazerisland.html">Frazer Island</a>
      </li>
      <li><a href="freycinet.html">Freycinet</a>
      </li>
      <li><a href="gippsland.html">Gippsland</a>
      </li>
      <li><a href="kakadu.html">Kakadu</a>
      </li>
    </ul>
  </div>
  <div id="div16">
    <ul>
      <li><a href="namadjinationalpark.html">Namadji Park</a>
      </li>
      <li><a href="ningaloo.html">Ningaloo</a>
      </li>
      <li><a href="tasmanianwilderness.html">Tasmanian Wilderness</a>
      </li>
      <li><a href="australianalps.html">Australian Alps</a>
      </li>
      <li><a href="kimberley.html">Kimberley</a>
      </li>
      <li><a href="margaretriver.html">Margaret River</a>
      </li>
    </ul>
  </div>
  <div id="div14">
    <img src="images/australiaMap.jpg" id="img9" alt="" />
  </div>
  </div>
  </div>
</body>

</html>