Show interaction key based on platform.

src/css/pannellum.css

@@ -331,6 +331,12 @@
     left: 0;
 }
 
+.pnlm-outline {
+    border: 1px solid #fff;
+    border-radius: 3px;
+    padding: 0 2px;
+}
+
 .pnlm-about-msg {
     font-size: 11px;
     line-height: 11px;

src/js/pannellum.js

@@ -141,7 +141,7 @@ defaultConfig.strings = {
     twoTouchActivate: 'Use two fingers to pan the panorama.',
     twoTouchXActivate: 'Use two fingers together to pan the panorama horizontally.',
     twoTouchYActivate: 'Use two fingers together to pan the panorama vertically.',
-    ctrlZoomActivate: 'Use ctrl + scroll to zoom the panorama.',
+    ctrlZoomActivate: 'Use %s + scroll to zoom the panorama.',  // One substitution: key name
 };
 
 // Initialize container
@@ -1131,7 +1131,8 @@ function onDocumentMouseWheel(event) {
 
     // Ctrl for zoom
     if (!fullscreenActive && config.mouseZoom == 'ctrl' && !event.ctrlKey) {
-        showInteractionMessage(config.strings.ctrlZoomActivate);
+        var keyname = navigator.platform.indexOf('Mac') != -1 ? 'control' : 'ctrl';
+        showInteractionMessage(config.strings.ctrlZoomActivate.replace('%s', '<kbd class="pnlm-outline">' + keyname + '</kbd>'));
         return;
     }
     clearInteractionMessage();