3

I'm trying to get to grips with some html, starting with the bits I know the following will create a hyperlink to an external website

<!DOCTYPE html>
<html>

<body>

  <p>
    <a href="http://www.w3schools.com/html/ target=_blank">Visit our HTML tutorial</a>
  </p>

</body>

</html>

Here clicking on the text will open a new window with the URL mentioned.

I want to do more or less the same thing, have text that if clicked on instead of loading a website/webpage in a new window, instead loads an image(jpg) in a new window.

I don't want to see the image at all until the link is clicked on, and then the image should be in a new window.

To that end I have tried substituting the "http://www/w3schools.com/html" portion of the href with base64 encoded image data

<!DOCTYPE html>
<html>

<body>

  <p>
    <a href="data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC" width="70" height="38" alt="image embedded using base64 encoding!"> Click here for the image</a>
  </p>

</body>

</html>

But this doesn't work in IE11(though fine in Firefox). However looking at this SO postIs it safe to use to display images?, it seems to suggest that base64 encoded data can be used with an href for all major browsers.

Regardless is there any way/workaround to create a link to an image (that is embedded in the HTML, so no external reference, no reference to a path on a server or anywhere, all the data for the image must be contained in the HTML) So that when rendered text is displayed, and only when that link is clicked the image is shown in a new window for IE in general and IE11 more specifically?

Update

following on from @Geoff James comment below would the IE9.JS library (https://github.com/mylovecompany/ie9-js) be any good I am thinking I could inline it in the HTML so that when it comes accross the portion it will behave like other browsers? is this something that is possible, and does anyone think it would work. I've not had a chance to try it out myself and the first thing I'd have to do in find out how to inline a javascript library

Alternative Idea

Again I'm making a suggestion as I have no idea what is realistically do-able, would it be possible to store the encoded image data in a variable in the HTML and use some javascript magic to decode the data into an image on the local machine, and then load that decoded image in the browser. I have no idea if this is remotely possible or how it might be done. If anyone has suggestions, please help me flesh out the idea more

Obrigado

Community
  • 1
  • 1
user595985
  • 1,543
  • 4
  • 29
  • 55
  • Good question. FYI: I'm using Chrome and base64 image working a-OK. Digging around, it seems that there might be a bit of server-side work involved - maybe some JS, too. Take a look at the links referenced in this post: http://stackoverflow.com/questions/2627632/how-can-i-display-image-in-ie-using-base64-encoding-method (it references PHP, but I don't know what server technology you're using - hopefully it might help) I shan't mark this question as a doop, though - as it is well-documented, and hopefully helps future users with a better answer. Best regards with finding a solution :) – Geoff James Aug 16 '16 at 20:42
  • In the first snippet, you're missing a couple of quote marks. In the second one, most of the attributes don't make sense, but apart from that, I don't know why it shouldn't simply work in IE as well as in the other browsers. – Mr Lister Aug 16 '16 at 20:43
  • FYI: Tested in MS Edge (Win10) and IE11 - both not working for me, I get a "Webpage cannot be displayed..." error page – Geoff James Aug 16 '16 at 20:48
  • 1
    It's not the fact that it's in an href, by the way. The same difference occurs when you simply put the data url in the location bar. – Mr Lister Aug 16 '16 at 20:49
  • Exactly, @MrLister - tried that, too just for reference. It might be a case of using some sort JS in the page giving the link to pass the data to some server-side script/page that can then render it; whenever incompatible browsers are detected. Only a suggestion - not sure how you would implement it; also depends on server technology – Geoff James Aug 16 '16 at 20:51

0 Answers0