[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Dynamically drawing shapes in a DIV using javascript

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

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
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…
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

650 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