?
Solved

Dynamically drawing shapes in a DIV using javascript

Posted on 2004-04-19
7
Medium Priority
?
1,399 Views
Last Modified: 2012-08-14
I have a <DIV> on my webpage, and when it is clicked, I would like for a Javascript onClick function to draw a filled square of specific proportions (say, 10 pixels) at the location of the click.  How can this be accomplished without including any special packages or libraries?
0
Comment
Question by:nomoreself
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
7 Comments
 
LVL 9

Expert Comment

by:keteracel
ID: 10865411
Try my example at http://www.keteracel.com/test

The code for this is below.

<!-- ################################################################### -->
<!-- ##################### (c)2004 keteracel.com ####################### -->
<!-- ################################################################### -->
<!-- Provided free of charge with no warranty either express or implied. -->
<!-- This code can be used free of charge but acknowledgement is required-->
<!-- in the form of a link from your site to http://www.keteracel.com    -->
<html>
      <head>
            <script type="text/javascript">
                  function movediv (e) {
                        var width = 30;
                        var height = 30;

                        // because Microsoft and Netscape developed their own versions of Javascript
                        // we have to check which features are accepted by the browser, hence the if
                        // statements... Instead of trying to see what browser we have (which can be
                        // impossible if this can be changed in the browser configuration [e.g. Opera])
                        // we feature sense. We check if the event object has the appropriate properties.
                        if (e.pagex) {
                              document.getElementById("rectangle").style.top = e.pagey;
                              document.getElementById("rectangle").style.left = e.pagex;
                        }
                        else if (e.clientX) {
                              document.getElementById("rectangle").style.top = e.clientY;
                              document.getElementById("rectangle").style.left = e.clientX;
                        }
                        else {
                              alert('Your browser does not support mouse events...\nPlease use Internet Explorer, Mozilla or Netscape');
                        }
                        
                        document.getElementById("rectangle").style.width = width;
                        document.getElementById("rectangle").style.height = height;

                        document.getElementById("rectangle").style.visibility = "visible";
                        return true;
                  }
            </script>
      </head>
      <body>
            <div id="rectangle" style="width: 1; height: 1; visibility: hidden; overflow: hidden; background: #000000; position: absolute;">&nbsp;</div>
            <div style="border: 2px solid #666699; width: 300; height: 300; background: #99CCFF; overflow: hidden; text-align: center; vertical-align: center;" onCLick="movediv(event);">Click here!</div>
      </body>
</html>

Please note that to make it completely cross-browser you should 'feature sense' the document.getElementById("") functions, etc...

Have fun...
0
 

Author Comment

by:nomoreself
ID: 10868500
Thanks for the input, keteracel.  This is very close, but rather than moving a single square around, I would need it to draw a new square at each click.
0
 

Author Comment

by:nomoreself
ID: 10881691
Wow, one response in two days.  Well, I'm going to close out this question without awarding points, then.  I got it working on my own anyway, and my solution is below for anyone who cares.  Thanks for trying keteracel.

SOLUTION:
Uses php to dynamically create a box and
javascript to place this box in the grid area within the <DIV>
that was clicked.

Special credit to http://www.smokinggun.com for the inspiration
for this solution.
========

---test.html---
<div id="divid" STYLE="position: relative;">
<img src="image.jpg" usemap="#imagemap" border=1>
</div>

<script>
    function drawBox(startx, starty, endx, endy, divid) {
    /*  Javascript function that draws a filled box within a <DIV>
        according to the coordinates passed as parameters. */

        box = document.createElement("img");
        box.src = "box.php?startx=" + startx + "&starty=" + starty + "&endx=" + endx + "&endy=" + endy;
        box.style.left = startx + "px";
        box.style.top = starty + "px";
        box.style.position = "absolute";
        document.getElementById(divid).appendChild(box);

    }
</script>

<?php
/*  Generate the imagemaps for the defect charts:
****************************************/
//Constants that can be altered to change the map:
$startx = 15;
$starty = 18;
$endx = 319;
$endy = 150;

$boxes_across = 20;
$boxes_down = 10;
/****************************************/

//Setting up some other variables used to make the maps:
$width = $endx - $startx;
$height = $endy - $starty;

$box_width = ($width / $boxes_across);
$box_height = ($height / $boxes_down);

//Generate the map:

echo "<map name='imagemap'>";

for ($x = $startx, $nextx = $x+$box_width; $x < $endx; $x = $nextx, $nextx+=$box_width) {
  for ($y = $starty, $nexty = $y+$box_height; $y < $endy; $y=$nexty, $nexty+=$box_height) {
    echo "
    <area shape='rect' coords='$x,$y,$nextx,$nexty' onClick=\"drawBox($x,$y,$nextx,$nexty,'divid');\">";
  }
}
?>

--end test.html--

--box.php--
<?php
/*  Outputs a box of specified proportion and color. */

$startx = $_GET["startx"];
$starty = $_GET["starty"];
$endx = $_GET["endx"];
$endy = $_GET["endy"];

$width = $endx - $startx;
$height = $endy - $starty;

$box = imagecreate($width, $height);
$color = imagecolorallocate($box, 255, 0, 0);  //red

imagefill($box, $width, $height, $color);

header("Content-type: image/png");
imagepng($box);
imagedestroy($box);
?>
--end box.php--
0
 

Accepted Solution

by:
modulo earned 0 total points
ID: 10911588
Closed, 500 points refunded.
modulo
Community Support Moderator
Experts Exchange
0
 
LVL 9

Expert Comment

by:keteracel
ID: 10968090
that's really unfair... I give a good answer  and get nothing when this modulo guy does nothing and gets 500?
0

Featured Post

Major Serverless Shift

Comparison of major players like AWS, Microsoft Azure, IBM Bluemix, and Google Cloud Platform

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month8 days, 1 hour left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question