Warm tip: This article is reproduced from serverfault.com, please click

hyperlink on a image which is in a iframe (javascript, leaflet)

发布于 2020-11-30 13:17:35

I display a marker with a popup window. The popup display an image.
I would like to open a website if the user click on the image.
I did that:

Popup = "<div><a href='http:...'><iframe src='" +  m.image + "' scrolling='no' frameBorder='0' style='border:none;' ></iframe></a></div>";
marker.bindPopup(Popup).openPopup();

When I mousemove on the image I have a zoom icon (I was expected a hand icon).
If I click on the image, this one is zoomed.

Do you see my mistake(s) ?

Note #1: I styled a custom className (copy from another question):

<style>
 .custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  }
.custom-popup .leaflet-popup-tip-container {
  width:30px;
  height:15px;
  }
.custom-popup .leaflet-popup-tip {
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid #2c3e50;
 }   
</style>

I defined options:

var options =
    {
        'maxWidth': '400',
        'width' : '300',
        'className': 'custom-popup'
    }

And finally create the popup:

Popup+= "<div><a href='https://google.com'><img src='" +  (BASE_URL || '') + m.image + "' /></a></div>";
result.bindPopup(potentialPopup,options).openPopup();

Colors change but the size of the popup doesn't change and the image is very small ???

leaflet-popup-content-wrapper 91x62
leaflet-popup-content-img 51x34

Note #2: I added in the style:

img {
    height:350px;
    width:700px;
}

and changed the options:

var options =
    {
        //'maxWidth': '400',
        //'width' : '300',
        'className': 'custom-popup'
    }

and ... the popup/image height changed ! but not the width ?

Note #3: Here is the solution

.custom-popup div.leaflet-popup-content {
  min-Width: 300px;
  max-Width: 300px;
}

Don't ask why !!!
Thank you to @mplungjan for his help !

Questioner
jpc
Viewed
11
mplungjan 2020-12-01 22:10:52

Do not wrap an iFrame in an anchor since it is not valid HTML and won't link the content of the iFrame.

A div and an achor will adapt their size to content:

const m = { image: "https://i.imgur.com/k5QOP26.jpeg" }
const popup = "<div><a href='https://...'><img src='" + m.image + "'/></a></div>";
document.body.innerHTML += popup;
/* css 1 */
img { height: 50px }

/* css 2 */
img { height: 350px }