web-dev-qa-db-fra.com

Comment faire d'une section d'une image un lien cliquable

J'ai une bannière sur la page Web et une partie de l'image contient un graphique d'une zone de boutons. Comment créer uniquement la partie où le bouton est un lien cliquable tel qu'un href? Vous pouvez voir un exemple d'image ci-dessous.

sample banner image with button graphic

Dans l'image de la bannière, il y a un bouton graphique "Rejoindre maintenant, c'est gratuit". Je souhaite ajouter un lien sur cette boîte. Ainsi, lorsque les utilisateurs cliquent sur cette boîte dans la bannière, la page suivante s'ouvre. Je veux savoir comment je peux ajouter un lien sur juste ce bouton. Je ne veux pas y ajouter la balise <button>; Je veux juste ajouter un lien basé sur la zone du graphique du bouton "S'inscrire maintenant, c'est gratuit". N'importe qui a une idée sur la façon dont je peux ajouter un lien sur cette partie de l'image sans utiliser la balise <button>.

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

Je vous remercie

htmlasp.nethtml5hyperlink
23
Vikram

Si vous ne souhaitez pas que le bouton devienne une image distincte, vous pouvez utiliser la balise <area>. Ceci est fait en utilisant un langage HTML similaire à ceci:

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

Remarque 1: L'attribut coords=" " doit être formaté de la manière suivante: coords="x1,y1,x2,y2" où:

x1=top left X coordinate
y1=top left Y coordinate
x2=bottom right X coordinate
y2=bottom right Y coordinate

Remarque 2: l'attribut usemap="#mapname" doit inclure le #.

MODIFIER:

J'ai regardé votre code et ajouté dans les balises <map> et <area> où ils devraient être. J'ai également commenté certaines parties qui chevauchaient l'image ou semblaient inutilisables.

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

Remarques:

  1. Le coord="48,341,294,275" fait référence à votre capture d'écran que vous avez postée.
  2. Le src="./test.png" est l'emplacement et le nom de la capture d'écran que vous avez postée sur mon ordinateur.
  3. Le href="http://www.example.com/" est un exemple de lien.
40
Burn_E99

en créant un lien positionné de manière absolue à l'intérieur d'un div positionné ... ... Vous devez définir la largeur et la hauteur du lien en tant que dimensions du bouton, ainsi que les coordonnées gauche et supérieure du coin supérieur gauche du bouton dans le div enveloppant.

<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>
7
Michael B.

Vous pouvez générer automatiquement une carte d’image à partir de ce site Web pour une zone d’image sélectionnée. https://www.image-map.net/

Meilleure façon d'exécuter! 

0
Ishan Patel