Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

mouseover question-on image map, image pops up when mouse is over area

I have a map of the US, and it is mapped so that clicking on a state will take you to another page of information, like this:

<img src="../images/northamerica.jpg" width="787" height="421" border="0" alt="" usemap="#locationmap"/>
     <map id="locationmap" name="location">

<area shape="rect" coords="28, 10, 83, 52" alt="AK"  href="the information  page." />
 
I would like to try to revamp it so that when someone's mouse is over Alaska, an image of a map of Alaska pops up. But I am pretty unacquainted with javascript, so please be very specific and simplistic for me, ok? Thanks in advance,

mel150
0
mel150
Asked:
mel150
  • 2
  • 2
1 Solution
 
monolith_888Commented:
Try this code out.  This will display the images you want in a specific spot on the page upon mousing over a state.  Just alter the .stateImg class to move the location of the image that appears.  Let me know if you have any questions.

-HTH
Blake

<html>
<head>
<title>Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.stateImg      {position:absolute;top:10;left:500;}
</style>
<script>
function showImg(state)
      {
      var theState = document.getElementById(state);
      theState.style.display = "";
      }
      
function hideImg(state)
      {
      var theState = document.getElementById(state);
      theState.style.display = "none";
      }
</script>
</head>
<body>
<img name="test" src="quilt.gif" width="250" height="250" border="0" usemap="#m_test" alt="">

<img id="alaska" src="alaska.gif" class="stateImg" style="display:none;">
<img id="california" src="california.gif" class="stateImg" style="display:none;">
<img id="hawaii" src="hawaii.gif" class="stateImg" style="display:none;">
<img id="florida" src="florida.gif" class="stateImg" style="display:none;">
<map name="m_test">
<area shape="rect" coords="0,133,136,250" href="alaska.html" alt="" onMouseOver="showImg('alaska');" onmouseout="hideImg('alaska')">
<area shape="rect" coords="123,0,250,137" href="california.html" alt=""  onMouseOver="showImg('california');" onmouseout="hideImg('california')">
<area shape="rect" coords="132,144,249,237" href="hawaii.html" alt=""  onMouseOver="showImg('hawaii');" onmouseout="hideImg('hawaii')">
<area shape="rect" coords="0,0,127,125" href="florida.html" alt=""  onMouseOver="showImg('florida');" onmouseout="hideImg('florida')">
</map>
</body>
</html>
0
 
mel150Author Commented:
Hi-I'm not stalling on accepting this, just trying to make sense of it before I start. I'm sure I'll have a few question for yu soon, though. Thanks-it looks awesome.
0
 
mel150Author Commented:
You javascript guys! Just like magicians! Thanks, it worked like a charm.

Mel150
0
 
monolith_888Commented:
Glad to help!

-blake
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now