Как я могу избавиться от невидимых границ PNG?

Question

Я новичок в веб-программировании, недавно меня попросили сделать некоторые домашние страницы для кого-то. К сожалению, я столкнулся с какой-то проблемой, домашняя страница будет на сенсорном экране для сенсорного ввода, у меня есть сообщения, как кнопки большую часть времени не работают, когда нажимают, один из моих подозреваемых - невидимые границы, вызванные PNGs. TL; DR - http://puu.sh/6HQez.jpg Угол красной кнопки блокируется невидимой рамкой пурпурной кнопки, есть ли способы исправить это?

EDIT: Нет. Я не прошу, как удалить пунктирную линию, я сделал их видимыми, чтобы показать вам.

Answer 1

Кажется, что вы имеете в виду не «невидимую границу», а «невидимый фон».

Ваши PNG-файлы имеют прямоугольную форму, когда дело доходит до обработки событий, даже если некоторые части прозрачны.

Если вам необходимо отключить некоторые элементы из того щелкнул, вы можете это сделать несколькими способами:

1. Отключить pointer-events с помощью CSS, чтобы убедиться, что конкретный элемент не caputre щелчки.

   #mypurplediv {pointer-events: none;}

2. Использование Z-индекс, чтобы решить иерархию ваших элементов:

   #mypurplediv {z-index: 0;}

   #myrediv {z-index: 1;}

EDIT: За ваши комментарии, кажется, что вам нужно t o сохраните цель, чтобы щелкнуть ВСЕ элементы. Как я уже упоминал выше, ваши текущие PNG на самом деле являются прямоугольниками, а некоторые части являются прозрачными. У вас есть следующие возможности:

1) Используйте SVG, которые являются векторными фигурами (которые по умолчанию не будут иметь невидимые фоны). Good tutorial here.

2) Используйте сопоставление изображений и area, чтобы создать свои фигуры и дать им 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) Используйте 3 участника JavaScript библиотеки/JQuery, такие как ImageMapster.

Надеюсь, это поможет!

Answer 2

Эта пунктирная граница называется фокусом. Вы можете отключить его, применив CSS к изображению.

img { outline: none; }