CODEWITHSUNDEEP
javascripthtmlimagedictionary
user3226440
user3226440

Reputation: 559

HTML drawing map(circle) on image

I am trying to draw a circle on image with the help of map property of html. I draw one image and onclick of image in javascript I am adding the area coordinates of map property. but i am getting the null error.

code:

 <div id="pointer_div"  onclick="point_it(event)" style="width: 500px; height: 333px;">
<asp:Image class="mappies" ID="image1" usemap="#parking_map" runat="server" Width="500px" imageUrl="image1.jpg" />
<map name="parking_map" id="imagemap1" runat="server"></map>
 </div>

and in javascript method of clicking image i am getting the coordinates of image and drawing map area

<script language="JavaScript">
    function point_it(event) {
        pos_x = event.offsetX ? (event.offsetX) : event.layerX - document.getElementById("pointer_div").offsetLeft;
        pos_y = event.offsetY ? (event.offsetY) : event.layerY - document.getElementById("pointer_div").offsetTop;alert(pos_x);
        alert(pos_y);
        map.innerHTML += "<area class='location_1' title='ab' shape='circle' coords='70,70,9' target='_self' alt='ab' href='#' />";
}

i am getting error Uncaught TypeError: Cannot read property 'innerHTML' of null

Upvotes: 0

Views: 2616

Answers (2)

Tushar Gupta
Tushar Gupta

Reputation: 15923

The area tag just defines space in which the user can click, there is no visual representation of it so you can't really see it.

But for your Query:

Actually you have to get the element first either by Tag

  var map= document.getElementsByTagName("map")[0];

or by ID as 

  var map= document.getElementById("imagemap1")

and then use

map.innerHTML += "<area class='location_1' title='ab' shape='circle' coords='70,70,9' target='_self' alt='ab' href='#' />";

Upvotes: 1

Salix alba
Salix alba

Reputation: 7824

The map tag will not actually draw a circle, just give you a circular clickable region. What you probably want is to use the html5 canvas tag. First create a canvas, then draw the image in the canvas then draw a circle on top.

<canvas id="example" width="500" height="333">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<script language="JavaScript">
    var example = document.getElementById('example');
    var context = example.getContext('2d');

    var imageObj = new Image();
    imageObj.onload = function() { // function called after image has loaded all drawing needs to be here
        context.drawImage(imageObj, 0, 0);

        context.lineWidth = 1; 
        context.strokeStyle = 'black';
        context.context.beginPath();
        context.arc(250, 166, 100, 0, Math.PI*2);
        context.stroke();
    };
    imageObj.src = 'image1.jpg';

Upvotes: 0

Related Questions