Home/ Questions/Q 973345
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T03:15:54+00:00

I am working with jquery. I have a main image. When I place the

  • 0

I am working with jquery. I have a main image.

When I place the mouse over the main image, I would like the following to happen.

Another image gets placed over the image, this image much smaller and be placed towards the bottom of the main image.

Also when the small image appears, if I click on it, an event is fired. Eg. alert box is triggered. Clicking on the small image should trigger the alert box, clicking the main image should not.

Could someone help me out with this please with jquery?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s the simplest example I could come up with. In future it might be better if you showed the code you already have. It barely requires any jquery.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
    $(function() {
        $('#image-2').click(function() { alert('meow'); });
    });
</script>
<style>
    #image-2 { position: absolute; left: 50px; bottom: 5px; display:none; }
    #container:hover #image-2 { display: block; }
</style>
</head>
<body>
<div id="container" style="position: relative">
<img id="image-1" src="http://www.freefoto.com/images/01/07/01_07_1---Pair-of-Dogs_web.jpg?&k=Pair+of+Dogs" />
<img id="image-2" src="http://www.coolbuddy.com/social/imgs/cat64x64.jpg" />
</div>
</body>
</html>
    • 0