Results 1 to 2 of 2

Thread: Trying to have effects on an area map

  1. #1
    Join Date
    Jan 2014

    Trying to have effects on an area map

    I have an image of a solar system, and I'm trying to make it so when you mouseover a planet the planet does some kind of effect - in this case, changes color. I found this JavaScript code online and it seems to be what I would need:


    // stores the device context of the canvas we use to draw the outlines
    // initialized in myInit, used in myHover and myLeave
    var hdc;

    // shorthand func
    function byId(e){return document.getElementById(e);}

    // takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
    // draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
    function drawPoly(coOrdStr)
    var mCoords = coOrdStr.split(',');
    var i, n;
    n = mCoords.length;

    hdc.moveTo(mCoords[0], mCoords[1]);
    for (i=2; i<n; i+=2)
    hdc.lineTo(mCoords[i], mCoords[i+1]);
    hdc.lineTo(mCoords[0], mCoords[1]);

    function drawRect(coOrdStr)
    var mCoords = coOrdStr.split(',');
    var top, left, bot, right;
    left = mCoords[0];
    top = mCoords[1];
    right = mCoords[2];
    bot = mCoords[3];

    function drawCirc(coOrdStr)
    var mCoords = coOrdStr.split(',');
    var x, y, r;
    x = mCoords[0];
    y = mCoords[1];
    r = mCoords[2];

    function myHover(element)
    var hoveredElement = element;
    var coordStr = element.getAttribute('coords');
    var areaType = element.getAttribute('shape');

    switch (areaType)
    case 'polygon':
    case 'poly':

    case 'rect':

    case 'circle':

    function myLeave()
    var canvas = byId('myCanvas');
    hdc.clearRect(0, 0, canvas.width, canvas.height);

    function myInit()
    // get the target image
    var img = document.getElementById('solarSystemPic');

    var x,y, w,h;

    // get it's position and width+height
    x = img.offsetLeft;
    y = img.offsetTop;
    w = img.clientWidth;
    h = img.clientHeight;

    // move the canvas, so it's contained by the same parent as the image
    var imgParent = img.parentNode;
    var can = document.getElementById('myCanvas');

    // place the canvas in front of the image
    can.style.zIndex = 1;

    // position it over the image
    can.style.left = x+'px';
    can.style.top = y+'px';

    // make same size as the image
    can.setAttribute('width', w+'px');
    can.setAttribute('height', h+'px');

    // get it's context
    hdc = can.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
    hdc.fillStyle = 'red';
    hdc.strokeStyle = 'red';
    hdc.lineWidth = 2;


    And here is the area map code:

    <body onload='myInit()'>

    <h1>The Solar System</h1>

    <canvas id='myCanvas'></canvas>
    <img src="images/jan15_planets.jpg" id="solarSystemPic" width="730" height="380" alt="Planets" usemap="#planetmap">

    <map name="planetmap">
    <area shape="rect" coords="0,161,54,380" alt="Sun" class="mapSpace" href="sun.htm" id="solarSystemPic_area_sun">
    <area shape="circle" coords="88,324,9" alt="Mercury" href="mercury.htm" id="solarSystemPic_area_mercury">
    <area shape="circle" coords="167,303,19" alt="Venus" href="venus.htm" id="solarSystemPic_area_venus">
    <area shape="circle" coords="225,280,19" alt="Earth" href="earth.htm" id="solarSystemPic_area_earth">
    <area shape="circle" coords="248,305,7" alt="Moon" href="moon.htm" id="solarSystemPic_area_moon">
    <area shape="circle" coords="267,253,11" alt="Mars" href="mars.htm" id="solarSystemPic_area_mars">
    <area shape="circle" coords="330,187,44" alt="Jupiter" href="jupiter.htm" id="solarSystemPic_area_jupiter">
    <area shape="poly" coords="307,97, 350,90, 384,94, 413,109, 421,124, 414,142, 381,157, 366,159, 350,147, 332,143, 314,146, 304,151, 289,142, 281,124, 288,109" alt="Saturn" href="saturn.htm" id="solarSystemPic_area_saturn">
    <area shape="circle" coords="346,66,22" alt="Uranus" href="uranus.htm" id="solarSystemPic_area_uranus">
    <area shape="circle" coords="323,22,16" alt="Neptune" href="neptune.htm" id="solarSystemPic_area_neptune">
    <area shape="poly" coords="398,237, 454,158, 542,178, 427,233" alt="Comets" href="comets.htm" id="solarSystemPic_area_comets">
    <area shape="poly" coords="0,99, 129,114, 237,156, 297,213, 323,243, 362,331, 355,380" alt="Asteroid Belt" href="asteroids.htm" id="solarSystemPic_area_asteroids">
    <area shape="circle" coords="369,355,9" alt="Dwarf Planets" href="dwarf.htm" id="solarSystemPic_area_dwarf">
    <area shape="circle" coords="707,129,9" alt="Dwarf Planets" href="dwarf.htm" id="solarSystemPic_area_dwarf">
    <area shape="circle" coords="669,72,9" alt="Dwarf Planets" href="dwarf.htm" id="solarSystemPic_area_dwarf">
    <area shape="poly" coords="403,0, 593,0, 720,70, 730,123, 567,62, 444,31" alt="Oort Cloud" href="oort.html" id="solarSystemPic_area_oort">
    <area shape="poly" coords="615,0, 730,0, 730,49, 673,49" alt="Beyond the Solar System" href="beyond.htm" id="solarSystemPic_area_beyond">

    However, there seems to be no effect change. Any help would be appreciated.

  2. #2
    Join Date
    Jan 2014
    I'm sorry, I put the code tags up but they didn't seem to work.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles