it-swarm.com.de

So machen Sie einen Bildausschnitt zu einem anklickbaren Link

Ich habe ein Banner auf einer Webseite, und ein Teil des Bildes enthält eine Grafik einer Schaltflächenbox. Wie mache ich nur den Teil, bei dem die Schaltfläche ein anklickbarer Link ist, beispielsweise ein Href? Unten sehen Sie ein Beispielbild.

sample banner image with button graphic

Im Bannerbild befindet sich eine Schaltfläche "Jetzt beitreten, es ist kostenlos". Ich möchte einen Link in dieses Feld einfügen. Wenn Benutzer auf dieses Feld im Banner klicken, wird die nächste Seite geöffnet. Ich möchte wissen, wie ich einen Link zu diesem Button hinzufügen kann. Ich möchte nicht das <button>-Tag hinzufügen. Ich möchte nur einen Link hinzufügen, der auf dem Bereich der Schaltfläche "Jetzt beitreten, es ist kostenlos" - Schaltfläche basiert. Jeder hat eine Idee, wie ich in diesem Teil des Bildbereichs einen Link hinzufügen kann, ohne das Tag <button> zu verwenden.

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

Danke dir

23
Vikram

Wenn Sie die Schaltfläche nicht zu einem separaten Bild machen möchten, können Sie das <area>-Tag verwenden. Dies geschieht durch die Verwendung von HTML wie folgt:

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

Hinweis 1: Das coords=" "-Attribut muss folgendermaßen formatiert werden: coords="x1,y1,x2,y2" Dabei gilt Folgendes:

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

Hinweis 2: Das usemap="#mapname"-Attribut muss den # enthalten.

BEARBEITEN:

Ich habe mir Ihren Code angesehen und in den <map>- und <area>-Tags hinzugefügt, wo sie stehen sollen. Ich habe auch einige Teile auskommentiert, die entweder das Bild überlagerten oder dort für keinen Zweck schienen.

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

Anmerkungen:

  1. Der coord="48,341,294,275" bezieht sich auf Ihren Screenshot, den Sie gepostet haben.
  2. Der src="./test.png" ist der Ort und der Name des Screenshots, den Sie auf meinem Computer gepostet haben.
  3. Der href="http://www.example.com/" ist ein Beispiellink.
40
Burn_E99

erstellen Sie einen absolut positionierten Link in relativ positionierten div .. Sie müssen die Breite und Höhe der Verknüpfung als Schaltflächenabmessungen und die linken und oberen Koordinaten für die linke obere Ecke der Schaltfläche im Umbruch div festlegen.

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

Sie können automatisch eine Imagemap von dieser Website für den ausgewählten Bildbereich erstellen. https://www.image-map.net/

Einfachste Möglichkeit zur Ausführung! 

0
Ishan Patel