Click here to Skip to main content
15,896,118 members
Search within:


Map pin markers on a HTML Imagemap in a VB.net Webbrowser control
Please Sign up or sign in to vote.
2.33/5 (2 votes)
See more:
VB
Javascript
HTML
I have a VB.Net 2005 project that uses a WebBrowser control on a windows form. On the control, I have created an imagemap using HTML and javascript. When a user clicks on the imagemap, a marker (like a map pin) is displayed where the user clicked, and prescribed processing for that section of the imagemap takes place.

My problem occurs when the user needs to click on the imagemap where a marker is already displayed. Through recursive code, I have been able to get it to display a new marker overlapping the previous one, but cannot get the underlying imagemap code to recognize the click to perform the needed processing.

Can anyone help with this? See code below.

HTML
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DartBoard</title>
    
<style type="text/css" > 
   .whiterectangle { color: white; background-color: white; z-index: 0;} 
   .blackrectangle { color: black; background-color: black; z-index: 1;} 
   .mousetarget { position: absolute; top:50; left:50; z-index: 5; opacity: "0%"; cursor:pointer; } 
   .dynamicDiv {
       width:24px;
       height:24px;
       border:solid 1px #c0c0c0;
       background-color:green;
       font-size:11px;
       font-family:verdana;
       color:yellow;
       padding:0px;
       z-index: 0;
       opacity: "0%";
       }
</style> 

<script language="javascript" type="text/javascript">
function getvalue(message) 
{
   alert(message);
}

function tagInfo()
{
   var tag;
   tag = window.event.srcElement.tagName;
   alert(tag);
}
 
 
function set_mouse_on(obj)
{
   obj.style.cursor='auto';
}

function set_mouse_of(obj)
{
   obj.style.cursor=obj;
}

function CalcThrow()
{
   /*document.getElementById('dartboard').onclick = myHandler;
   function myHandler(evt) {alert(this.alt);}*/
   window.external.Test(window.event.srcElement.alt);
}
</script>

<script language="JavaScript" type="text/javascript">
//getting mouse coords onclick relative to image 
function zxcEvent(){
   var zxce=window.event||arguments.callee.caller.arguments[0];
   //if (typeof zxce.layerX=='undefined') zxce.layerX=zxce.offsetX;
   //if (typeof zxce.layerY=='undefined') zxce.layerY=zxce.offsetY;
   if (typeof zxce.layerX=='undefined') zxce.layerX=zxce.clientX;
   if (typeof zxce.layerY=='undefined') zxce.layerY=zxce.clientY;
   
   createDiv(zxce.layerX,zxce.layerY)
   return [zxce.layerX,zxce.layerY];
}

function createDiv(x,y){
   var img = document.createElement("img");
   //img.src = "Circle - Yellow8.ico";
   img.src = "point10_32.ico";
   img.id = "dynamicImg"
   img.usemap = "#dartboard";
   img.style.width=16;
   img.style.height=16;
   img.style.zIndex=3;
   img.style.position = "absolute";
   img.style.opacity = "0%";
   //img.style.left = x + 10;
   //img.style.top = y + 12;
   img.style.left = x;
   img.style.top = y;
   
   /*This fires when you click on a dart icon. See if you can use it*/
   img.onmousedown = function() {dartboard.style.zIndex=100; CalcThrow()};
   img.onclick = function(){zxcEvent()};
   //img.onmouseover = function() {img.style.zIndex=-1};
   //img.onmouseout = function() {img.style.zIndex=3};
   
   var dBody = document.getElementsByTagName("body")[0];
   dBody.appendChild(img);
}

function deleteImg(){
   var x = document.getElementsByName("dynamicImg");
   var i=0;
   for (i=0;i<=x.length+1;i++)
      {
         var img = document.getElementById("dynamicImg");
         var dBody = document.getElementsByTagName("body")[0];
         if (img != null) {dBody.removeChild(img);}
      }
}
</script>
</head>

