Question

I have two banners (images) which keep switching every 4 seconds. One image is clickable and the other is not. Below is the code,

<div class="contentdiv">
   <h:commandLink  action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
       <img src="imagePath" width="590" height="210"  border="0" style="cursor: pointer;"/> 
</h:commandLink>
</div>


<div class="contentdiv">
    <img src="imagePath" width="590" height="210"  border="0" style="cursor: default;"/>
</div>

I have specified style for 1st and 2nd image as pointer and default respectively.

When images switch, 1st image will appear as Pointer to user when he moves his cursor over the image. When a switch happens to 2nd image, and when user has not moved his cursor away from the image, 2nd image will also appear as Pointer instead of Default.
Only when User clicks on 2nd image, it will change as Default and then User will come to know that 2nd image is not clickable.

Same thing happens with 1st image. When User is in 2nd image and when a Switch happens from 2nd image to 1st image, Cursor will still be default instead as Pointer. So, User doesn’t know that 1st image is clickable.

Answer 1

Instead of using inline style.,just create two simple classes for your cursor styles like as follows.

For CSS :

<style type="text/css">
.clickable {
cursor:pointer;
}
.not_clickable{
cursor:default;
}
</style>

For HTML :

<div class="contentdiv">
   <h:commandLink  action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
       <img src="imagePath" width="590" height="210"  border="0" class="clickable"/> 
</h:commandLink>
</div>


<div class="contentdiv">
    <img src="imagePath" width="590" height="210"  border="0" class="not_clickable"/>
</div>

After that you can easily switch over the classes as per your wish, while you triggering or clicking the image.