High-resolution imagery is all around us. Once the domain of high-end photography, now even our phones have many megapixels. OpenSeadragon is the premier tool for displaying these images on the web. Other tools exist, but they are either focused on geographic data, or they lack versatility and polish. OpenSeadragon has a lively community and is used throughout the world by artists, libraries, museums, medical/scientific institutions, etc.

With OpenSeadragon, you can display images too big to view on the screen, or even too big to send all at once, and seamlessly transition from low resolution to high resolution with no extra coding. OpenSeadragon works across devices, from tiny phone screens to giant wall displays.

By its very nature (allowing the user to zoom into ultra-high resolution images), OpenSeadragon has a number of very powerful concepts that may not be intuitive at first (tile pyramids, multiple coordinate systems, etc.). This course will give you a solid working understanding of those concepts. We will then dive further into many of the advanced techniques possible with OpenSeadragon to take your app to the next level. Throughout, we will work with real, functioning apps that you will build from start to finish.
  
This course is taught by Ian Gilman, the creator and maintainer of OpenSeadragon.

Transform huge images into immersive experiences

In this course, you'll learn how to prepare and present huge images on the web using OpenSeadragon zooming technology. This course is for web developers who want to create truly unique web front-ends – with a focus on implementing immersive experiences with high-resolution images and interactive overlays using OpenSeadragon and Node.js.

OpenSeadragon Deep Dive

---
title: Clicking on Images
description: Make clicking in the viewer zoom you directly to whatever image you clicked on
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/zPknLTXBLIm17BN00ptnodUZgnHo6Z3ooQ2azrs6TV6U.m3u8
coverImageUrl: https://image.mux.com/zPknLTXBLIm17BN00ptnodUZgnHo6Z3ooQ2azrs6TV6U/thumbnail.png?time=163
code: https://gitlab.com/fullstackio/books/newline-course-apps/ian-gilman-newline-guide-to-displaying-huge-images-with-openseadragon-app/-/tree/main/code/module_05/lesson_05.01/src
---

## Clicking on Images

In the previous module, you learned how to bring multiple images into the viewer and arrange them as you please. Now, delve into interacting with those images.

By default, clicking in the viewer zooms a little closer to that part of the content. But what if you want to be more specific? In this lesson, make clicking in the viewer zoom directly to whatever image you clicked on.

<ReplitEmbed
  src="//replit.com/@newlineauthors/OpenSeadragon-5-1-Clicking-on-Images"
/>

### Disable the Default Behavior

To start, you'll want to disable the default behavior, so your new code doesn't conflict with it. OpenSeadragon has nuanced options for a number of gestures, broken down by input device. By default, `clickToZoom` is on for both mouse and pen input, so turn it off for both of them. You can add this to the OpenSeadragon options used when creating the viewer:

```javascript
gestureSettingsMouse: {
  clickToZoom: false
},
gestureSettingsPen: {
  clickToZoom: false
}
```

Give it a try. You'll see that clicking in the viewer no longer does anything.

For information on all of the gesture controls, visit the [OpenSeadragon Options Documentation](https://openseadragon.github.io/docs/OpenSeadragon.html#.Options) and scroll down to the gesture settings section.

### Openseadragon Click Events

Now that you've disabled the default click behavior, you can start receiving click events from the viewer and handle them yourself! You need to add a handler for `canvas-click` events:

```javascript
viewer.addHandler('canvas-click', (event) => {
  // Handle the click.
});
```

OpenSeadragon emits `canvas-click` any time the pointing device (mouse, touch, pen) lets up in the viewer, regardless of whether it was a quick click or a longer drag. In this case, you are only interested in clicks, so test the event's `quick` property:

```javascript
if (!event.quick) {
  return;
}
```

You need to know where the click was. The event has a `position` property that's in web coordinates relative to the viewer's element. To find out which image was clicked on, convert that position to viewport coordinates, which is how all the images are positioned.

:::note

See the coordinate systems section in the introduction to this course for more info on the different coordinate systems.

:::

The viewer's `viewport` has a bunch of conversion functions for the various coordinate systems. Since you're going from the viewer element's coordinates to viewport coordinates, use `viewerElementToViewportCoordinates`:

```javascript
const viewportPos = viewer.viewport.viewerElementToViewportCoordinates(
  event.position
);
```

### Which Image Was It?

Now that you have the click location in viewport coordinates, it's just a matter of going through all of the images and checking to see if that location is inside their bounds. Use your handy `eachImage` function to go through the images. Once you have an image, get its bounds (in viewport coordinates) via the `getBounds` method. As mentioned in the "Arranging the images" lesson, pass in `true` to get the current location of the image in case it's animating.

```javascript
eachImage((tiledImage) => {
  const bounds = tiledImage.getBounds(true);
});
```

Make clicking in the viewer zoom you directly to whatever image you clicked on