Raw Source Toggle Dropdown

• Minified Source

  Alternate update check target.

  Alternate download source target.

Breat / Overlay original image size on hover on all websites

// ==UserScript==
// @name            Overlay original image size on hover on all websites
// @description     Displays the original dimensions of a hover image on all websites.
// @name:af         Oorspronklike beeldgrootte oorle op alle webwerwe
// @description:af  Toon die oorspronklike afmetings van 'n zweefbeeld op alle webwerwe.
// @name:ar         عرض أبعاد الصورة الأصلية عند التحويم على جميع المواقع الإلكترونية
// @description:ar  يعرض أبعاد الصورة الأصلية عند التحويم على جميع المواقع الإلكترونية.
// @name:az         Bütün veb saytlarda üzərində keçid zamanı orijinal şəkil ölçüsü
// @description:az  Bütün veb saytlarda üzərində keçid zamanı orijinal şəkil ölçüsünü göstərir.
// @name:bg         Наслој оригиналне величине слике приликом левог приказа на свим веб локацијама
// @description:bg  Прикажите оригиналне димензије слике приликом левог приказа на свим веб локацијама.
// @name:bn         সমস্ত ওয়েবসাইটে হভার ছবির মৌলিক মাপ ওভারলে
// @description:bn  সমস্ত ওয়েবসাইটে হভার ছবির মৌলিক মাপ প্রদর্শন করে।
// @name:ca         Superposició de la mida original de la imatge en el passar el ratolí en tots els llocs web
// @description:ca  Mostra les dimensions originals d'una imatge en passar el ratolí en tots els llocs web.
// @name:cs         Překrytí původní velikosti obrázku po najetí na všechny webové stránky
// @description:cs  Zobrazí původní rozměry obrázku po najetí na všechny webové stránky.
// @name:da         Overlay af original billedstørrelse ved hover på alle websteder
// @description:da  Vis original størrelse af et billede ved hover på alle websteder.
// @name:de         Originalgröße der Bildüberlagerung beim Hover auf allen Websites
// @description:de  Zeigt die Originalabmessungen eines Bildes beim Hover auf allen Websites an.
// @name:el         Επικάλυψη πρωτότυπου μεγέθους εικόνας κατά την αιωρούμενη κατάσταση σε όλους τους ιστότοπους
// @description:el  Εμφανίζει τις πρωτότυπες διαστάσεις μιας εικόνας κατά την αιωρούμενη κατάσταση σε όλους τους ιστότοπους.
// @name:eo         Overlay de la originala bildogrando dum muso super ĉiuj retejoj
// @description:eo  Montras la originalajn dimensiojn de hovrigi bildo sur ĉiuj retejoj.
// @name:es         Superposición del tamaño original de la imagen al pasar el cursor en todos los sitios web
// @description:es  Muestra las dimensiones originales de una imagen al pasar el cursor en todos los sitios web.
// @name:fi         Päällekkäinen alkuperäinen kuvakoko hoverilla kaikilla verkkosivustoilla
// @description:fi  Näyttää alkuperäiset kuvakoot hoverilla kaikilla verkkosivustoilla.
// @name:fr         Incrustation de la taille de l'image originale au survol sur tous les sites web
// @description:fr  Affiche les dimensions d'origine d'une image en survol sur tous les sites web.
// @name:gl         Superposición do tamaño orixinal da imaxe ao pasar o rato en todos os sitios web
// @description:gl  Amosa as dimensións orixinais dunha imaxe ao pasar o rato en todos os sitios web.
// @name:he         חיבור גודל תמונה מקורי בעת העברה מעל לכל אתרי האינטרנט
// @description:he  מציג את הממדים המקוריים של תמונה בעת העברת עכבר מעל לכל אתרי האינטרנט.
// @name:hi         सभी वेबसाइटों पर होवर पर मूल छवि आकार ओवरले
// @description:hi  सभी वेबसाइटों पर होवर पर छवि के मूल आकार को दिखाता है।
// @name:hu         Eredeti képméret átlátszása az egérrel történő lebegés közben az összes webhelyen
// @description:hu  Az eredeti kép méreteinek megjelenítése az egérrel történő lebegés közben az összes webhelyen.
// @name:id         Overlay ukuran asli gambar saat mengarahkan kursor di semua situs web
// @description:id  Menampilkan dimensi asli gambar saat mengarahkan kursor di semua situs web.
// @name:is         Yfirbragð upprunalegs myndastærðar á sveiflum á öllum vefsíðum
// @description:is  Sýnir upprunalegar málmar á mynd á sveiflum á öllum vefsíðum.
// @name:it         Sovrapposizione delle dimensioni originali dell'immagine al passaggio del mouse su tutti i siti web
// @description:it  Visualizza le dimensioni originali di un'immagine al passaggio del mouse su tutti i siti web.
// @name:ja         すべてのウェブサイトでホバー画像の元のサイズをオーバーレイ表示
// @description:ja  すべてのウェブサイトでホバー画像の元の寸法を表示します。
// @name:km         បង្ហាញទំហំរូបភាពដែលបង្ហាញឡើងលើលំនាំដើមនៅលើវេបសាយទាំងអស់
// @description:km  បង្ហាញទំហំដែលមាននៅលើរូបភាពដែលបង្ហាញឡើងលើលំនាំដើមនៅលើវេបសាយទាំងអស់។
// @name:ko         모든 웹 사이트에서 이미지 원래 크기 오버레이 표시
// @description:ko  모든 웹 사이트에서 이미지를 가리킬 때 원래 크기를 표시합니다.
// @name:ms         Overlay saiz asal imej semasa hover di semua laman web
// @description:ms  Papar dimensi asal imej semasa hover di semua laman web.
// @name:mt         Overlay ta 'dimensioni oriġinali tal-immaġni fuq hover fuq siti kollha tal-web
// @description:mt  Juri d-dimensjonijiet oriġinali ta 'immaġni fuq hover fuq siti kollha tal-web.
// @name:nb         Overlegg av original bildestørrelse ved svev på alle nettsteder
// @description:nb  Viser original størrelse av et bilde når du svever over det på alle nettsteder.
// @name:nl         Overlay originele afbeeldingsgrootte bij zweven op alle websites
// @description:nl  Toont de originele afmetingen van een zwevende afbeelding op alle websites.
// @name:pl         Nakładka oryginalnego rozmiaru obrazu po najechaniu na wszystkie strony internetowe
// @description:pl  Wyświetla oryginalne wymiary obrazka po najechaniu na wszystkie strony internetowe.
// @name:pt         Sobreposição do tamanho original da imagem ao passar o mouse em todos os sites
// @description:pt  Exibe as dimensões originais de uma imagem ao passar o mouse em todos os sites.
// @name:ro         Suprapunere dimensiune originală imagine la survol pe toate site-urile web
// @description:ro  Afișează dimensiunile originale ale unei imagini la survol pe toate site-urile web.
// @name:ru         Отображение оригинального размера изображения при наведении на всех веб-сайтах
// @description:ru  Отображает оригинальные размеры изображения при наведении курсора на всех веб-сайтах.
// @name:sr         Преклоп оригиналне величине слике приликом левог приказа на свим веб локацијама
// @description:sr  Приказује оригиналне димензије слике приликом левог приказа на свим веб локацијама.
// @name:sv         Överlagring av originalbildstorlek vid svävning på alla webbplatser
// @description:sv  Visar originalstorlek på en bild när du svävar över den på alla webbplatser.
// @name:th         แสดงขนาดภาพต้นฉบับเมื่อโฮฟเวอร์บนเว็บไซต์ทั้งหมด
// @description:th  แสดงขนาดต้นฉบับของภาพเมื่อโฮฟเวอร์บนเว็บไซต์ทั้งหมด
// @name:tl         Overlay ng orihinal na sukat ng imahe sa hover sa lahat ng mga website
// @description:tl  Nagpapakita ng orihinal na sukat ng imahe sa hover sa lahat ng mga website.
// @name:tr         Tüm web sitelerinde üzerine gelindiğinde orijinal resim boyutunu göster
// @description:tr  Tüm web sitelerinde üzerine gelindiğinde resmin orijinal boyutlarını gösterir.
// @name:uk         Налагодження оригінального розміру зображення при наведенні на всі веб-сайти
// @description:uk  Відображає оригінальні розміри зображення при наведенні на всі веб-сайти.
// @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
// @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.
// @name:zh         鼠标悬停时在所有网站上显示原始图像尺寸
// @description:zh  在所有网站上显示悬停图像的原始尺寸。
// @match           *://*/*
// @version         1.0.2
// @author          BreatFR
// @copyright       2024, BreatFR (https://breat.fr)
// @grant           none
// @namespace       https://gitlab.com/breatfr
// @homepageURL     https://gitlab.com/breatfr/overlay-original-image-size-on-hover-on-all-websites
// @downloadURL     https://gitlab.com/breatfr/overlay-original-image-size-on-hover-on-all-websites/-/raw/main/js/overlay-original-image-size-on-hover-on-all-websites.user.js
// @updateURL       https://gitlab.com/breatfr/overlay-original-image-size-on-hover-on-all-websites/-/raw/main/js/overlay-original-image-size-on-hover-on-all-websites.user.js
// @supportURL      https://discord.gg/Q8KSHzdBxs
// @license         AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
// ==/UserScript==

