I've a problem with asp:image and asp:imagebutton alternate text: it's not visible when I move the mouse over the image. I declared the object in that way:
<asp:ImageButton ID="ButtonStatus"
ImageUrl='<%# IIF(Eval("Active")=1,"../images/folders/actived.png","../images/folders/deactivate.png")%>' CommandName="ChangeStatus" CommandArgument='<%# Eval("id_repository") %>' OnCommand="FolderCommand"
Enabled = '<% #iif(mySecurity.Admin=1, "True", "False") %>' Width="24px" AlternateText="Change the status"
runat="server" />
and for asp:image
<asp:HyperLink runat="server" ID="url_groups" NavigateUrl="~/action/Group_manager.aspx?action=2">
<asp:Image id="img_groups" runat="server" ImageUrl="~/Images/folders/group_config.png" AlternateText="Group manager"
EnableViewState="false" ImageAlign="Middle" Width="32px" CssClass="navigation" />
</asp:HyperLink>
Could you help me? I tried to search on web but I wasn't able to find any post or suggestion to fix that problem
thanks,
Andrea
It's browser dependent whether the alt text gets shown when you mouse over an image. If you set the ToolTip parameter on a .NET Image or ImageButton it will render a title attribute which shows across pretty much every browser.
Here's an example from a site I'm currently working on:
<asp:HyperLink ID="ReplyLink" runat="server" NavigateUrl='<%# Eval("SrcAddr", "~/msp/send.aspx?to={0}") %>'>
<asp:Image ID="ReplyIcon" runat="server" ImageUrl="~/images/email_go.png" AlternateText="Reply" ToolTip="Reply" />
</asp:HyperLink>
I think you're mixing up the alt attribute with the title attribute. Alt is shown when the user doesn't accept images and for screen readers whereas the title attribute is shown as tool tip when you hover the image.
Related
I ran chrome's lighthouse accessibility test on a page I'm working on and it says
Form elements do not have associated labels
for all the checkboxes used on the page. They are in a large grid and have no labels.
Ex:
<asp:CheckBox ID="cbNotApplicable" runat="server" AutoPostBack="true" OnCheckedChanged="cbNotApplicable_CheckedChanged" onClick='javascript:needToConfirm = false;' ToolTip="Answer all questions Not Applicable" />
If I add a Text attribute, the accessibility warning goes away, but a <label> is added and visible, which I do not want.
Is there an alternate way to make the asp:CheckBox accessible?
Try this way
<asp:Label ID="test" runat="server"
AssociatedControlID="cbNotApplicable"> <asp:CheckBox ID="cbNotApplicable" runat="server" AutoPostBack="true" OnCheckedChanged="cbNotApplicable_CheckedChanged"
onClick='javascript:needToConfirm = false;' ToolTip="Answer all questions Not Applicable" /> </asp:Label>
Or, try this below link suggestions to hide label by using CSS
https://stackoverflow.com/a/13482643/2218635
I am binding images to datalist. Taking the image name from database and giving the path.
My code is:
<asp:DataList ID="dlImages" runat="server" RepeatColumns="4">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" Height="200px" Width="200px" ImageUrl='<%# Eval("PageName","D:\Sagar\Kinston\WebSite\ScreenMasterImages\{0}.jpg") %>' runat="server" />
</ItemTemplate>
</asp:DataList>
On .cs page:
ds = gc.GetDataToListBinder("select DISTINCT PageOrderID,PageName from ScreenMaster order by PageOrderID")
dlImages.DataSource = ds.Tables(0)
dlImages.DataBind()
I am facing 2 problems :
When imagename has space in between it adds %20 in between
Eg. if imagename is "API Message", it takes it as: "API%20Message"
I tried On this Problem:
Added ImageUrl='<%#Server.HtmlDecode(Eval("PageName","D:\Sagar\Kinston\WebSite\ScreenMasterImages\{0}.jpg"))'
But I got error:
XML literals and XML properties are not supported in embedded code within ASP.NET
If there is not space Eg.image name is "Charges" , Then also its not showing it in datalist.
When i ran project, and right clicked on it and view source, then its showing me correct path as:
src="D:\Sagar\Kinston\WebSite\ScreenMasterImages\Charges.jpg"
but not showing image.
Please help me with above code.
Where i have made mistake?
What else i should add in it?
Keep it easy and simple.
When trying things like that with URL, to know exactly what to write down, try typing it in your address bar so you'll be able to find the exact syntax needed in order to make it work correctly.
I've done this tons of time and work for me... So you could try something like :
<asp:DataList ID="dlImages" runat="server" RepeatColumns="4">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" Height="200px" Width="200px"
ImageUrl='<%# String.Format("{0}{1}.jpg", "~\ScreenMasterImages\", Server.HtmlDecode(Eval("PageName"))) %>'
runat="server" />
</ItemTemplate>
</asp:DataList>
i am looking for a way that:
If the Gridview contains a result, don't show the result but instead an clickable image that will direct me to a new page with the result(this i guess in the properties of the image).
And if the gridview is empty, then display another image.
I know how to do it if the gridview is empty i use
But i would like to know how to show an image if gridview is not empty.
Any ideas?
Thanks
<a href='<%# String.Format("{0}{1}{2}{3}{4}{5}{6} {7}8}",Eval("CourseName"),"/","Colleges","/",Eval("StateName").ToString().Replace(" ", "-"),"/",Eval("CityName").ToString().Replace(" ", "-"),"/",Eval("CollegeName").ToString().Replace("-", "=").Replace(" ", "-").Replace("..","--")) %>' rel="canonical" title='<%# Eval("CollegeName")%>'>
<img Height="50px" ImageUrl='<%# String.Format("{0}{1}","\\images\\CollegeImages\\" , string.IsNullOrEmpty(Eval("CollegeImage").ToString()) ?"noImageCollege.jpg":Eval("CollegeImage")) %>' Width="50px" alt='<%# Eval("CollegeName") %>' title='<%# Eval("CollegeName") %>' />
</a>
In Web application, i am using datalist control to bind the Embed videos to a <div> dynamically. They are coming good, but when we click on video in the datalist they are start to play. I dont want that, I would like to play the particular video in a popup, and make a non action on that video [div which contain embeded video]. I want to make that div enable false.
<asp:DataList ID="DtlstVideos" ToolTip="Click On Video Title" CellPadding="5" CellSpacing="5" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" OnItemCommandXSSCleaned="DtlstVideos_ItemCommand">
<ItemStyle />
<ItemTemplate>
<div id="divVideos" runat="server"><%# Eval("photos") %></div>
<asp:LinkButton ID="lnkVide" CommandName="Click" runat="server" Text='<%# Eval("videotitle") %>' ToolTip="Play" CommandArgument='<%# Eval("id") %>' Font-Bold="true" ForeColor="Blue"></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
This is the current code, when a user clicks on the LinkButton a popup will fire and the video will play, but when click on div the video is playing in datalist only, is there any solution?
Id am not sure if I did understand you correct but I hope this might help.
If you are using youtub, you'll be able to access a preview picture of the movi in different-sizes.
The image is accessble via a certain convention like this:
http://img.youtube.com/vi/VIDEO_ID/#.jpg
Find details here: http://www.reelseo.com/youtube-thumbnail-image/
So what I would do is display only the image in the datalist (maybe with some div overlay which looks like a player)... and then on click pass the movi ID to your popup and then embed and play the movie in that popup...div or new window whatever you want..
HTH
Well, I would not use that <div> as you are using rather I would make use of the ImageButton that will act as the video image as when clicking you can fire your command and hooking up a javascript event on it you can fire up the popup when you want.
Let's imagine that you can use jQuery with this:
<asp:DataList ID="DtlstVideos" ToolTip="Click On Video Title" CellPadding="5" CellSpacing="5" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" OnItemCommandXSSCleaned="DtlstVideos_ItemCommand">
<ItemTemplate>
<asp:ImageButton id="divVideos" CssClass="img-video" runat="server" CommandArgument="<%# Eval("id") %>" data-video-id="<%# Eval("id") %>" CommandName="Click" ImageUrl="<%# Eval("photos") %>" />
<%# Eval("videotitle") %>
</ItemTemplate>
</asp:DataList>
and with jQuery you can simply hook up the click event to fire up your pop up and your command
$(function() {
$(".img-video").on("click", function() {
var url = 'playVideo.aspx?id=' + $(this).attr("data-video-id");
window.open(url, "Video Player","menubar=0,resizable=0,width=650,height=450");
return true; // let the image button fire the command argument
});
});
But I would never let it fire the Command event here and I would hook up always in the playVideo.aspx page as there you do have the video id as well and you can do what you need in that page without needing to fire the command event on the video strip.
In an image control that is bound within a GridView column i can set the Alt text property by using the DataAlternateTextField property.
<asp:ImageField DataImageUrlField="Flag"
DataImageUrlFormatString="~/images/f/{0}.png"
DataAlternateTextField="Description" >
</asp:ImageField>
which results in somathing like...
<img src="1.png" alt="Alt text"/>
Which property or method should i use to bind the ToolTip property?
<img src="1.png" alt="Alt text" ToolTip="Title text" />
I would like the users of the website, on mouse hovering of the image, to be able to read the title property.
To all newbies out there just like me, here what i did
<asp:TemplateField HeaderText="Test" SortExpression="">
<ItemTemplate>
<asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("Flag", "~/images/f/{0}.png") %>'
AlternateText='<%# Bind("Description") %>'
ToolTip='<%# Bind("Description") %>' />
</ItemTemplate>
</asp:TemplateField>
Thanks Veronica
You can use binding expression to set the title of the ImageField. http://msdn.microsoft.com/en-us/library/ms178366.aspx
I am playing with this issue now according to Microsoft, the alternate text property of an ImageField should translate into a tooltip as well. At least that's what it says on the msdn page i just linked.