Overlay original image size on hover on all websites

Displays the original dimensions of a hover image on all websites.

当前为 2024-06-14 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Overlay original image size on hover on all websites
  3. // @description Displays the original dimensions of a hover image on all websites.
  4. // @name:af Oorspronklike beeldgrootte oorle op alle webwerwe
  5. // @description:af Toon die oorspronklike afmetings van 'n zweefbeeld op alle webwerwe.
  6. // @name:ar عرض أبعاد الصورة الأصلية عند التحويم على جميع المواقع الإلكترونية
  7. // @description:ar يعرض أبعاد الصورة الأصلية عند التحويم على جميع المواقع الإلكترونية.
  8. // @name:az Bütün veb saytlarda üzərində keçid zamanı orijinal şəkil ölçüsü
  9. // @description:az Bütün veb saytlarda üzərində keçid zamanı orijinal şəkil ölçüsünü göstərir.
  10. // @name:bg Наслој оригиналне величине слике приликом левог приказа на свим веб локацијама
  11. // @description:bg Прикажите оригиналне димензије слике приликом левог приказа на свим веб локацијама.
  12. // @name:bn সমস্ত ওয়েবসাইটে হভার ছবির মৌলিক মাপ ওভারলে
  13. // @description:bn সমস্ত ওয়েবসাইটে হভার ছবির মৌলিক মাপ প্রদর্শন করে।
  14. // @name:ca Superposició de la mida original de la imatge en el passar el ratolí en tots els llocs web
  15. // @description:ca Mostra les dimensions originals d'una imatge en passar el ratolí en tots els llocs web.
  16. // @name:cs Překrytí původní velikosti obrázku po najetí na všechny webové stránky
  17. // @description:cs Zobrazí původní rozměry obrázku po najetí na všechny webové stránky.
  18. // @name:da Overlay af original billedstørrelse ved hover på alle websteder
  19. // @description:da Vis original størrelse af et billede ved hover på alle websteder.
  20. // @name:de Originalgröße der Bildüberlagerung beim Hover auf allen Websites
  21. // @description:de Zeigt die Originalabmessungen eines Bildes beim Hover auf allen Websites an.
  22. // @name:el Επικάλυψη πρωτότυπου μεγέθους εικόνας κατά την αιωρούμενη κατάσταση σε όλους τους ιστότοπους
  23. // @description:el Εμφανίζει τις πρωτότυπες διαστάσεις μιας εικόνας κατά την αιωρούμενη κατάσταση σε όλους τους ιστότοπους.
  24. // @name:eo Overlay de la originala bildogrando dum muso super ĉiuj retejoj
  25. // @description:eo Montras la originalajn dimensiojn de hovrigi bildo sur ĉiuj retejoj.
  26. // @name:es Superposición del tamaño original de la imagen al pasar el cursor en todos los sitios web
  27. // @description:es Muestra las dimensiones originales de una imagen al pasar el cursor en todos los sitios web.
  28. // @name:fi Päällekkäinen alkuperäinen kuvakoko hoverilla kaikilla verkkosivustoilla
  29. // @description:fi Näyttää alkuperäiset kuvakoot hoverilla kaikilla verkkosivustoilla.
  30. // @name:fr Incrustation de la taille de l'image originale au survol sur tous les sites web
  31. // @description:fr Affiche les dimensions d'origine d'une image en survol sur tous les sites web.
  32. // @name:gl Superposición do tamaño orixinal da imaxe ao pasar o rato en todos os sitios web
  33. // @description:gl Amosa as dimensións orixinais dunha imaxe ao pasar o rato en todos os sitios web.
  34. // @name:he חיבור גודל תמונה מקורי בעת העברה מעל לכל אתרי האינטרנט
  35. // @description:he מציג את הממדים המקוריים של תמונה בעת העברת עכבר מעל לכל אתרי האינטרנט.
  36. // @name:hi सभी वेबसाइटों पर होवर पर मूल छवि आकार ओवरले
  37. // @description:hi सभी वेबसाइटों पर होवर पर छवि के मूल आकार को दिखाता है।
  38. // @name:hu Eredeti képméret átlátszása az egérrel történő lebegés közben az összes webhelyen
  39. // @description:hu Az eredeti kép méreteinek megjelenítése az egérrel történő lebegés közben az összes webhelyen.
  40. // @name:id Overlay ukuran asli gambar saat mengarahkan kursor di semua situs web
  41. // @description:id Menampilkan dimensi asli gambar saat mengarahkan kursor di semua situs web.
  42. // @name:is Yfirbragð upprunalegs myndastærðar á sveiflum á öllum vefsíðum
  43. // @description:is Sýnir upprunalegar málmar á mynd á sveiflum á öllum vefsíðum.
  44. // @name:it Sovrapposizione delle dimensioni originali dell'immagine al passaggio del mouse su tutti i siti web
  45. // @description:it Visualizza le dimensioni originali di un'immagine al passaggio del mouse su tutti i siti web.
  46. // @name:ja すべてのウェブサイトでホバー画像の元のサイズをオーバーレイ表示
  47. // @description:ja すべてのウェブサイトでホバー画像の元の寸法を表示します。
  48. // @name:km បង្ហាញទំហំរូបភាពដែលបង្ហាញឡើងលើលំនាំដើមនៅលើវេបសាយទាំងអស់
  49. // @description:km បង្ហាញទំហំដែលមាននៅលើរូបភាពដែលបង្ហាញឡើងលើលំនាំដើមនៅលើវេបសាយទាំងអស់។
  50. // @name:ko 모든 웹 사이트에서 이미지 원래 크기 오버레이 표시
  51. // @description:ko 모든 웹 사이트에서 이미지를 가리킬 때 원래 크기를 표시합니다.
  52. // @name:ms Overlay saiz asal imej semasa hover di semua laman web
  53. // @description:ms Papar dimensi asal imej semasa hover di semua laman web.
  54. // @name:mt Overlay ta 'dimensioni oriġinali tal-immaġni fuq hover fuq siti kollha tal-web
  55. // @description:mt Juri d-dimensjonijiet oriġinali ta 'immaġni fuq hover fuq siti kollha tal-web.
  56. // @name:nb Overlegg av original bildestørrelse ved svev på alle nettsteder
  57. // @description:nb Viser original størrelse av et bilde når du svever over det på alle nettsteder.
  58. // @name:nl Overlay originele afbeeldingsgrootte bij zweven op alle websites
  59. // @description:nl Toont de originele afmetingen van een zwevende afbeelding op alle websites.
  60. // @name:pl Nakładka oryginalnego rozmiaru obrazu po najechaniu na wszystkie strony internetowe
  61. // @description:pl Wyświetla oryginalne wymiary obrazka po najechaniu na wszystkie strony internetowe.
  62. // @name:pt Sobreposição do tamanho original da imagem ao passar o mouse em todos os sites
  63. // @description:pt Exibe as dimensões originais de uma imagem ao passar o mouse em todos os sites.
  64. // @name:ro Suprapunere dimensiune originală imagine la survol pe toate site-urile web
  65. // @description:ro Afișează dimensiunile originale ale unei imagini la survol pe toate site-urile web.
  66. // @name:ru Отображение оригинального размера изображения при наведении на всех веб-сайтах
  67. // @description:ru Отображает оригинальные размеры изображения при наведении курсора на всех веб-сайтах.
  68. // @name:sr Преклоп оригиналне величине слике приликом левог приказа на свим веб локацијама
  69. // @description:sr Приказује оригиналне димензије слике приликом левог приказа на свим веб локацијама.
  70. // @name:sv Överlagring av originalbildstorlek vid svävning på alla webbplatser
  71. // @description:sv Visar originalstorlek på en bild när du svävar över den på alla webbplatser.
  72. // @name:th แสดงขนาดภาพต้นฉบับเมื่อโฮฟเวอร์บนเว็บไซต์ทั้งหมด
  73. // @description:th แสดงขนาดต้นฉบับของภาพเมื่อโฮฟเวอร์บนเว็บไซต์ทั้งหมด
  74. // @name:tl Overlay ng orihinal na sukat ng imahe sa hover sa lahat ng mga website
  75. // @description:tl Nagpapakita ng orihinal na sukat ng imahe sa hover sa lahat ng mga website.
  76. // @name:tr Tüm web sitelerinde üzerine gelindiğinde orijinal resim boyutunu göster
  77. // @description:tr Tüm web sitelerinde üzerine gelindiğinde resmin orijinal boyutlarını gösterir.
  78. // @name:uk Налагодження оригінального розміру зображення при наведенні на всі веб-сайти
  79. // @description:uk Відображає оригінальні розміри зображення при наведенні на всі веб-сайти.
  80. // @name:vi Hiển thị kích thước hình ảnh gốc khi di chuột qua trên tất cả các trang web
  81. // @description:vi Hiển thị kích thước gốc của hình ảnh khi di chuột qua trên tất cả các trang web.
  82. // @name:zh 鼠标悬停时在所有网站上显示原始图像尺寸
  83. // @description:zh 在所有网站上显示悬停图像的原始尺寸。
  84. // @match *://*/*
  85. // @icon data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M.2 468.9C2.7 493.1 23.1 512 48 512l96 0 320 0c26.5 0 48-21.5 48-48l0-96c0-26.5-21.5-48-48-48l-48 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-64 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-64 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-64-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-64-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-48c0-26.5-21.5-48-48-48L48 0C21.5 0 0 21.5 0 48L0 368l0 96c0 1.7 .1 3.3 .2 4.9z'/%3E%3C/svg%3E
  86. // @version 1.0.3
  87. // @author BreatFR
  88. // @copyright 2024, BreatFR (https://breat.fr)
  89. // @grant none
  90. // @namespace https://gitlab.com/breatfr
  91. // @homepageURL https://gitlab.com/breatfr/overlay-original-image-size-on-hover-on-all-websites
  92. // @supportURL https://discord.gg/Q8KSHzdBxs
  93. // @license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  94. // ==/UserScript==
  95.  
  96. (() => {
  97. "use strict";
  98.  
  99. // Styles
  100. const toolbarStyles = {
  101. alignItems: "center",
  102. backdropFilter: "blur(1rem)",
  103. backgroundColor: "rgba(0, 0, 0, 0.4)",
  104. borderRadius: "5rem",
  105. color: "white",
  106. display: "none",
  107. fontSize: "1rem",
  108. left: "1rem",
  109. padding: "0.5rem 0.75rem",
  110. pointerEvents: "none",
  111. position: "absolute",
  112. textAlign: "center",
  113. top: "1rem"
  114. };
  115.  
  116. // Create toolbar element
  117. const toolbar = document.createElement("div");
  118. Object.assign(toolbar.style, toolbarStyles);
  119.  
  120. // Create image size label
  121. const imageSizeLabel = document.createElement("span");
  122. toolbar.appendChild(imageSizeLabel);
  123.  
  124. document.body.appendChild(toolbar);
  125.  
  126. const showImageSize = (img) => {
  127. const originImage = new Image();
  128. originImage.onload = () => {
  129. imageSizeLabel.textContent = `${originImage.naturalWidth} × ${originImage.naturalHeight}`;
  130. toolbar.style.display = "flex";
  131. img.parentNode.appendChild(toolbar);
  132. };
  133. originImage.src = img.src.replace(/([?&])name=([^&]*)/, "$1name=orig");
  134. };
  135.  
  136. document.body.addEventListener("mouseover", (event) => {
  137. if (event.target.tagName === "IMG" && !event.target.src.endsWith(".svg")) {
  138. showImageSize(event.target);
  139. }
  140. });
  141.  
  142. document.body.addEventListener("mouseout", (event) => {
  143. if (event.target.tagName === "IMG" && !toolbar.contains(event.relatedTarget)) {
  144. toolbar.style.display = "none";
  145. }
  146. });
  147. })();