Solved

Dynamically drawing shapes in a DIV using javascript

Posted on 2004-04-19
7
1,360 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
  • 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now