Hello,
can someone tell me how to Change the cursor when the mouse cursor is on an item? In my application it is possible to click on an item. Unfortunately I cant't figure out how to change the cursor from default do pointer when the Mouse gets over. If its possible I'd like to have the change on the image and the text below as well. Also, I'd like to change something in my CSS or my application instead of changing something in the telerik css files.
Thanks in advance
can someone tell me how to Change the cursor when the mouse cursor is on an item? In my application it is possible to click on an item. Unfortunately I cant't figure out how to change the cursor from default do pointer when the Mouse gets over. If its possible I'd like to have the change on the image and the text below as well. Also, I'd like to change something in my CSS or my application instead of changing something in the telerik css files.
Thanks in advance
3 Answers, 1 is accepted
0
Hi Jones,
Different browsers mean different cursors for the "default" and "pointer" values, so the best in this case should be to speak in common terms - what cursor do you need - "hand" or "arrow"? Also, we need a sample project or at least the server declaration of RadRotator in order to see on what HTML element you need the cursor applied.
Regards,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Different browsers mean different cursors for the "default" and "pointer" values, so the best in this case should be to speak in common terms - what cursor do you need - "hand" or "arrow"? Also, we need a sample project or at least the server declaration of RadRotator in order to see on what HTML element you need the cursor applied.
Regards,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Jones
Top achievements
Rank 1
Rank 1
answered on 02 Sep 2009, 06:30 AM
Hello,
I need the Hand as Cursor. Attached you find the ASPX-Code of the page I'm using the rotator. If you have further questions, do not hesitate to contact me.
Thanks
<telerik:RadRotatorItem runat="server" id="RotatorItem1" onclientclick="return DeleteFields()">
<ItemTemplate>
<div style="PADDING-TOP: 15px">
<asp:Image id="RotatorImage1" runat="server" imageurl="~/images/Rotator/3_EC-Radialgeblaese_130px.JPG"></asp:Image>
<asp:Label id="RotatorLabel1" style="font-weight: bold; background-color: #ffffff; font-size: 9pt" runat="server" text="Motor:" font-names="Arial" font-bold="True" forecolor="#919EA7"></asp:Label>
</div>
</ItemTemplate>
</telerik:RadRotatorItem>
As you can See, each RotatorItem has a Label and an image. I change the text of the label and the image during the running time. I'd like to have the hand cursor when the mouse is over the image or over the label. How can I manage this?
I need the Hand as Cursor. Attached you find the ASPX-Code of the page I'm using the rotator. If you have further questions, do not hesitate to contact me.
Thanks
<telerik:RadRotatorItem runat="server" id="RotatorItem1" onclientclick="return DeleteFields()">
<ItemTemplate>
<div style="PADDING-TOP: 15px">
<asp:Image id="RotatorImage1" runat="server" imageurl="~/images/Rotator/3_EC-Radialgeblaese_130px.JPG"></asp:Image>
<asp:Label id="RotatorLabel1" style="font-weight: bold; background-color: #ffffff; font-size: 9pt" runat="server" text="Motor:" font-names="Arial" font-bold="True" forecolor="#919EA7"></asp:Label>
</div>
</ItemTemplate>
</telerik:RadRotatorItem>
As you can See, each RotatorItem has a Label and an image. I change the text of the label and the image during the running time. I'd like to have the hand cursor when the mouse is over the image or over the label. How can I manage this?
0
Accepted
Hello Jones,
Here is a small sample that I believe fits your requirements:
As you can see, you can add a div element that wraps the content in the ItemTemplate and apply a CSS class to it. In the CSS class's declaration you need to specify the cursor that you need to appears when the rotator's content is hovered by the mouse pointer.
Regards,
Fiko
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Here is a small sample that I believe fits your requirements:
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| <style type="text/css"> |
| .itemTemplate |
| { |
| cursor: pointer; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <telerik:RadRotator ID="RadRotator1" runat="server" Width="100" ItemWidth="100" Height="100" |
| ItemHeight="100" FrameDuration="1000"> |
| <Items> |
| <telerik:RadRotatorItem> |
| <ItemTemplate> |
| <div class="itemTemplate"> |
| <asp:Image ID="Image1" runat="server" CssClass="itemTemplate" ImageUrl="Thumbs/image1.jpg" |
| AlternateText="IMAGE" /> |
| </div> |
| </ItemTemplate> |
| </telerik:RadRotatorItem> |
| <telerik:RadRotatorItem> |
| <ItemTemplate> |
| <div class="itemTemplate"> |
| <asp:Image ID="Image1" runat="server" CssClass="itemTemplate" ImageUrl="Thumbs/image2.jpg" |
| AlternateText="IMAGE" /> |
| </div> |
| </ItemTemplate> |
| </telerik:RadRotatorItem> |
| <telerik:RadRotatorItem> |
| <ItemTemplate> |
| <div class="itemTemplate"> |
| <asp:Image ID="Image1" runat="server" CssClass="itemTemplate" ImageUrl="Thumbs/image3.jpg" |
| AlternateText="IMAGE" /> |
| </div> |
| </ItemTemplate> |
| </telerik:RadRotatorItem> |
| </Items> |
| </telerik:RadRotator> |
| </form> |
| </body> |
| </html> |
As you can see, you can add a div element that wraps the content in the ItemTemplate and apply a CSS class to it. In the CSS class's declaration you need to specify the cursor that you need to appears when the rotator's content is hovered by the mouse pointer.
Regards,
Fiko
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.