jquery assistance with image on image
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.
Co开发者_运维百科uld 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>
加载中,请稍侯......
精彩评论