Add Multiple Links with image that has Mouseover Functions

Question

I have already searched the site but can't seem to find code that works. I have an image in which I want to add multiple links so that visiters are able to click on different areas of the image. However I also want the image to tranform while moving the cursor across the image.

Basically I want a combination of this solution (change image on hover with image map) and this (When hovering over image, only display the part where the cursor is over it)

I have achieve both seperately, but now I need to combine them. Is this possible or is there an alternative code? I'm assuming I need to add code to the script but I don't know what to add.

Any help would be appreciated!

Here's the relevant code I have. I also tried putting the map, img, and area tags inside the DIV but that did not work.

 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script async="" src="customCursor.js" type="text/javascript"></script>
        <script>
            window.onload = function() {
                const div = document.querySelector('.hole');
                    let isIn = false;
                div.addEventListener('mouseover', function() {
                    isIn = true;
                    });
                div.addEventListener('mouseout', function() {
                    isIn = false;
                    });
                div.addEventListener('mousemove', function() {
                    if (isIn) {
                div.style.setProperty('--x', event.clientX + 'px');
                div.style.setProperty('--y', event.clientY + 'px');
                        }
                    });
                }
        </script>
<body>

    <div class="hole"></div>
    
 
<img src="/img/titlewt.png" usemap="#map" class="map"/>
       <map name="map">
  <area class="just" shape="rect" coords="1160,600,1280,1380" href=" about me.htm"
        />
  <area shape="rect" coords="1650,600,2150,1240" href="universal.htm" 
        />
    </map>

    <script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
    
    $('area').on('click', function() {
        alert($(this).attr('alt') + ' clicked');
    });
});
</script>
</body>

CSS

img {
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border: 10px solid;
    border-radius: 4px;
    margin: 1.3em auto;
    max-width: 100%;
}
map {
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border: 10px solid;
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 100%;
}

.hole {
  background-image: url(/img/titlefill.png);
  background-size: cover;
  --x: 200px;
  --y: 150px;
  width: 100wh;
  height: 100vh;
  position: relative;
}

.hole::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(/img/titlewt.png?grayscale);
  background-size: cover;
  z-index: 1;
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
  -webkit-mask-image: radial-gradient(200px at var(--x) var(--y), transparent 95%, black 100%);
  mask-image: radial-gradient(200px at var(--x) var(--y), transparent 95%, black 100%);
}

Add Multiple Links with image that has Mouseover Functions

0 Answers0