1

I'm new to web programming, recently I've been asked to make some home pages for someone. Unfortunately I've run into some problem, the homepage will be on a touch screen for touch input, I've got reports like buttons most of the time doesn't work when clicked on, one of my suspects is invisible borders caused by PNGs. TL;DR - http://puu.sh/6HQez.jpg The corner of the red button is being blocked by the invisible border of the purple button, are there any ways to fix that?

EDIT: No I'm not asking for how to remove the dotted line, I made them visible to show you.

4
  • 1
    Can you show the code you're using to capture clicks?
    – Brad
    Feb 2, 2014 at 22:33
  • You could use SVGs instead of PNGs. Or one image and a <map>
    – Musa
    Feb 2, 2014 at 22:35
  • I tried z-index before I posted this, forgot to mention that, it wouldn't work out, since it would just turn the situation opposite- making the red button on top.
    – Still
    Feb 2, 2014 at 23:06
  • @Musa Till now I'm still not sure how does <map> work. EDIT: Actually I know how to use it, but I can never get the coords right.
    – Still
    Feb 2, 2014 at 23:33

2 Answers 2

1

It seems like what you are referring to is not an 'invisible border' but an 'invisible background'.

Your PNG files are rectangular shaped when it comes to event handling, even if some parts are transparent.

If you need to disable some elements from being clicked, you can go about it few ways:

  1. Disable pointer-events with CSS to make sure that a specific element does not caputre clicks.

    #mypurplediv {pointer-events: none;}

  2. Use Z-index to decide the hierarchy of your elements:

    #mypurplediv {z-index: 0;}

    #myrediv {z-index: 1;}

EDIT: Per your comments, it seems that you need to retain the abiity to click on ALL elements. As I mentioned above , your current PNGs are actually rectangles with some parts being transparents. So you have these options:

1) Use SVG which are vector based shapes (that will by default not have invisible backgrounds). Good tutorial here.

2) Use image mapping and area to create your shapes and give them href. This is a good tutorial about image mapping.

example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">

3) Use 3rd party javascript/jQuery libraries such as ImageMapster.

Hope this helps!

4
  • The problem with the first method is it pretty much cancels out the link attribute I had on it, yeah these buttons work by <a>'s.
    – Still
    Feb 2, 2014 at 23:09
  • And the z-index wouldn't seem to help, forgot to mention that I tried z-index before.
    – Still
    Feb 2, 2014 at 23:10
  • @341464 I revised my answer to point you to the right direction.
    – dev7
    Feb 3, 2014 at 0:20
  • Fixed using area map! Thanks!
    – Still
    Feb 3, 2014 at 1:08
-1

That dotted border is called focus outline. You can turn it off by applying CSS to the image.

img { outline: none; }

1
  • No actually, I made it visible to show you guys what I meant by that.
    – Still
    Feb 2, 2014 at 23:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.