img_alts

image_alts_bookmarklet.js

javascript:(function()%7Bconst%20altTags%20%3D%20document.querySelectorAll('%5Balt%5D')%3Bif%20(altTags.length%20%3D%3D%3D%200)%20%7Balert(%22Sem%20imagens%20com%20atributo%20%5C%22alt%5C%22%20para%20exibir.%22)%7D%20else%20%7Bconst%20newWindow%20%3D%20window.open(null%2C%20%22_blank%22%2C%20%22width%3D900%2Cscrollbars%3D1%22)%3BnewWindow.document.write('%3Cmain%3E')%3BaltTags.forEach((el)%3D%3E%7BnewWindow.document.write(%60%3Cdiv%3E%3Cimg%20src%3D%22%24%7Bel.src%7D%22%2F%3E%3Cp%3E%24%7Bel.alt%7D%3C%2Fp%3E%3C%2Fdiv%3E%60)%3B%7D)%3BnewWindow.document.write('%3C%2Fmain%3E')%3BnewWindow.document.write(%60%3Cstyle%3E*%20%7Bbox-sizing%3A%20border-box%3Bmargin%3A%200%3Bpadding%3A%200%3Bfont-size%3A%2014pt%3Bfont-family%3A%20sans-serif%3B%7Dhtml%2C%20body%20%7Bwidth%3A%20100%25%3B%7Dimg%20%7Bmax-width%3A%20100%25%3B%7Ddiv%20%7Bpadding%3A%2020px%3Bdisplay%3A%20block%3Bborder-bottom%3A%201px%20dashed%20%23333%3B%7Ddiv%3Alast-child%20%7Bborder-bottom%3A%20none%3B%7Dp%20%7Bmargin-top%3A%2020px%3B%7D%3C%2Fstyle%3E%60)%3B%7D%7D)()

image_alts_raw.js

const altTags = document.querySelectorAll('[alt]');

if (altTags.length === 0) {

  alert("Sem imagens com atributo \"alt\" para exibir.")
  
} else {

  const newWindow = window.open(null, "_blank", "width=900,scrollbars=1");

  newWindow.document.write('<main>');

  altTags.forEach((el)=>{
    newWindow.document.write(`<div><img src="${el.src}"/><p>${el.alt}</p></div>`);
  });

  newWindow.document.write('</main>');

  newWindow.document.write(`
  <style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14pt;
    font-family: sans-serif;
  }
  html, body {
    width: 100%;
  }
  img {
    max-width: 100%;
  }
  div {
    padding: 20px;
    display: block;
    border-bottom: 1px dashed #333;
  }
  div:last-child {
    border-bottom: none;
  }
  p {
    margin-top: 20px;
  }
  </style>
  `);
  
}