Display-Bild in einem popup-Fenster (gleiche Fenster) onClick von einem bestimmten Bereich auf der Basis Bild

Habe ich verwendet, Bild-Mapping, um anzugeben, welches Bild angezeigt wird, wenn ein Benutzer klickt auf einen bestimmten Bereich auf dem Bild. Hier ist mein code:

<html>    
<body>
<div align="center">

<img id="IMGMAPS" src="base.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area  alt="" title="" href="abc\1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc\2.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc\3.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc\4.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc\5.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self"     />
</map>

</div>
</body>
</html>

Dieser code führt zu folgendem Bild:

Was ich möchte, ist Bilder 1, 2, 3, 4, 5 sollte in einem popup-Fenster im gleichen Fenster, wenn ein Benutzer klickt auf den Koordinaten angegeben.

Wie kann ich das erreichen?

Edit 1:
Bild

Dem Basis-image ist eine einzelne image. 1, 2, 3, 4, 5 sind die Bereiche, die mit bestimmten Koordinaten auf dem Bild. Jedes Gebiet hat ein entsprechendes Bild öffnet sich in einem popup nur, wenn ein Benutzer klickt auf einen bestimmten Bereich mit bestimmten Koordinaten.

Edit 2: Wie vorgeschlagen von @Edrees, habe ich folgende änderungen vorgenommen:

Hinzugefügt Stiftung JS

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js" ></script>
<script>
$(document).foundation();
</script>

Verwendet data-reveal-id

<img id="IMGMAPS" src="selfie.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" data-reveal-id="firstModal" data-reveal  />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="selfie.jpg" />

<!--<div id="firstModal" class="reveal-modal" data-reveal> -->
<area  alt="" title="" href="Shortlisted_selfie\VenkateshSittula.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"  id="firstModal" class="reveal-modal" data-reveal   />
<a class="close-reveal-modal">&#215;</a>
<!-- </div> -->

Dieser machte keinen Unterschied zu meinen Ergebnissen.

Edit 3: ich bin immer noch kämpfen, um eine funktionierende Lösung. Nur noch einmal verdeutlichen, was ich Suche:

Base-Bild ist ein einzelnes Bild mit Bereichen 1, 2, 3, 4, 5.
Jedem Bereich (1, 2, 3, 4, 5) ein entsprechendes Bild.
Ich will eine Funktion, wo, wenn ich Sie auf Bereich 1, es ist entsprechende Bild öffnet sich in einem modal dialog, wenn ich auf Bereich 2, es ist entsprechende Bild öffnet sich in einem modal dialog... so weiter, und so weiter für alle Bereiche (nur auf klicken).

Gibt es eine Abhilfe für dieses?

Edit 4: Als pro Edrees die Lösung, ich war in der Lage, um die Funktionalität zu implementieren, was ich Suche. Weiter, ich brauche, um die Feinabstimmung dieser Lösung, indem Sie eine schließen-Schaltfläche oder den link oben rechts auf der reveal-modal. Ich sah einige foundation Unterlagen und fand heraus, dass es eine Klasse namens **close-reveal-modal** für diesen Zweck verwendet, aber ich weiß nicht, wie zu implementieren, das in meiner Lösung. Auch ich habe Bilder von Größen, die von 612*640 zu 900*1600 zu 1280*960 zu 1920*1080... wie Stelle ich sicher, dass das Bild geöffnet, innerhalb der modalen Größe proportional (d.h. Bild unterhält Verhältnis) wie pro die Größe der Fenster ?

Verbesserung die Lösung mit der folgenden codepen link

Edit 5: Die Lösung von @Edrees perfekt gearbeitet, so lange war ich der Ansicht dieser Seite separat. Allerdings, wenn ich eingebettete diese Seite im MOJO-Portal, Stiftung, CSS und JS komplett geschraubt bis das default-Verhalten von MOJO-Portal. Es scheint, dass die Standard-CSS überschrieben durch die Stiftung. Wer hat eine Abhilfe dafür? Ein schlichtes jQuery zu lösen, dies ohne Verwendung von Framework/plugin?

