Making an image responsive
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 开发者_Python百科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/
精彩评论