Кликабельные изображения (IMG), но для их изменения требуется значок мыши

StackOverflow https://stackoverflow.com/questions/1055544

  •  20-08-2019
  •  | 
  •  

Вопрос

У меня есть кликабельные изображения на моей html-странице, которые вызывают функцию javascript...однако никто не нажимает на них, так как они не выглядят кликабельными...как я могу сделать их доступными для кликов, не используя <a href=""></a> тег вокруг них?

Вот пример моего кода...

<div id="bvu11" style="margin: 0px 5px; float: left;">
     <span id="bviu11">
     <img src="/images/icons/favorites_add.png" onclick="favoritesAdd(2,11,'u')">
     </span>
</div>
Это было полезно?

Решение

Использование CSS

Добавьте класс к вашему изображению (например:кликабельное изображение) и это в вашем CSS:

.clickable-image
{
    cursor: pointer;
}

Другие советы

Взгляните на css курсор свойство

<span id="bviu11" style="cursor: pointer;">

Помимо добавления cursor:pointer, возможно, какой-то стиль для ваших изображений / кнопок также сделает их похожими на ссылки еще до того, как пользователю придется навести на них курсор.Попробуйте использовать простую рамку или отбрасывание тени / свечение на изображениях, чтобы придать им более 3D-эффект и сделать их более "интерактивными"!Кроме того, добавление состояния наведения (другой стиль к изображению / кнопке) действительно помогает.

Изменение

<div id="bvu11" style="margin: 0px 5px; float: left;">

Для 

<div id="bvu11" class="spanLink">

и добавить

.spanLink {
   margin: 0px 5px; 
   float: left;
   cursor: pointer;
}

к вашему css.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top