Overlegg av original bildestørrelse ved svev på alle nettsteder

Greasy Fork is available in English.
Overlegg av original bildestørrelse ved svev på alle nettsteder

Viser original størrelse av et bilde når du svever over det på alle nettsteder.
Visit the author's site for support, ask a question, post a review, or report the script.
Wrap lines
// ==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           *://*/*
// @exclude         *://beeg.com/*
// @exclude         *://kindroid.ai/*
// @exclude         *://*.mage.space/*
// @exclude         *://*.manyvids.com/*
// @exclude         *://*.xvideos.com/*
// @exclude         https://www.google.com/recaptcha/*
// @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
// @version         1.0.9
// @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
// @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: "5em",
    color: "white",
    display: "none",
    fontSize: "1.2rem",
    margin: "0 1em",
    padding: ".5em .75em",
    pointerEvents: "none",
    position: "absolute",
    textAlign: "center",
    whiteSpace: "nowrap !important",
    width: "max-content",
    wordBreak: "keep-all !important",
    zIndex: 1000
  };
 
  const innerToolbarStyles = {
    display: "flex",
    width: "100%",
    justifyContent: "flex-start"
  };
 
  // Create toolbar element
  const toolbar = document.createElement("div");
  Object.assign(toolbar.style, toolbarStyles);
  console.log("Toolbar created:", toolbar);
 
  // Create inner toolbar element
  const innerToolbar = document.createElement("div");
  Object.assign(innerToolbar.style, innerToolbarStyles);
  toolbar.appendChild(innerToolbar);
 
  // Create image size label
  const imageSizeLabel = document.createElement("span");
  innerToolbar.appendChild(imageSizeLabel);
 
  // Append the toolbar to the body once
  document.body.appendChild(toolbar);
  console.log("Toolbar appended to body");
 
  const findImage = (element) => {
    if (element.tagName === "IMG") {
      return element;
    }
    return null;
  };
 
  const showImageSize = (img) => {
    console.log("Showing image size for:", img);
    if (img.src.endsWith(".svg")) {
      // For SVG images, use the width and height attributes
      imageSizeLabel.textContent = `${img.naturalWidth} × ${img.naturalHeight}`;
      toolbar.style.display = "flex";
      updateToolbarPosition(img);
    } else {
      const originImage = new Image();
      originImage.onload = () => {
        imageSizeLabel.textContent = `${originImage.naturalWidth} × ${originImage.naturalHeight}`;
        toolbar.style.display = "flex";
        updateToolbarPosition(img);
      };
      originImage.src = img.src.replace(/([?&])name=([^&]*)/, "$1name=orig");
    }
  };
 
  const updateToolbarPosition = (img) => {
    requestAnimationFrame(() => {
      const rect = img.getBoundingClientRect();
      const windowWidth = window.innerWidth;
 
      // Default positioning
      let left = rect.left + window.scrollX;
      innerToolbar.style.flexDirection = "row";
 
      // Check if the toolbar will overflow the right edge of the screen
      if (left + toolbar.offsetWidth > windowWidth) {
        // Switch to right alignment
        left = rect.right + window.scrollX - toolbar.offsetWidth;
        innerToolbar.style.flexDirection = "row-reverse";
      }
 
      toolbar.style.left = `${left}px`;
      toolbar.style.top = `${rect.top + window.scrollY + 16}px`;
    });
  };
 
  const hideImageSize = () => {
    console.log("Hiding image size");
    toolbar.style.display = "none";
  };
 
  document.body.addEventListener("mouseover", (event) => {
    const img = findImage(event.target);
    if (img) {
      showImageSize(img);
    }
  });
 
  document.body.addEventListener("mouseout", (event) => {
    const img = findImage(event.target);
    if (img && !toolbar.contains(event.relatedTarget)) {
      hideImageSize();
    }
  });
 
  document.body.addEventListener("mousemove", (event) => {
    const img = findImage(event.target);
    if (img) {
      updateToolbarPosition(img);
    }
  });
})();