Clickable images (IMG's) but need the mouse icon to change over it...

Question

I have click-able images in my html page that call a javascript function... however nobody is clicking on them as they do not look click-able... how can I make them click-able without using an <a href=""></a> tag around it?

Here is an example of my code...

<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

Have a look at the css cursor property

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

Answer 2

Using CSS

Add a class to your image (ex: clickable-image) and this in your CSS:

.clickable-image
{
    cursor: pointer;
}

Answer 3

Change

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

to

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

and add

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

to your css.

Answer 4

As well as adding the cursor:pointer, perhaps some styling to your images/buttons would also make them appear to be links before the user even has to hover over them. Try a simple border, or dropshadow/glow on the images to give them a more 3D effect, making them look more "clickable"! Also, adding a hover state (a different styling to the image/button) really helps.