[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Dynamically drawing shapes in a DIV using javascript

Posted on 2004-04-19
7
Medium Priority
?
1,411 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
5 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month17 days, 16 hours left to enroll

829 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