(() => {
  "use strict";

  // Styles
  const toolbarStyles = {
    alignItems: "center",
    backdropFilter: "blur(1rem)",
    backgroundColor: "rgba(0, 0, 0, 0.4)",
    borderRadius: "5rem",
    color: "white",
    display: "none",
    fontSize: "1rem",
    left: "1rem",
    padding: "0.5rem 0.75rem",
    pointerEvents: "none",
    position: "absolute",
    textAlign: "center",
    top: "1rem"
  };

  // Create toolbar element
  const toolbar = document.createElement("div");
  Object.assign(toolbar.style, toolbarStyles);

  // Create image size label
  const imageSizeLabel = document.createElement("span");
  toolbar.appendChild(imageSizeLabel);

  document.body.appendChild(toolbar);

  const showImageSize = (img) => {
    const originImage = new Image();
    originImage.onload = () => {
      imageSizeLabel.textContent = `${originImage.naturalWidth} × ${originImage.naturalHeight}`;
      toolbar.style.display = "flex";
      img.parentNode.appendChild(toolbar);
    };
    originImage.src = img.src.replace(/([?&])name=([^&]*)/, "$1name=orig");
  };

  document.body.addEventListener("mouseover", (event) => {
    if (event.target.tagName === "IMG" && !event.target.src.endsWith(".svg")) {
      showImageSize(event.target);
    }
  });

  document.body.addEventListener("mouseout", (event) => {
    if (event.target.tagName === "IMG" && !toolbar.contains(event.relatedTarget)) {
      toolbar.style.display = "none";
    }
  });
})();