Imágenes en las que se puede hacer clic (IMG), pero necesitan que el ícono del mouse cambie sobre ellas
-
20-08-2019 - |
Pregunta
Tengo imágenes que se pueden hacer clic en mi página html que llaman a una función de JavaScript ... sin embargo, nadie hace clic en ellas porque no parecen cliqueables ... ¿cómo puedo hacer que se pueda hacer clic sin utilizar un < !> lt; a href = " " > < / a > etiqueta a su alrededor?
Aquí hay un ejemplo de mi código ...
<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>
Solución
Usando CSS
Agregue una clase a su imagen (ej: clickable-image) y esto en su CSS:
.clickable-image
{
cursor: pointer;
}
Otros consejos
Eche un vistazo a la propiedad css cursor
<span id="bviu11" style="cursor: pointer;">
Además de agregar el cursor: puntero, quizás un poco de estilo en sus imágenes / botones también los haga parecer enlaces antes de que el usuario tenga que pasar el mouse sobre ellos. Pruebe con un borde simple, o sombree / ilumine las imágenes para darles un efecto más 3D, haciéndolas parecer más & "; Cliqueables &" ;! Además, agregar un estado de desplazamiento (un estilo diferente a la imagen / botón) realmente ayuda.
Cambiar
<div id="bvu11" style="margin: 0px 5px; float: left;">
a
<div id="bvu11" class="spanLink">
y agregar
.spanLink {
margin: 0px 5px;
float: left;
cursor: pointer;
}
a su CSS.