Edit 6:, Nachdem es Probleme mit foundation framework, merkte ich, dass Rodrigo Leite hat eine Antwort auf dieses Problem zu lösen. Obwohl, ich weiß nicht modales Dialogfeld geöffnet wird, wird es nicht geben ein Gefühl der Dialogfeld, um die Benutzer-und reichen für meine Anforderungen.

Welche änderungen muss ich:

Möchte ich die "div" decken das gesamte Fenster
Bild angezeigt werden soll in der Mitte (vertikal und horizontal) des Fensters/Bildschirms
Eine schließen-Schaltfläche in der rechten oberen Ecke des Fensters/Bildschirms, wenn das zugeordnete Bild angezeigt wird
Ein Benutzer sollte in der Lage sein zu klicken, nur die Schaltfläche schließen, wenn Bild geöffnet wird. Alle anderen Teile des Fensters/der Schirm, der verhindern soll, klicken Sie auf die Funktionalität /keine Aktion auf das klicken auf einen beliebigen Teil des Bildschirms mit Ausnahme Schaltfläche schließen

HINWEIS: Die schließen-Schaltfläche angezeigt werden kann, in jeder form, D. H. Bild -, Schaltflächen, etc.

Müssen Sie einige javascript-code, um "öffnen Sie ein popup im gleichen Fenster", ansonsten wechseln Sie einfach target="_self" zu target="_blank" zum öffnen der Bilder in einem neuen Fenster
Sie können etwas tun, wie auch diese: codepen.io/Edrees21/full/BobqrK, Dann müssen Sie nur add-Stiftung js im Quellcode + eine Zeile code wie in dem Beispiel aufrufen, die Stiftung modal
aktualisiert es und hier ist der link wo man sehen kann das code: codepen.io/Edrees21/pen/BobqrK
Wenn Sie einen Blick auf den code, ich habe eine Erklärung/ Beschreibung. Für jedes element, das Sie öffnen möchten, in einer modalen, müssen Sie ein einzigartiges Attribut data-reveal-id und werden verwendet als id in Ihrem modalen Dialog, also in deinem Fall, versuchen Sie auf hinzufügen, um den Bereich tags
codepen.io/Edrees21/pen/NxKERQ

InformationsquelleAutor John | 2015-12-02

Können Sie erstellen Sie Ihre eigenen modal div und legte es unsichtbar, dann, wenn der Benutzer auf einen Bereich klicken, können Sie javascript verwenden, um dies zu zeigen, modale und setzen Ihren Inhalt. Werfen Sie einen Blick:

css

#modal-background{
   width: 100%;
   height: 100%;
   background-color: #000000;
   position: fixed;
   top: 0; left: 0;
   display: none;
   z-index: 99;
}

#modal-content{
   background-color: #FFFFFF;
   width: 500px;
   height: 500px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -250px;
   margin-top: -250px;
   z-index: 100;
}

html

    <div id='modal-background'>
        <div id='modal-content'>
        </div>
    </div>

<img id="IMGMAPS" src="http://i.stack.imgur.com/zir2T.png" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self"     />
</map>

javascript (jquery):

$(document).ready(function(){

        $('area').click(function(){
            $('#modal-content').html('<img src=' + $(this).data('imageurl') +'>');
            $('#modal-background').fadeIn();
         });

        $('#modal-background').click(function(){
            closeModal();
         });

});

function closeModal(){
  $('#modal-background').fadeOut();
}

Hoffe, es hilft.

Werde ich haben, um alle meine <img>, <map> und <area> - tags innerhalb der <div id= "modal-content'> tag?
Oder brauche ich separate divs für die einzelnen Bereiche-tag ?
Ich habe verstanden, dass Sie möchten, fügen Sie nur das ausgewählte Bild, nicht wahr?
Bitte überprüfen Sie meine aktuelle Frage
Es wäre wirklich schön, wenn Sie Ihre Antwort in meinem code, und schreiben Sie eine vollständige Antwort.. ich habe versucht mit deinem code, aber vielleicht bin ich nicht in der richtigen Weise.

InformationsquelleAutor Rodrigo Leite

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.