# Thread: Trying to have effects on an area map

1. Registered User
Join Date
Jan 2014
Posts
10

## 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:

<CODE>
<script>

// 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.beginPath();
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]);
hdc.stroke();
}

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

function drawCirc(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var x, y, r;
x = mCoords[0];
y = mCoords[1];
r = mCoords[2];
hdc.beginPath();
hdc.arc(x,y,r,0,2*Math.PI);
ctx.stroke();
}

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

switch (areaType)
{
case 'polygon':
case 'poly':
drawPoly(coordStr);
break;

case 'rect':
drawRect(coordStr);
break;

case 'circle':
drawCirc(coordStr);
break;
}
}

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');
imgParent.appendChild(can);

// 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;
}
</script>

</CODE>

And here is the area map code:

<CODE>

<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">
</map>
</CODE>

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

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

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

#### Posting Permissions

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

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.14966 seconds
• Memory Usage 2,850KB
• Queries Executed 15 (?)
Template Usage (32):
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (2)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (2)postbit
• (2)postbit_onlinestatus
• (2)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (73):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_postinfo_query
• fetch_postinfo
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete