问题描述:

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?

网友答案:

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>
相关阅读:
Top