Author's Note: After additional testing, I've learned that the scripts in this article may not work in some Windows browsers (notably Firefox and Opera) if QuickTime is not installed. For updated scripts, please see Build a Better Web Audio Player. The core ideas are the same, however, so I recommend reading this article first.

Download tutorial files

In Build a Simple MP3 Player for Your Site, I shared one of my favorite Web tricks: how to make an MP3 link generate a pop-up player when you click it. Why would you want to do that? Normally, when a visitor clicks an audio link (for example, <a href="hit-song.mp3">My Hit Song</a>), the browser blanks out the entire page or launches a helper application. Either result can be jarring to your visitors.

With the pop-up player approach, you add a bit of JavaScript to the link. When the visitor clicks the link, it calls an external JavaScript function that generates a pop-up window containing the audio file and a playback controller. In other words, the JavaScript creates the new window on the fly; you don't have to prepare and upload a separate page for each audio file you want to showcase.

Here's an example, using a music clip from our interview with mixer Tal Herzberg:

• AudioPop—Black Eyed Peas: "Let's Get It Started"

If you have JavaScript enabled (most people do), you should have seen a window similar to this:

The audio pop-up audio player as it appears in Windows Internet Explorer with QuickTime installed. See the previous article for the player's other guises.

Visitors with JavaScript turned off (or who right-click the audio link and instruct it to open in a new window) should get the audio file in a new, full-size window.

Getting the Picture

Click me.

So far, so good. Our audio links are spawning neat pop-up players instead of booting our visitors off the page. But the flat orange background—or the white one we use for audio pop-ups elsewhere on this site—is rather bland. What if we were to add an image to the pop-up window?

I happened to have a companion script that did just that. It's a variation of the one you may have noticed in O'Reilly's Featured Photographer galleries. When you click on a thumbnail image, the script generates a pop-up window containing a larger version of the photo, plus a title and caption. Try it:

Here's the code for the thumbnail link above:

<a href     = "/images/oreilly/digitalmedia/2005/10/ilachinski-pop.jpg"
   target   = "_blank"
   title    = "Click to see large version"
   onclick  = "javascript:PhotoPop('Big Blue Flower',this.href,'644','523','This image is part of the Featured Photographer profile for Andrew Ilachinski.'); return false">
<img src    = "/images/oreilly/digitalmedia/2005/10/ilachinski-thumb.jpg"
     alt    = "Big Blue Flower"
     width  = "106"
     height = "86"
     border = "0" />
</a>

Note how the main HTML portion of the link is a simple image reference and target attribute. That's the part that will fire if the visitor has JavaScript disabled. The JavaScript portion of the link, following the onclick handler, calls the function PhotoPop, which is stored in an external JavaScript file. The link passes five pieces of data to the external function:

1. The pop-up window title (Big Blue Flower)
2. The URL of the large image (this.href, which refers back to the image URL in the HTML portion of the link)
3. The width of the large image
4. The height of the large image
5. The caption that will appear in the pop-up window

Immediately following that collection of data is the statement return false, which prevents the HTML portion of the link from firing after the JavaScript does. If we left that statement out, clicking the link would open both the pop-up window and a new regular window containing the large image.

Typing up that long, twisted link would be a pain, so I wrote a Dreamweaver extension to do it for me. You can download the extension at the beginning or end of this article. Once it's installed in Dreamweaver, all you have to do to create a pop-up image link is select Batmo_Image_Pop from Dreamweaver's Insert menu and fill in the form that pops up. It will look something like this:

To create the complex JavaScript pop-up link above, all I did was fill out this form and hit OK. You can download this Dreamweaver extension at the end of the article. You'll also need to install the external JavaScript file called pop-up-scripts.js, available in the same download, and insert a link to it in the page on which you want to use the pop-up link.