Jump to content
  • Advertisement
Sign in to follow this  
johnnyBravo

[web] Javascript, possible to draw lots of little crosses ontop of picture?

This topic is 5043 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi, I'm wondering if its possible with javascript to draw crosses ontop of a loaded picture, eg this picture: I want to draw crosses on some of the numbers.(i.e ones that arn't available) If this is possible, where would I go about knowing what functions etc to use. Thanks

Share this post


Link to post
Share on other sites
Advertisement
If you used a absolute position div for the image layer, you should be able to use another layer for each x that is higher up on the z order.

For the numbers I would use a transparent overlay div (or have them part of the picture)

To position the x you capture the click event and get the mouse position I guess, which should be relative to the picture.

But it should be pretty simple... all divs and event sinking.

I guess if you wanted to have the result forwarded you could try and do something clever with a form invisible element for each x you are allowed (giving the input an id and setting it's contents to the correct number?) Again you could do this from a function called from the onclick event.

Share this post


Link to post
Share on other sites
You can create an element which is absolutely positioned, containing a partially transparent image of a cross.

Then position it so that it's in the right place.

You might want to be able to figure out the location of a (non-absolutely positioned element), in order to place the (absolutely positioned) crosses in the right place.

I suggest these functions could help


function GetElementX(obj)
{
var x=0;
do {
x += obj.offsetLeft;
obj = obj.offsetParent;
} while (obj);
return x;
}

function GetElementY(obj)
{
var y=0;
do {
y += obj.offsetTop;
obj = obj.offsetParent;
} while (obj);
return y;
}




Mark

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!