Hi, I have my own banner with the following code
body, html { width: 100%; height: 100%; margin: 0; font-family: Arial, serif; color: #003C78; } a { color: #003C78; } .banner-wrap { display: flex; width: 728px; height: 90px; } .page-container { position: relative; overflow: hidden; width: 100%; } .page-container img { width: 100% } .image-wrapper, .text-wrapper { position: absolute; height: auto; width: 411px; } .image-wrapper { top: 0; right: -155px; z-index: 2; animation: slideLeft 14.5s infinite ease 0s normal forwards; } .image-wrapper img { position: absolute; left: 0px; top: -100px; width: 150% } .text-wrapper h1, .text-wrapper h2 { position: absolute; left: 90px; padding: 0; opacity: 0; z-index: 3; font-size: 1.3em; } .text-wrapper h1 { animation: fade infinite 14.5s linear 0s normal forwards; animation-delay: 4s; top: 15px; } .text-wrapper h2 { animation: fadeNew infinite 14.5s linear 0s normal forwards; animation-delay: 7.8s; } .text-wrapper img { position: absolute; left: 50px; bottom: 30px; width: 468px; height: 180px } .red-wrapper { position: absolute; bottom: 0px; z-index: 9; right: -600px; color: #fff; animation: slideLeftNew 14.5s infinite ease 0s normal forwards; animation-delay: 7s; padding-left: 15px; border-bottom: 100px solid #E6000A; border-right: 50px solid transparent; height: 0; width: 120px; } .red-wrapper h3 { font-size: 1.1em; font-weight: 300; margin-top: 26px; } .logo img { width: 80px; height: auto; margin: 17px; } img.kitchen { transform: translateY(-40%); -webkit-transform: translateY(-40%); -ms-transform: translateY(-40%); width: 63%; position: absolute; left: -18px; animation: moveUp 14.5s infinite ease 0s normal forwards; } img.wall { width: 11%; position: absolute; left: 0; z-index: 9; } @keyframes slideLeft { 20.95% { right: -155px } 85%, 27.19% { right: 135px; } } @keyframes slideLeftNew { 15.95% { right: -220px } 20.19%, 37% { right: 0 } 42% { right: -220px; } } @keyframes fade { 0% { opacity: 0 } 23%, 14.38% { opacity: 1 } 26% { opacity: 0 } } @keyframes fadeNew { 0% { opacity: 0 } 30%, 14.38% { opacity: 1 } 33% { opacity: 0 } } @keyframes moveUp { 0% { transform: translateY(-40%); } 50% { transform: translateY(-45%); } }
<!DOCTYPE html> <html> <head> <title>Hawa Sliding Solutions</title> <meta content="text/html;charset=UTF-8" http-equiv="content-type"> </head> <body> <a href="http://hawa-suono.com/" target="_blank"> <div class="banner-wrap"> <div class="logo"><img src="logo.png"></div> <div class="page-container"> <div class="text-wrapper"> <h1>Den Alltag auf stumm schalten.</h1> <h2>Hawa Suono – die schalldichte Lösung.</h2> </div> <img class="wall" src="wall.png" /> <img class="kitchen" src="kitchen3.jpg" /> <div class="image-wrapper"><img src="tuer2.jpg" /></div> <div class="red-wrapper"> <h3>Jetzt die Weltneuheit entdecken.</h3> </div> </div> </div> </a> </body> </html>
Now I need to check whether the banner is loaded and working, and if not, then I need to place another image instead of the banner. I tried a lot of things to check if there is an image, check if css is loaded, check if the document is loaded, but this solution cannot work, because I only have to check if the banner is loaded, and not the whole document, So, now I am folded and do not know what to do next. Also I can not use jquery, only pure javascript. Any help? Thanks
source share