Need to open an image in a new window, but with twice the size. code need's to be in HTML5 only.Thanks

Hmmm, I am not exactly sure if I get this right. But, I think this can be done with pure HTML. So, depending on the size of the picture for example sake says its 800 px by 600 px. Here is what can be done that meets the criteria.

<a href="image/random.jpg" target="new">
    <img src="image/random.jpg" alt="random image" width="400" height="300">
</a>

So, when you open in browser you will have a 400 by 300 px image. When you click it, it open a new 'tab' or 'window' depending on your browser setting and image open at 800 by 600, basically doubles in size from the link image.

Another way do it is create 2 pages, the first page is the same code with link. The second HTML page will have an embedded img with define larger width and height. On first page has a link to the second with the target = "new",

Pure html and same image doubles in size

I hope this meets what you are looking for. Good luck.

Hi Hassan,

Sure, and thank for clarifying.

If I am getting this right, you would like original size of the picture on the link, when click it output to a new window that doubles in size.

So, here is what I can think of that does the trick using the similar approach to the first response Again say the original picture is created at 800 px by 600 px.

Html file 1:index.html

<!--- picture link is shown in original 800 by 600 -->

<a href="img2.html" target="new">
    <img src="img/random.jpg">
</a>

html file 2: img2.html

<!--- outputs the image is stretched twice its size and display on browser at 1600 by 1200 px --->

<img src="img/random.jpg" width="1600" height="1200">

If I did understanding this right. Speaking of strictly using pure html, excluding css and javascript. Than this is the only way I can think of by creating 2 html files. I don't think it is possible to actually double the image resolution (i may be wrong). This only displays a stretched pic twice its size on the browser.

It would be interesting to see if someone knows another way or maybe more elegant to double its size strictly using HTML5.

I am not sure if that meets it or not. If you do come up with something, would be happy to hear on your approach. Best of luck.

I'd suggest you use a lightbox instead of a new window, but that requires JavaScript and CSS.