Imágenes en las que se puede hacer clic (IMG), pero necesitan que el ícono del mouse cambie sobre ellas

Question

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>

Answer 1

Usando CSS

Agregue una clase a su imagen (ej: clickable-image) y esto en su CSS:

.clickable-image
{
    cursor: pointer;
}

Answer 2

Eche un vistazo a la propiedad css cursor

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

Answer 3

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.

Answer 4

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.