Clickable images (IMG's) but need the mouse icon to change over it
-
20-08-2019 - |
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>
Solution
Using CSS
Add a class to your image (ex: clickable-image) and this in your CSS:
.clickable-image
{
cursor: pointer;
}
OTHER TIPS
Have a look at the css cursor property
<span id="bviu11" style="cursor: pointer;">
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.
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.