function simple_tooltip(target_items, name){
$(target_items + " img").each(function(i){
$("body").append(
"<div class='" + name + "' id='" + $(this).attr('id') + i + "'><p>"
+ $(this).attr('alt')
+ "</p></div>"
);
var my_tooltip = $("#" + $(this).attr('id') + i);
$(this).removeAttr("alt").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+35, top:kmouse.pageY+35});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});
});
}
$(document).ready(function(){
simple_tooltip("#img_zone", "tooltip");
});
test.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>slide show moving picture small large</title>
<style>
.tooltip{
position:absolute;
left:-2000px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:620px;
}
.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:2px 7px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' src='tooltip.js'></script>
</head>
<body>
<marquee behavior="scroll" direction="left" width="500" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
<div id="img_zone">
<img id="img1" src="1_small.jpg" alt='<img src="1_large.jpg"><br>test1'>
<img id="img2" src="2_small.jpg" alt='<img src="2_large.jpg"><br>test2'>
<img id="img3" src="3_small.jpg" alt='<img src="3_large.jpg"><br>test3'>
</div>
</marquee>
</body>
</html>
No comments:
Post a Comment