Member Avatar for mldardy
mldardy -1 Light Poster

I am starting a website where an image shows on the home page and when I scroll to hover over the image it opens a newpage. I’m trying to figure out a way to do a slow dissolve from the home page to new page and also if the user has a pop up blocker on how to get around from home page to new page that if there is a way. Here is the code I have now html:

 <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Daily Process</title> <script src="Scripts/jquery-1.10.2.min.js"></script>"> <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" /> </head> <body> <div > 

            <img src="images/White%20Daily%20Sig.png" class="center"/> </div> </body> <script>
       $(function () {
       var count = 0;
       $("img").mouseenter(function () {
         if (count == 0) {
            setTimeout(function () {
                window.open("/About.aspx");
                    },5000)

            count++;
        } 

     })
    })
</script> </html>

and css:

img {
   /*max-width: 200%;*/
    width: 80%;
    height: auto;
    background-color: #000;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic
}
.center {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 95%;
}
  • 1 Contributor
  • 0 Replies
  • 404 Views

Dani AI

Generated

The snippet from has two likely causes of trouble: a small HTML syntax error (there is an extra double-quote after the jQuery script tag which will break parsing) and the use of window.open inside a delayed mouseenter handler. Calling window.open is what popup blockers target, and hover-driven navigation is fragile for keyboard and touch users. A safer, more reliable pattern is to make the image a real link (so it is focusable/keyboard-accessible), animate a full-screen fade overlay, then navigate the same tab with location.href (or follow the anchor). Prefer click/pointer events for mobile/keyboard and keep delays short.

Example (minimal pattern)

HTML:

<a class="fade-link" href="/About.aspx">
  <img class="fade-target" src="images/WhiteDailySig.png" alt="Daily Process logo">
</a>

<div id="fade-overlay" aria-hidden="true"></div>

CSS:

#fade-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
  z-index: 9999;
}
.fade-out #fade-overlay { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  #fade-overlay { transition: none; opacity: 1; }
}

JS (vanilla):

(function(){
  const ANIM_MS = 600;
  document.querySelectorAll('.fade-link').forEach(link=>{
    const img = link.querySelector('.fade-target');
    if(!img) return;

    const navigate = href => {
      document.documentElement.classList.add('fade-out');
      setTimeout(()=> location.href = href, ANIM_MS);
    };

    link.addEventListener('click', e=>{
      e.preventDefault();
      navigate(link.href);
    }, {once:true});

    img.addEventListener('mouseenter', ()=> navigate(link.href), {once:true});

    // optional: trigger when scrolled into view (IntersectionObserver)
    if ('IntersectionObserver' in window) {
      const io = new IntersectionObserver((entries,o)=>{
        if (entries.some(e=> e.isIntersecting)) { o.disconnect(); navigate(link.href); }
      }, {threshold:0.6});
      io.observe(img);
    }
  });
})();

Practical notes and troubleshooting

  • Remove the stray quote in the script tag and ensure scripts run after DOM (or use DOMContentLoaded).
  • Use location.href / anchor navigation instead of window.open to avoid popup blockers.
  • Hover is not available on touch; include click/pointer handlers for mobile and keyboard.
  • Use {once:true} or disconnect observers to avoid repeated navigations.
  • Honor prefers-reduced-motion for accessibility and keep fade 300–800 ms.

This approach preserves accessibility, avoids popup blockers, and gives a smooth dissolve before the new page loads.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.