how to replace image by alternative div

Question

ii have an ebook website and i would like to replace the image by a div when the image does not display. the div will contain a background image with the title of the book.like the image here. enter image description here

this is the code i used to obtain this

  <a href="#popup1">
     <img src="uploadimages/<?=$image['image']?>" alt="<?=$image['titre']?> " />

     <div class="altimage">
     <div class="alttitle"><?=$image['titre']?></div>

        <img src="uploadimages/couvalt.png"/>            
     </div>
  </a>

But i don't want to show the two in same time but the second if the first doest not display. I have found this code on the forum

 <img src="https://imageurl.com" alt="Image not found" onerror="this.src='https://alternativeimageurl.com'" />

but it only allow me to put an alternative image but not an alternative image with a text. thanks in advance for your help.

Answer 1

The onerror there is an event handler. This allows you to run any code.

 function not_found(elem) { elem.src = 'https://picsum.photos/200'; var caption = elem.closest('.wrapper').querySelector('.caption') caption.classList.add("not-found"); caption.innerText = elem.getAttribute("alt"); caption.style.display = 'block'; }

 .wrapper { display: inline-block; position: relative; }.caption { position: absolute; text-align: center; left: 0; top: 50%; right: 0; display: none; color: white; }

 <div class="wrapper"> <img src="https://imageurl.com" alt="Image not found" onerror="not_found(this)" /> <div class="caption"></div> </div>