CODEWITHSUNDEEP
javascriptphphtml
Mohammad
Mohammad

Reputation: 113

Mouse over the image with magnifying glass in html

I added a magnifying glass for images in my webpage using the following instruction: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp

The magnified box stays on the image even if the mouse is not over it. How can I revise this in a way that the magnifying glass appears only when the mouse is over it?

Thanks,

Upvotes: 4

Views: 7043

Answers (3)

DeclanMcD
DeclanMcD

Reputation: 1586

You need to add a onmouseout event to the magnifying glass div and an id to identify it, like this:

  glass = document.createElement("DIV");
  glass.id="glassId";
  glass.setAttribute("onmouseout", "hide()");

Then add a show and hide function like this:

function hide(){
    glass = document.getElementById("glassId").style.display = "none";
}
function show(){
    glass = document.getElementById("glassId").style.display = "block";
}

Finally add the mouseover event to the image itself:

onmouseover="show()"

This will then hide the glass when the mouse leaves the glass (not the image) and show it when the mouse goes back into the image.

Upvotes: 1

MMallette
MMallette

Reputation: 134

You can do this all in CSS using hover, no need for javascript copy the style sheet from below.

<style>
* {box-sizing: border-box;}
.img-magnifier-container {
  position:relative;
  cursor:none;
}
.img-magnifier-container:hover .img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;
  display:block;
}
.img-magnifier-glass {
  display:none;
}

</style>

Upvotes: 2

Gorgamite
Gorgamite

Reputation: 237

In HTML, there is an event called onmouseleave. You could make the element call a javascript function when your mouse leaves the image. Here's the link for more information: https://www.w3schools.com/jsref/event_onmouseleave.asp Here's the basics of it: onmouseleave="functionName()"

Upvotes: 1

Related Questions