Question 337061 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to have a webpage work as a background to a cursor?

I’m new to working in web development and I was trying to build a project. Basically, the project would enable the user to see a preview of a webpage if they were to hover their cursor over a link. I keep hovering my cursor over an example link (a link to Google.com), but it wont show a webpage. Is there a way to accomplish this using JavaScript?

I’ve tried to use the mouseover and mouseout methods in my HTML code as well as wrote a function in JavaScript that tries to recognize and take only anchor tags (links), and open them in a background to the cursor. The webpage would look like a background image to the cursor when it hovers over a link.

Tags:

2

Answers


  1. 0

    This is my code. If you solve your problem with this code, let me know. It is my pleasure.

    When you are on link, mouseover event is emitted, and set left, right, and src to previewIframe. So you can see a small iframe at cursor position.

    But some of urls require to open in the same origin. therefore those site cannot preview. that example is https://www.google.com.

    But others work well.

    Thanks.

    <!DOCTYPE html>
<html>
<head>
    <title>Link Preview Example</title>
    <style>
        #preview {
            width: 600px;
            height: 400px;
            position: absolute;
            display: none;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<a href="https://www.example.com" target="_blank" class="preview-link">Hover Over Me!</a>

<iframe id="preview"></iframe>

<script>
    document.querySelectorAll('.preview-link').forEach(link => {
        link.addEventListener('mouseover', function(e) {
            const previewIframe = document.getElementById('preview');
            previewIframe.style.display = 'block';
            previewIframe.style.left = e.pageX + 'px';
            previewIframe.style.top = e.pageY + 'px';
            previewIframe.src = this.getAttribute('href');
        });

        link.addEventListener('mouseout', function() {
            const previewIframe = document.getElementById('preview');
            previewIframe.style.display = 'none';
            previewIframe.src = '';
        });
    });
</script>

</body>
</html>
    Login or Signup to reply.
  2. 0

    This is possible and for example in this Codepen sketch you can see it in action, both prefetched and live loaded on hover: https://codepen.io/shaneapen/pen/bdrGRO

    This approach loads the linked website in an iframe that is scaled to the desired preview size. It is shown on the "mouseenter" event and anchored on the <a> element (and not the mouse cursor).

    It is a jQuery-Plugin. Using it would look something like this, of course with the element selectors referring to your <a> elements:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <link href="https://rawgit.com/shaneapen/Image-Preview-for-Links/master/image_preview_for_links.css" rel="stylesheet"> 
  <!-- MiniPreview stuff here -->
  <link href="./jquery.minipreview.css" rel="stylesheet">
  <script src="./jquery.minipreview.js"></script>
  <script type="text/javascript">
    $(function() {
                $('#p1 a').miniPreview({ prefetch: 'pageload' });
                $('#p2 a').miniPreview({ prefetch: 'parenthover' });
                $('#p3 a').miniPreview({ prefetch: 'none' });
            });
  </script> <script src="https://rawgit.com/shaneapen/Image-Preview-for-Links/master/image_preview_for_links.js"></script>

    The code of the author can be found on Github.

    Keep in mind that prefetching all linked pages can put a lot of hidden load on your user’s device (if prefetched), the pages may show up only after some time (if not prefetched) and thus irritating the user and that on mobile, while it generally works, it also can interfere with scrolling.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search