34

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.

sample banner image with button graphic

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 <button> 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 <button> tag.

 <div class="flexslider">

                <ul class="slides" runat="server" id="Ul">                             
                    <li class="flex-active-slide" style="background: url(&quot;images/slider-bg-1.jpg&quot;) no-repeat scroll 50% 0px transparent;                                               width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">

                      <div class="container">

                        <div class="sixteen columns contain"></div>   

                          <img runat="server" id="imgSlide1" style="top: 1px; right: 
       -19px; opacity: 1;" class="item" 
           src="images/slider1.png"            data-topimage="7%">
                           <a href="#" style="display:block; background:#00F; width:356px; height:66px; position:absolute; left:1px; top:-19px; left: 162px; top: 279px;"></a>      


                      </div>   


                  </li>
                </ul>

            </div>

            <ul class="flex-direction-nav">

                <li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
                <li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
            </ul>           

        </div>

Thank You

jilles de wit
  • 7,060
  • 3
  • 26
  • 50
Vikram
  • 489
  • 3
  • 8
  • 18
  • 1
    Make it a separate ``. Wrap it with ``. – Quentin Sep 01 '13 at 15:48
  • 1
    I know this it this a banner it will make a hyperlink on all banner i want link on only that Joun Now, Its Free Button box this. – Vikram Sep 01 '13 at 15:54
  • 4
    Repeating the question won't change my recommendation. There's no apparent reason that that button graphic should form part of the rest of the image. – Quentin Sep 01 '13 at 15:56

4 Answers4

61

If you don't want to make the button a separate image, you can use the <area> tag. This is done by using html similar to this:

<img src="imgsrc" width="imgwidth" height="imgheight" alt="alttext" usemap="#mapname">

<map name="mapname">
    <area shape="rect" coords="see note 1" href="link" alt="alttext">
</map>

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 <map> and <area> tags where they should be. I also commented out some parts that were either overlapping the image or seemed there for no use.

<div class="flexslider">
    <ul class="slides" runat="server" id="Ul">                             
        <li class="flex-active-slide" style="background: url(&quot;images/slider-bg-1.jpg&quot;) no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">
            <div class="container">
                <div class="sixteen columns contain"></div>   
                <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" />
                <map name="imgmap">
                    <area shape="rect" coords="48,341,294,275" href="http://www.example.com/">
                </map>
                <!--<a href="#" style="display:block; background:#00F; width:356px; height:66px; position:absolute; left:1px; top:-19px; left: 162px; top: 279px;"></a>-->
            </div>
        </li>
    </ul>
</div>
<!-- <ul class="flex-direction-nav">
    <li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
    <li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
</ul> -->

Notes:

  1. The coord="48,341,294,275" is in reference to your screenshot you posted.
  2. The src="./test.png" is the location and name of the screenshot you posted on my computer.
  3. The href="http://www.example.com/" is an example link.
Burn_E99
  • 1,098
  • 1
  • 17
  • 27
  • How can i check location is right going on image how can i check this – Vikram Sep 01 '13 at 16:50
  • First I have a question: is this button in the bottom left of your image? – Burn_E99 Sep 01 '13 at 16:58
  • Ok then the X1 would equal 0 and the Y1 would equal 0. Now use an image editor and measure from the bottom left corner to the bottom right corner; this will give you X2. Then measure from X2 to the top right corner of your button; this will give you Y2. Now put the `coord` attribute into your `` tag as follows: `coord="0,0,X2,Y2"`. – Burn_E99 Sep 01 '13 at 17:27
  • please check detail in add in description that is now working in tags which i add in description – Vikram Sep 01 '13 at 19:07
  • Are you asking me where you should add in the `` tag and `` tag? I don't exactly understand what you mean, as you have no punctuation in your comment. – Burn_E99 Sep 01 '13 at 19:23
  • yes i want to know where i can add it as you asked i add like that but not working you can check i add a code which im using in slider – Vikram Sep 01 '13 at 19:26
  • @Vikram please check my edit. It should answer your question. – Burn_E99 Sep 01 '13 at 19:57
  • @Burn_E99 Nice solution! Please can you tell me how to ensure that LINK won't be distorted on different screen sizes (or different browsers/devices etc) ? – Dusht Mar 11 '14 at 08:31
  • @Dusht I am not exactly sure how that works, but I am assuming it locks onto the image, and not the location on the screen. If the webpage has auto-resizing images, then it may get messed up. – Burn_E99 Mar 12 '14 at 02:48
  • 5
    And to get map co-ordinates, use this site - http://imagemap-generator.dariodomi.de/ (not associated with it in any way, just used it) – Darpan May 14 '16 at 23:09
  • 4
    To get circle or polygon coordinates, you can go to https://www.image-map.net/ . And if you're concerned about responsiveness, try https://github.com/davidjbradshaw/image-map-resizer (not related, I'm just discovering and sharing) – AlexB Oct 14 '18 at 19:17
15

You can auto generate Image map from this website for selected area of image. https://www.image-map.net/

Easiest way to execute!

Ishan Patel
  • 5,571
  • 12
  • 47
  • 68
8

by creating an absolute-positioned link inside relative-positioned div.. You need set the link width & height as button dimensions, and left&top coordinates for the left-top corner of button within the wrapping div.

<div style="position:relative">
 <img src="" width="??" height="??" />
 <a href="#" style="display:block; width:247px; height:66px; position:absolute; left: 48px; top: 275px;"></a>
</div>
Michael B.
  • 2,798
  • 1
  • 14
  • 18
0

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 :)

user13034686
  • 1