How to make a section of an image a clickable link

Question

I have a banner on web page  and part of the image there is a graphic of a button box  How do I make just the part where the button is a clickable link such as a href  You can see a sample image below      In the banner image there is a  Join Now  Its Free  Button graphic   I want to add a link on this box  so when users click on this box on the banner  then it will open the next page   I want to know how I can add a link on just this button   I don t want to add the  lt button gt  tag to it  I just want to add a link based on the area of the  Join Now  Its Free  Button graphic   Anybody have any ideas on how I can add a link on this part of the image area without using the  lt button gt  tag     lt div class  flexslider  gt                    lt ul class  slides  runat  server  id  Ul  gt                                                    lt li class  flex-active-slide  style  background  url  amp quot images slider-bg-1 jpg amp quot   no-repeat scroll 50  0px transparent                                                width  100   float  left  margin-right  -100   position  relative  display  list-item   gt                          lt div class  container  gt                            lt div class  sixteen columns contain  gt  lt  div gt                                 lt img runat  server  id  imgSlide1  style  top  1px  right          -19px  opacity  1   class  item              src  images slider1 png             data-topimage  7   gt                              lt a href     style  display block  background  00F  width 356px  height 66px  position absolute  left 1px  top -19px  left  162px  top  279px   gt  lt  a gt                                 lt  div gt                          lt  li gt                   lt  ul gt                lt  div gt                lt ul class  flex-direction-nav  gt                    lt li gt  lt a class  flex-prev  href     gt  lt i class  icon-angle-left  gt  lt  i gt  lt  a gt  lt  li gt                   lt li gt  lt a class  flex-next  href     gt  lt i class  icon-angle-right  gt  lt  i gt  lt  a gt  lt  li gt               lt  ul gt                       lt  div gt    Thank You

User · Accepted Answer

If you don t want to make the button a separate image  you can use the  lt area gt  tag   This is done by using html similar to this    lt img src  imgsrc  width  imgwidth  height  imgheight  alt  alttext  usemap   mapname  gt    lt map name  mapname  gt       lt area shape  rect  coords  see note 1  href  link  alt  alttext  gt   lt  map gt    Note 1  The coords     attribute must be formatted in this way  coords  x1 y1 x2 y2  where   x1 top left X coordinate y1 top left Y coordinate x2 bottom right X coordinate y2 bottom right Y coordinate   Note 2  The usemap   mapname  attribute must include the     EDIT   I looked at your code and added in the  lt map gt  and  lt area gt  tags where they should be   I also commented out some parts that were either overlapping the image or seemed there for no use    lt div class  flexslider  gt       lt ul class  slides  runat  server  id  Ul  gt                                        lt li class  flex-active-slide  style  background  url  amp quot images slider-bg-1 jpg amp quot   no-repeat scroll 50  0px transparent  width  100   float  left  margin-right  -100   position  relative  display  list-item   gt               lt div class  container  gt                   lt div class  sixteen columns contain  gt  lt  div gt                      lt img runat  server  id  imgSlide1  style  top  1px  right  -19px  opacity  1   class  item  src    test png  data-topimage  7   height  358  width  728  usemap   imgmap    gt                   lt map name  imgmap  gt                       lt area shape  rect  coords  48 341 294 275  href  http   www example com   gt                   lt  map gt                   lt  -- lt a href     style  display block  background  00F  width 356px  height 66px  position absolute  left 1px  top -19px  left  162px  top  279px   gt  lt  a gt -- gt               lt  div gt           lt  li gt       lt  ul gt   lt  div gt   lt  --  lt ul class  flex-direction-nav  gt       lt li gt  lt a class  flex-prev  href     gt  lt i class  icon-angle-left  gt  lt  i gt  lt  a gt  lt  li gt       lt li gt  lt a class  flex-next  href     gt  lt i class  icon-angle-right  gt  lt  i gt  lt  a gt  lt  li gt   lt  ul gt  -- gt    Notes    The coord  48 341 294 275  is in reference to your screenshot you posted  The src    test png  is the location and name of the screenshot you posted on my computer  The href  http   www example com   is an example link

User · Answer

by creating an absolute-positioned link inside relative-positioned div   You need set the link width  amp  height as button dimensions  and left amp top coordinates for the left-top corner of button within the wrapping div    lt div style  position relative  gt    lt img src    width      height        gt    lt a href     style  display block  width 247px  height 66px  position absolute  left  48px  top  275px   gt  lt  a gt   lt  div gt

User · Answer

The easiest way is to make the  button image  as a separate image  Then place it over the main image  using  style  position  absolute    Assign the URL link to  button image   and smile

User · Answer

You can auto generate Image map from this website for selected area of image  https   www image-map net   Easiest way to execute

[asp.net] How to make a section of an image a clickable link

Examples related to asp.net

Examples related to html

Examples related to hyperlink