As a news site, many companies will download our logo for inclusion on their own webpages. The natural way that this happens is that they will right-click on the logo in our navbar to attempt to download the image for their own use. There are two problems with this.
- Navbar logos are frequently pretty small. It is beneficial to have a higher resolution version available that folks can scale down as needed. Some people will need a transparent background, while others may have better luck with a white background.
- In our case, our navbar logo is not our official color scheme. To set the logo against the dark grey background, we had to change the word “Wire” to white. Obviously this isn’t super useful when you want to use our logo against a white background.
We’ve put a small bit of javascript in place that intercepts the right-click action on our navbar logo. (Go ahead and try it. Right-click on the logo at the top of this page.) If you are not on our logo download page, it will redirect you to the logo download page. Once you are on that page, a right-click will generate an alert to download the logo below. Here’s the code that we used to accomplish this.
The way this works is that you first define a trigger class that will get intercepted. That class needs to be applied to the element where folks will right-click. You also define a URL for the logo download page.
Use addEventListener to watch for a right-click event, which is called contextmenu. Then check to see if the trigger class is present, and if so, redirect to the logo download page. preventDefault blocks the normal context menu from opening on right-clidk.
This actually wasn’t our idea. We’ve got to give credit to Colin McClure, the web developer at Simply Measured, who came up with this approach.