Solved

Dynamically drawing shapes in a DIV using javascript

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Technology Resume 7 88
Programming Language for Wordpress 7 85
certificate error on website only in internal network 24 102
Making exceptions for ValidationAttribute 2 40
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

739 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