ToolTip with image inside of it - c#

I currently have a hyperlink control as such:
<asp:HyperLink ID="logoLink" runat="server" NavigateUrl="#"></asp:HyperLink>
I am setting the logo text of it as such within my grid:
HyperLink logoLink = (HyperLink)e.Item.FindControl("logoLink");
logoLink.Text = lblsub + ".gif";
What I like to do is that when a user clicks on the hyperlink, I like the gif file to show within a tooltip.
what is the easiest way of doing this? The image is in the Image folder so the path would be as such:
Images/ + lblsub + ".gif";

You can use jQuery/JavaScript to achieve this.
There are different custom tooltips can be found online.
I have came across this Tooltip your images which is pretty cool.
Also have a look qTip

Related

i have two images in a div tag and would like to add hyperlinks to these images upon clicking them. any ideas?

I have two images in a div tag and would like to add hyperlinks to these images upon clicking them. any ideas?
You can either give the image this attribute:
onclick = "window.location.href = '#yourllink'";
or you can nest the image in the hyperlink tag:
<img src="yourimg"/>
You can also add this to your js file:
function hyperlink(a){window.location.href = a;}
document.getElementById('imgid').onclick = hyperlink('your link');
I personally dont recommend the last one, too complicated...

How to get asp:hyperlink to display text instead of url

I have a panel that gets a hyperlink added dynamiclly through C# with values from an sql database.
However some of the URLs are really long and quite uneccessary to display.
I have not found any good ways to hide/disable the url showing and replace it with text. I can not use normal <a href> as it handled server side.
EDIT added some of the code.
<asp:HyperLink ID="moduleHyperlink" runat="server"></asp:HyperLink>
now in C#
HyperLink hyp = createHyperlink(btn.link);
moduleHyperlink.Controls.Add(hyp);
This will display for the user the entire btn.link (url string) which might be really long and it looks messy on the webpage. I would rather have a text saying "External Link", which when clicked redirects the user to the url.
You can add Text property to show some valid link title instead of showing the URL.
HyperLink hyp = createHyperlink(btn.link);
hyp.Text = "YourTextForTheLink";
moduleHyperlink.Controls.Add(hyp);`

How to show image in an aspx file?

I'm using this
<asp:Image ID="UserPicture" runat="server" />
to show image in the aspx file and the code behind looks like this:
string imagePath = "~/ProfilePictures/" + UsernameBox.Text;
UserPicture.ImageUrl = imagePath;
But after loading the page, the picture won't show up, only the default picture icon appears. Any suggestions how to do it properly? (Maybe resize the image?)
Thanks
User Server.MapPath() method:
string imagePath = "ProfilePictures/" + UsernameBox.Text;
Make sure UsernameBox.Text must be the xyz.jpg OR any of the file name with extension.

How to change the color of the HyperLink in ASP.NET

i am doing mini ERP project., in that i have 3 frames.
frame is used as Header where i have "Home" and "logout" image button
when i click "Home" the frame3 goes to Home page and when i click "Logout" button, all the frames disappears and main window of "Login" screen comes.
i have used "Home " and "Logout" button in image using Hyperlink control in ASP.NET
the problem is due to Hyperlink the button gets blue border around it.
i want to remove that border around the image button.
can any one knows how to remove that border
here my codes
<asp:HyperLink ID="HomeButtonlink"
BorderWidth="0px"
Font-Overline = "False"
ImageUrl="~/Images/Untitled-5.png"
runat="server"
Height="100%"
Target ="frame3"
NavigateUrl="~/About.aspx"
BorderStyle="None"></asp:HyperLink>
thanks in advances
A.S.Rajkumar.Rajguru
I would create a new css class for this instead:
<asp:HyperLink ID="HomeButtonlink" CssClass="linkbutton"
ImageUrl="~/Images/Untitled-5.png"
runat="server" Target="frame3" NavigateUrl="~/About.aspx"></asp:HyperLink>
and you can define your class like this:
a.linkbutton, a.linkbutton:visited, a.linkbutton img
{
border: none;
outline: none;
}
You gain very little by using the asp.net server control. You can do the same like this:
<a href="<%=ResolveUrl("~/about.aspx")%>" target="frame3" class="linkbutton">
<img src="<%=ResolveUrl("~/images/untitled-5.png") %>" />
</a>
The border around images that are links is part of the default HTML stylesheet.
To get rid of it for all images, add a simple bit of CSS to your page as follows:
img {border:none;}
This is a common thing to want to do, as very few people actually want the default behaviour these days. You may want to look into adding a 'reset' stylesheet to your site to get rid of all the unwanted default behaviours. It will also make your page work more consistently between different browers.
Here's a link to a related question to help you find out more: https://stackoverflow.com/questions/116754/best-css-reset
If for some reason you don't want to affect all the image links on your site, you could also do a more specific stylesheet for it since you've given it an ID:
#HomeButtonlink {border:none;}
You could also add a CSS class to the object, and then reference that in your stylesheet if you wanted to apply it to a group of buttons.
...but frankly, I'd just go with the full reset if I were you.

Ajax Content Loading(Processing) image or indicator

in part of my web page, I have couple of asp:image Thumbnails, onclick I use ajax modal popup extender to show the imgae in full size which are working fine, what I need to add is to have a processing image or indicator both in thumbnail and modal popup extender,
I also have ajax autocomplete that is working fine, I need to add some indicator or processing image to it as soon as user start typing a word.
any idea?
Thanks in advance
You can use an update progress control to display a progress template within your update panel. It displays the contents of the ProgressTemplate tag whenever a postback occurs:
<asp:UpdateProgress runat="server" id="UpdateProgress" AssociatedUpdatePanelID="SomePanel" >
<ProgressTemplate>
<img src="processing.gif" alt="Processing" />
</ProgressTemplate>
</asp:UpdateProgress>
Also, I've found Preloaders useful as a source of animated GIFs for this purpose.
Look at http://www.ajaxload.info/. There are a ton of images there. Once the user types in some letters, however many you need, then display the ajax loader gif next to the textbox.
Assuming that you want the loader/indicator within control, so, one way could be to subclass the PopupExtender control, add asp:UpdateProgress, and put a loader.img in there.

Categories

Resources