Кликабельные изображения (IMG), но для их изменения требуется значок мыши
-
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.