EverWeb Codebox

Opening a File in a New Browser Window

Using a Hyperlink

A text or image hyperlink can open a new browser window by adding target=”_blank” to the HTML in an <a> tag like this...

<a href="URL to the page or file" target="_blank">Click Me</a>

An <img> tag can be insert in place of the “Click Me” text to launch the new window from a thumbnail like this...

<a href="URL to the page or file" target="_blank">

<img src="path to the thumb.jpg" alt="thumb" style="width:200px;height:150px;border:none;margin:0;padding:0" /></a>

New Sized Window Using HTML

The above method is fine if the target file is a web page but will be less than satisfactory for an image, movie file or PDF since the browser window will open full size and cover the original one.

The simplest way to gain control over the new window size is to use some code like this...


<a href="#" onClick="window.open('URL to the file to be displayed in the new window','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=640, height=480');return(false)"><img src="URL to the thumb that will be clicked to open the new window" style="width:100px; height:30px; border:none" /></a>


The first part of the code deals with the content of the new window where the URL to the file and the required Width and Height are entered.

Next comes the URL to the thumbnail and its Width and Height.

For a text link, delete this...

<img src="URL to the image that will be clicked to open the new window" style="width:100px; height:30px; border:none" />

... and enter some text to replace it.

The text would of course have to be styled using some CSS otherwise it will appear in the browser default font and color.

thumb

Click HERE to open a slideshow in a new window

Info

Examples

These examples use javascript to not only size the new window to suit the content but also make it appear in the center of the visitor's screen.

Click the Info button to launch a PDF which should make it all a lot clearer!

The styled text link opens a new window with a slideshow and the thumbnail image to the right opens a full sized image.

New Window Size Using Javascript

The first part of the code inserts the thumbnail image and the second part deals with the popup window where you can adjust the size and turn on/off various functions with yes/no.


<a><img name="PopUpWin1" border=0 height=30 width=30 src="URL to the image that will be clicked to open the new window" onclick="open_win()"></a>

<script type="text/javascript">

function open_win(){

window.open("URL to the file to be displayed in the popup window","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=yes, width=640, height=480") }

</script>

The above links employ the same code as used in the widgets that allow the creation of text, image and button hyperlinks to open new, precisely sized browser windows.

Click the Easy button to see the widgets.

Easy