开发者

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

Making an image responsive

ASP setting screenshot

Making an image responsive


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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