Sign in to follow this  

[web] image border problem

This topic is 3631 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

the subject may seem simple enough but its been giving me quite some trouble and im hoping someone could suggest anything. so please spare me some time and read the rest of this post.. anyway as far as i know the "border" property in HTML images only dictates the size and CSS property has some sub feats such as border style. But even though i already set border width to 0 and no border styles theres still always the "invisible border" that i cant eliminate.. uhm.. thats the general idea of the problem.. its kinda hard to explain..so il just post some images to aid me.. first this is how the test looked like..i use isometric tiles and characters.. http://img185.imageshack.us/img185/9713/sample1pp2.jpg il demonstrate what i meant by "invisible border".. in the next image i highlighted the tiles by selecting them with the mouse.. http://img168.imageshack.us/img168/6299/sample2sq4.jpg as you can see i used the z-order property as my z-axis to give it a 3D look..the selected tile has lower z-order compared to the ones next to it. the next image is when i selected the tile next to the first one.. http://img204.imageshack.us/img204/7026/sample3gc5.jpg ..notice the area inside the red circle where the selection of the adjacent tile intersects with the first one..that little area is still considered as part of the adjacent tile.. and thats exactly what i want to remove or remedy because it already "trespassed" the area of the first tile. i already tried image mapping, it doesnt really do anything the problem is still there.. i tried reversing the z-order but the problem just reversed too.. (the first tile is now the one trespassing on the adjacent tile's area) wel i did try making a whole map and just image map the whole thing into small tiles..but the image loading drastically became longer because in tiles ur just actually loading a small image in your computer and copying it... i really really dont like to use this option as i want the game to run as fast as possible. well forgive me if i cant explain very clearly..i just cant seem to find the right words to describe things in this particular problem. in any case feel free to look at my test so you can see for yourself.. http://farez.x10hosting.com/ffto/testiso.php the character can move NE (northeast) if you click on the tile..try click on the "trespassed" area i mentioned earlier.. (actually it can move SW (southwest) already but i didnt finish the code yet as i am trying to fix the "trespassing" issue in my code. well thats it..i hope someone can help me T_T or atleast give me an idea on other alternatives..thnx alot

Share this post


Link to post
Share on other sites
What's your problem exactly? The fact that it visually overlaps? Or the fact that clicks are assigned to the wrong tile? I'm guessing the latter because you use onclick events a lot.

The best solution is probably to drop all the image map areas and onclick events. Just add one onclick to the body tag and keep track of the mouse position manually. Then use basic math to figure out what pixel coordinate was clicked and what tile is underneath it. There's lots of sample javascript code for keeping track of mouse coordinates and clicks on the internet. Google for javascript drag&drop for example. Those do it manually too.

I've used this tutorial in the past.

Share this post


Link to post
Share on other sites
yea it visually overlaps..wel actually u cant really see the part where it actually overlaps..ul only see the part it overlaps when u select/highlight it

wel i did try putting the controls on the body tag before and it worked great on my static tiles.. but the code doesnt really apply on my dynamic tiles where there could be 2 or more different tiles on the same left-top position with different z-indexes that dynamically changes

in any case its been awhile since i posted this topic and i worked out on an alternative way to do it..but still i really would much prefer this one.

i appreciate the help Sander

Share this post


Link to post
Share on other sites
Why would it not work for dynamic tiles? At some point in your code you have to decide what z-index to assign a tile, so you should be able to determine what tile is on top, or what's underneath it.

The same issue applies to drag & drop. When you're dragging something, the object you drag is always under the mouse cursor. That means you have to calculate what's underneath it to determine where you're dropping something. I'm pretty sure that code can be adapted to your situation to figure out what tile was clicked.

It's just that you have to deduce the right tile by using math and trigonometry instead of having the browser tell you what tile was clicked.

Share this post


Link to post
Share on other sites

This topic is 3631 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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this