i build a header in photoshop and imported it to visual basic 2010. I want the header to be a bit more dynamic, so when i press on part of the image (that says contacts for example), it will transfer me to another page.
i know that there is a function in css that does this, it is called mapping. Dreamweaver has an easy way of doing it. But is it possible to map an area on the image, which would make the image respond (as if he clicked a button)?
ASP.net provides 3 ways to give imagemap, these are called 'Hotspot' properties of imagemap control. Circular and rectangular hotspots are easy to understand. here is an example..
<asp:ImageMap ID="ImageMap1" runat="server">
<asp:CircleHotSpot NavigateUrl="nextPage.aspx" />
<asp:RectangleHotSpot Bottom="50" Left="50" NavigateUrl="contactpage.aspx"
Right="10" Top="10" />
</asp:ImageMap>
Sample image illustrated here
ASP setting screenshot
Area mapping links leads to horrible and unnecessary markup. Just put an anchor link around your entire header image like so:
<a href="~/default.aspx" title="Home" runat="server">
<img src="~/images/header.jpg" alt=Home" style="border:none;"
runat="server" />
</a>
If you want to go with Image Maps (not a good design), check these links:
http://www.w3schools.com/TAGS/tag_map.asp
http://www.image-maps.com/
Related
<telerik:RadAsyncUpload runat="server" ID="ClientLogoAsyncUpload"
Width="200px"
MultipleFileSelection="Disabled"
AllowedFileExtensions=".jpeg,.jpg"
MaxFileInputsCount="1"
OnClientFileSelected="clientLogoClientFileSelected"
>
<Localization Select="<%$ Resources:Frm, Select %>" />
</telerik:RadAsyncUpload>
<telerik:RadProgressArea runat="server" ID="ClientLogoRadProgressArea"></telerik:
</div>
<div style="color:red;"><%= Resources.Frm.OnlyJPGAllowed %></div>
I am currently working on making an input form which the user can upload a photo as the logo .
However even though I copied the actually functioning code from other document which uses the form of the same format, the upload button which is supposed to be place right under the default logo is not appearing.
Select Logo Not Visible
I add the captured image of how it should look like when it is renders successfully.
Select Logo in Place
As mentioned above, these two forms share the same lines of code to render, so I am afraid the issue is not laid within the aspx files themselves.
What do I might have to look into to make the telerik:RadAsyncUpload element visible on my document?
Is it possible to put a button on my user control .ascx (the web part in this case), and have a customized image with that? What I am trying to do is have a "print" button to print the page.
However, I don't want to use the default asp button, I want to have a the special "print" icon associated with it. So, can I do this and still use <asp:button>?
Or is it just better to make that "print" icon a link, and do OnClick on the link event?
You can use link button as suggested.
But in my opinion you should not use any server-side control if you don't have to use it on server side.
What you can do create an image tag <img src.... and use onclick event on this image.
When you create a server side controls it is added to your view state key value pair of information. Which is an overhead.
or you can use like this
<a href="javascript:window.print()">
<img src="print.gif">
</a>
or even
<img src="print.gif" name="pic" onclick="javascript:window.print()"/>
You could try the ImageButton class, then you can have a printer icon for example.
Try this:
<asp:ImageButton ID="submitButton" runat="server" OnClick="submitButton_Click" ImageUrl="~/images/printer.jpg" />
I am using an Image Map to direct the user to diff page when he clicks on it. I have written this code
<asp:ImageMap ID="ImageMap1" runat="server" AlternateText="Amazon"
BorderStyle="Groove" DescriptionUrl="~/Images/TT.jpg" Height="29px"
ImageAlign="Baseline" ImageUrl="~/Images/amazon.png"
ToolTip="Amazon" Width="82px" HotSpotMode="Navigate">
<asp:CircleHotSpot NavigateUrl="http://www.amazon.com" Target="_blank"
HotSpotMode="Navigate" />
</asp:ImageMap>
Its working but not navigating on clicking so as soon as I add OnClick"ImageMapID" it gives me an error. What am I still missing?
Wow..ImageMap think I have travelled back to 1999!
Anyway, not sure what you mean by adding OnClick but you have not added the dimesions of the Hot Spot so it does not know which area is click-able - set the x,y and radius properties see http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.circlehotspot(v=vs.80).aspx)
In sql server database, I have column name Image which has urls like http://www.xyz.com/1009/image1.jpg
Now I want to display it on my datalist. But it is not showing any image. It is might be the case because it is expecting the Image URL to be ~/Folder/abc.jpg
Then how to show the image on the asp.net page when I have image URL, which control I need to use and how?
Do you see little red X instead of an image?
If so, right click it --> Properties (IE) to see the URL it's referring to.
Might give us hint on what's going on. :)
If you are getting the image from the database in for the form xzy.com/1009/image1.jpg but want to add the http:// then your code should be
<asp:Image ID="imgmain" runat="server" ImageUrl='<%#String.Format("http://{0}", Eval("Image"))%>' Width="80" Height="80" />
I'm adding hotkeys to a web application in order to enable keyboard shortcuts for our CSRs to use, to reduce injury and increase calls-per-hour. I'm using an ASP.net UserControl to inject javascript into the page and it's working great.
I want the control to "just work", so that when hotkeys are assigned, using a declarative syntax, if the hotkeyed letter exists in the link text, it will be highlighted automatically, so the developer doesn't have to do anything, and also to maintain consistency in visual cues.
Here's the code to assign hotkeys, if it matters:
<uc:HotKeysControl ID="theHotkeys" runat="server" Visible="true">
<uc:HotKey ControlName="AccStatus$btnInvoiceEverBill" KeyCode="ctrl+v" />
<uc:HotKey ControlName="AccStatus$btnRefund" KeyCode="ctrl+u" />
<uc:HotKey ControlName="thirdControl" KeyCode="ctrl+p" />
</uc:HotKeysControl>
I want something like:
Make a <span class=hotkey">P</span>ayment
...but I'm not married to the idea of injecting a <span/> in there if there's a better way.
How can I do this in CSS or JQuery? Is there a way to pass in a letter to a CSS style and have it change the color of the text displayed? Should I generate javascript to highlight the text when the page loads?
What would/did you do in this situation?
What about something along the lines of:
$("a:contains('Payment')").html(function(i, old_html) {
old_html.replace(/Payment/, '<span class="hotkey">P</span>ayment');
})