<body background="post-36-1095879429.jpg">
<div id="mousetarget" class="mousetarget"></div>   
<div style="margin-removed 0px; width: 600px; height: 600px;">
   <div style="float: left; margin-removed 0px; removed auto; width: 600px; height: 600px; z-index:5" id="dartbd" >
      <img id="IMG1" src="round-dartboard - Copy copy.gif" border="0" usemap="#dartboard" 
          alt=""  style="position:absolute; z-index:-1"/>   
      
      <map id="dartboard" onmousedown="CalcThrow();"  önclick="zxcEvent();" 
                     style="position:absolute; z-index:5">
             
         <!-- Scoring Zone 1 -->
          <area id="1a" shape="POLY" coords="336,105 350,107 370,113 392,122 366,179 354,174 338,171 328,169"
             alt="S1" style="position:absolute; z-index:5" />
          <area id="1b" shape="POLY" coords="327,184 342,186 359,191 321,278 314,277"
             alt="S1" style="position:absolute; z-index:5" />
          <area id="D1" shape="POLY" coords="338,92 358,94 381,101 396,108 394,119 378,112 355,105 337,102"
             alt="D1" style="z-index:5" />
          <area id="T1" shape="POLY" coords="328,169 346,172 364,181 360,191 343,184 325,180"
             alt="T1" style="z-index:5" />
         <!-- Scoring Zone 2 -->
          <area id="2a" shape="POLY" coords="453,433 438,445 420,458 406,469 379,417 394,406 407,393"
             alt="S2" style="z-index:5" />
          <area id="2b" shape="POLY" coords="396,383 384,392 369,400 325,321 329,319"
             alt="S2" style="z-index:5" />
          <area id="D2" shape="POLY" coords="464,444 451,456 433,470 414,481 409,472 426,462 442,448 453,436"
             alt="D2" style="z-index:5" />
          <area id="T2" shape="POLY" coords="406,391 394,403 377,412 372,403 386,394 397,384"
             alt="T2" style="z-index:5" />
         <!-- Scoring Zone 3 -->
          <area id="3a" shape="POLY" coords="346,492 328,494 307,494 289,494 297,433 316,433 335,432"
             alt="S3" style="z-index:5" />
          <area id="3b" shape="POLY" coords="332,414 317,417 300,417 310,325 314,325"
             alt="S3" style="z-index:5" />
          <area id="D3" shape="POLY" coords="349,505 332,509 307,510 289,509 289,495 307,497 328,497 346,495"
             alt="D3" style="z-index:5" />
          <area id="T3" shape="POLY" coords="336,429 317,430 298,430 297,420 314,420 333,419"
             alt="T3" style="z-index:5" />
         <!-- Scoring Zone 4 -->
          <area id="4A" shape="POLY" coords="447,158 462,173 474,189 481,203 427,233 416,220 403,205"
             alt="S4" style="z-index:5" />
          <area id="4B" shape="POLY" coords="392,214 402,224 413,240 330,288 328,284"
             alt="S4" style="z-index:5" />
          <area id="D4" shape="POLY" coords="456,148 468,160 482,177 495,193 480,199 473,187 460,171 448,157"
             alt="D4" style="z-index:5" />
          <area id="T4" shape="POLY" coords="403,205 415,217 425,233 414,237 407,227 394,214"
             alt="T4" style="z-index:5" />
         <!-- Scoring Zone 5 -->
          <area id="5A" shape="POLY" coords="218,129 233,119 250,113 271,108 284,166 264,171 247,180"
             alt="S5" style="z-index:5" />
          <area id="5B" shape="POLY" coords="256,197 270,189 286,185 306,275 301,276"
             alt="S5" style="z-index:5" />
          <area id="D5" shape="POLY" coords="211,113 229,104 251,96 269,92 271,103 253,106 231,113 215,126"
             alt="D5" style="z-index:5" />
          <area id="T5" shape="POLY" coords="250,184 265,177 284,172 288,181 271,183 253,192"
             alt="T5" style="z-index:5" />
         <!-- Scoring Zone 6 -->
          <area id="6A" shape="POLY" coords="505,265 507,286 508,307 505,321 444,313 446,297 444,278"
             alt="S6" style="z-index:5" />
          <area id="6B" shape="POLY" coords="429,311 429,296 428,280 334,296 334,300"
             alt="S6" style="z-index:5" />
          <area id="D6" shape="POLY" coords="520,323 522,305 522,280 520,262 505,263 508,284 508,305 506,320"
             alt="D6" style="z-index:5" />
          <area id="T6" shape="POLY" coords="441,279 443,295 443,313 430,311 430,298 430,280"
             alt="T6" style="z-index:5" />
         <!-- Scoring Zone 7 -->
          <area id="7A" shape="POLY" coords="227,476 211,468 193,456 180,445 222,400 238,410 252,418"
             alt="S7" style="z-index:5" />
          <area id="7B" shape="POLY" coords="261,405 247,399 232,387 296,318 298,319"
             alt="S7" style="z-index:5" />
          <area id="D7" shape="POLY" coords="221,488 206,481 187,470 170,455 177,445 193,458 210,469 226,478"
             alt="D7" style="z-index:5" />
          <area id="T7" shape="POLY" coords="255,419 239,409 224,398 230,388 244,397 259,406"
             alt="T7" style="z-index:5" />
         <!-- Scoring Zone 8 -->
          <area id="8A" shape="POLY" coords="139,392 130,373 123,358 121,340 180,327 185,345 192,360"
             alt="S8" style="z-index:5" />
          <area id="8B" shape="POLY" coords="207,353 201,338 197,325 288,307 289,309"
             alt="S8" style="z-index:5" />
          <area id="D8" shape="POLY" coords="126,399 119,384 112,368 105,344 119,341 124,362 129,377 138,393"
             alt="D8" style="z-index:5" />
          <area id="T8" shape="POLY" coords="195,359 189,347 182,328 194,325 198,341 206,355"
             alt="T8" style="z-index:5" />
         <!-- Scoring Zone 9 -->
          <area id="9A" shape="POLY" coords="135,215 142,199 152,181 165,168 214,211 201,226 192,241"
             alt="S9" style="z-index:5" />
          <area id="9B" shape="POLY" coords="205,249 211,235 224,220 294,282 291,287"
             alt="S9" style="z-index:5" />
          <area id="D9" shape="POLY" coords="121,208 130,190 142,172 154,156 163,165 151,180 140,197 133,216"
             alt="D9" style="z-index:5" />
          <area id="T9" shape="POLY" coords="193,241 201,227 213,212 221,220 209,232 203,246"
             alt="T9" style="z-index:5" />
         <!-- Scoring Zone 10 -->
          <area id="10A" shape="POLY" coords="504,326 500,349 495,369 490,380 434,354 439,339 443,320"
             alt="S10" style="z-index:5" />
          <area id="10B" shape="POLY" coords="427,315 424,332 420,349 331,308 333,305"
             alt="S10" style="z-index:5" />
          <area id="D10" shape="POLY" coords="519,326 517,346 511,366 504,387 490,380 496,363 502,343 504,328"
             alt="D10" style="z-index:5" />
          <area id="T10" shape="POLY" coords="443,319 440,333 434,352 420,348 425,334 429,317"
             alt="T10" style="z-index:5" />
         <!-- Scoring Zone 11 -->
          <area id="11A" shape="POLY" coords="116,280 114,300 115,322 118,337 179,323 179,306 180,285"
             alt="S11" style="z-index:5" />
          <area id="11B" shape="POLY" coords="193,289 193,304 195,320 290,305 290,301"
             alt="S11" style="z-index:5" />
          <area id="D11" shape="POLY" coords="102,279 100,300 101,323 102,337 117,337 114,320 113,299 113,278"
             alt="D11" style="z-index:5" />
          <area id="T11" shape="POLY" coords="181,288 180,305 182,323 192,320 192,307 192,289"
             alt="T11" style="z-index:5" />
         <!-- Scoring Zone 12 -->
          <area id="12A" shape="POLY" coords="169,164 182,149 199,136 213,127 242,180 229,191 215,205"
             alt="S12" style="z-index:5" />
          <area id="12B" shape="POLY" coords="226,220 235,208 252,196 298,277 296,279"
             alt="S12" style="z-index:5" />
          <area id="D12" shape="POLY" coords="157,155 169,143 188,127 206,117 212,126 194,138 177,152 167,162"
             alt="D12" style="z-index:5" />
          <area id="T12" shape="POLY" coords="217,208 230,196 244,185 250,194 237,203 225,216"
             alt="T12" style="z-index:5" />
         <!-- Scoring Zone 13 -->
          <area id="13A" shape="POLY" coords="483,207 491,223 498,240 502,257 442,269 438,254 430,238"
             alt="S13" style="z-index:5" />
          <area id="13B" shape="POLY" coords="414,245 422,259 425,275 334,294 334,292"
             alt="S13" style="z-index:5" />
          <area id="D13" shape="POLY" coords="496,198 505,216 512,236 516,253 503,257 498,241 491,225 483,208"
             alt="D13" style="z-index:5" />
          <area id="T13" shape="POLY" coords="427,240 435,255 440,269 428,270 424,257 417,242"
             alt="T13" style="z-index:5" />
         <!-- Scoring Zone 14 -->
          <area id="14A" shape="POLY" coords="133,220 125,237 120,254 117,273 179,281 182,263 188,244"
             alt="S14" style="z-index:5" />
          <area id="14B" shape="POLY" coords="204,253 198,266 195,281 288,293 288,290"
             alt="S14" style="z-index:5" />
          <area id="D14" shape="POLY" coords="118,213 109,233 103,256 101,270 113,272 117,255 122,239 130,218"
             alt="D14" style="z-index:5" />
          <area id="T14" shape="POLY" coords="191,247 185,260 181,280 194,283 196,268 200,252"
             alt="T14" style="z-index:5" />
         <!-- Scoring Zone 15 -->
          <area id="15A" shape="POLY" coords="488,386 477,404 465,420 456,431 410,390 422,376 431,359"
             alt="S15" style="z-index:5" />
          <area id="15B" shape="POLY" coords="418,352 411,363 399,378 329,314 331,311"
             alt="S15" style="z-index:5" />
          <area id="D15" shape="POLY" coords="502,391 493,406 483,423 467,443 456,432 469,417 480,400 488,386"
             alt="D15" style="z-index:5" />
          <area id="T15" shape="POLY" coords="431,359 422,372 409,387 400,380 411,366 418,353"
             alt="T15" style="z-index:5" />
         <!-- Scoring Zone 16 -->
          <area id="16A" shape="POLY" coords="177,442 164,429 151,412 143,400 197,367 206,381 219,396"
             alt="S16" style="z-index:5" />
          <area id="16B" shape="POLY" coords="228,384 219,374 209,361 293,314 295,316"
             alt="S16" style="z-index:5" />
          <area id="D16" shape="POLY" coords="165,452 152,438 140,424 129,405 139,398 148,411 162,429 174,443"
             alt="D16" style="z-index:5" />
          <area id="T16" shape="POLY" coords="218,392 208,383 197,365 206,360 215,373 226,385"
             alt="T16" style="z-index:5" />
         <!-- Scoring Zone 17 -->
          <area id="17A" shape="POLY" coords="405,472 389,478 372,485 352,490 338,433 355,428 375,420"
             alt="S17" style="z-index:5" />
          <area id="17B" shape="POLY" coords="367,404 355,410 336,414 318,325 322,323"
             alt="S17" style="z-index:5" />
          <area id="D17" shape="POLY" coords="411,484 395,492 376,498 352,505 352,494 370,491 389,482 406,474"
             alt="D17" style="z-index:5" />
          <area id="T17" shape="POLY" coords="373,415 356,423 339,427 337,418 354,415 368,406"
             alt="T17" style="z-index:5" />
         <!-- Scoring Zone 18 -->
          <area id="18A" shape="POLY" coords="396,124 412,133 429,142 441,154 398,200 385,188 369,180"
             alt="S18" style="z-index:5" />
          <area id="18B" shape="POLY" coords="363,195 375,201 387,212 326,279 323,276"
             alt="S18" style="z-index:5" />
          <area id="D18" shape="POLY" coords="401,110 416,119 436,133 451,145 441,152 432,143 413,130 397,121"
             alt="D18" style="z-index:5" />
          <area id="T18" shape="POLY" coords="368,181 383,190 399,201 389,210 379,202 364,192"
             alt="T18" style="z-index:5" />
         <!-- Scoring Zone 19 -->
          <area id="19A" shape="POLY" coords="286,493 266,490 245,484 229,478 255,423 272,428 292,432"
             alt="S19" style="z-index:5" />
          <area id="19B" shape="POLY" coords="295,419 279,414 263,407 302,324 304,325"
             alt="S19" style="z-index:5" />
          <area id="D19" shape="POLY" coords="283,508 266,506 243,499 226,492 229,481 245,487 268,494 283,495"
             alt="D19" style="z-index:5" />
          <area id="T19" shape="POLY" coords="294,429 275,426 257,420 261,411 276,417 294,418"
             alt="T19" style="z-index:5" />
         <!-- Scoring Zone 20 -->
          <area id="20A" shape="POLY" coords="276,108 295,103 317,102 332,104 324,165 307,164 288,165"
             alt="S20" style="z-index:5" />
          <area id="20B" shape="POLY" coords="291,184 307,182 321,183 314,272 308,272"
             alt="S20" style="z-index:5" />
          <area id="D20" shape="POLY" coords="272,92 289,89 314,89 334,90 333,102 315,99 292,99 276,103"
             alt="D20" style="z-index:5" />
          <area id="T20" shape="POLY" coords="289,181 288,171 305,168 325,168 325,181 306,178"
             alt="T20" style="z-index:5" />
         <!-- Scoring Zone Bull -->
          <area id="DBULL" shape="POLY" coords="305,293 310,291 315,291 318,295 320,300 318,305 312,307 307,307 303,304 303,298"
             alt="D25" style="z-index:5" />
          <area id="BULL" shape="POLY" coords="307,277 313,277 321,279 325,283 329,290 330,294 331,305 327,311 322,318 315,321 308,322 304,318 297,315 292,309 290,298 290,291 296,284 301,279"
             alt="S25" style="z-index:5" />
     </map>
   </div>
   
   <div style="margin-removed -100px; removed -40px; width: 100px; height: 100px; removed: relative;" id="reference"></div>
   <div id="marker" style="removed: absolute; z-index: 20; width: 10px; height: 10px; margin-removed -5px; margin-removed -5px; background: #fffff0"></div>
</div>
</body>
</html>
Posted
Updated 14-May-13 11:25am
v2
Add a Solution
Comments
Richard C Bishop 14-May-13 17:00pm    
How do you suppose anyone helps if you do not provide your code?
psypgmr 15-May-13 9:48am    
Code added.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Problem with webbrowser in VB.NET while loading Google map
Updating Google maps marker position
ImageMap To Get ImageMap Click Function
Showing Marker on the Map
Trigger input changed events in webbrowser control (HTML element class)
how to findout the coordinates of map in asp.net ImageMap control
How to add descrption window to markers in google maps
Is there any limit for markers on google map
Google Map user defined marker
How to hide markers inside the map

Advertise
Privacy
Cookies
Terms of Use
Last Updated 14 May 2013
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900