Kevin Lynch Archives

Opening windows with JavaScript

Clicking on the photos in the left margin of my site will open a new window to display a larger version. This feature is implemented using JavaScript, which varies across browsers and platforms. Jason Kottke pointed out (thanks!) how to make this work better across current browsers such as Chimera — if you like reading about JavaScript, please click more for details.

I'm using Dreamweaver's Open Browser Window behavior, and attaching it to an image by wrapping it with an href using #, which in many browsers means don't go anywhere:

<a href="#"
onclick="MM_openBrWindow('med/DSCN2062.jpg',
'Photo','width=800,height=600')">
<img src="DSCN2062.jpg"
width="120" height="90" border="0" alt="" /></a>

The problem with this is that in some browsers (like Chimera), the # link causes the page to reload and reset to the top of the page in addition to opening the new window. This is of course confusing when you go back to reading the main page. Also, if your browser doesn't support JavaScript, you don't get to see a bigger image since the # link doesn't go anywhere.

A fix for this is to change the # to instead link to the image URL:

<a href="med/DSCN2062.jpg"
onclick="MM_openBrWindow('med/DSCN2062.jpg', 
'Photo','width=800,height=600')">
<img src="DSCN2062.jpg"
width="120" height="90" border="0" alt="" /></a>

This gets closer, but on some browsers (like Internet Explorer on OS X) this now causes the image to load on the main page in addition to loading a copy in a new window. To prevent that from happening, you can add a 'return false' instruction at the end of the onClick handler:

<a href="med/DSCN2062.jpg"
onclick="MM_openBrWindow('med/DSCN2062.jpg', 
'Photo','width=800,height=600'); return false;">
<img src="DSCN2062.jpg"
width="120" height="90" border="0" alt="" /></a>

This makes the link work much better across a wider number of browsers. I've let the Dreamweaver team know about this issue so we can improve this by default.

Update: ranjan has pointed out a Dreamweaver extension to do this, which creates a little bit better code yet -- instead of needing to repeat the same URL twice to open, you can just put it in the href once and use JavaScript to get that value for the open window call:

<a href="med/DSCN2062.jpg"
onclick="MM_openBrWindow(this.href, 
'Photo','width=800,height=600'); return false;">
<img src="DSCN2062.jpg"
width="120" height="90" border="0" alt="" /></a>