diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index d2129053..5300b499 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -148,18 +148,21 @@ document.addEventListener("DOMContentLoaded", function() { modalZoom.className = 'modalZoom cursor'; modalZoom.innerHTML = '⤡' modalZoom.addEventListener('click', modalZoomToggle, true) + modalZoom.title = "Toggle zoomed view"; modalControls.appendChild(modalZoom) - const modalTileImage = document.createElement('button') - modalTileImage.className = 'modalTileImage gr-button gr-button-lg gr-button-secondary'; - modalTileImage.innerHTML = 'Preview Image Tiling' + const modalTileImage = document.createElement('span') + modalTileImage.className = 'modalTileImage cursor'; + modalTileImage.innerHTML = '⊞' modalTileImage.addEventListener('click', modalTileImageToggle, true) + modalTileImage.title = "Preview tiling"; modalControls.appendChild(modalTileImage) const modalClose = document.createElement('span') modalClose.className = 'modalClose cursor'; modalClose.innerHTML = '×' modalClose.onclick = closeModal; + modalClose.title = "Close image viewer"; modalControls.appendChild(modalClose) const modalImage = document.createElement('img') diff --git a/style.css b/style.css index e235f7f3..587bcec1 100644 --- a/style.css +++ b/style.css @@ -272,7 +272,8 @@ input[type="range"]{ } .modalClose, -.modalZoom { +.modalZoom, +.modalTileImage { color: white; font-size: 35px; font-weight: bold;