Rotating Banner / Image-Sequence
HTML
<div id="tooltipList">
<ul>
<li ><a class="tooltip" rel="Glimmer is great! Thanks
MIX Online.">I'm a text Tooltip. Hover over me for an
example.</a></li>
<li ><a class="tooltipImage" rel="images/100x100_oomph.jpg">And
me, I'm an Image Tooltip. Hover over me to see an
image.</a></li>
<li ><a class="tooltip" rel="Download Oomph: A
Microformats Toolkit at http://visitmix.com"><img src="images/home_sidebar_oomph.jpg"
height="90" width="355"></img></a></li>
<li ><a class="tooltipImage" rel="images/lab_experiments_flotzam.jpg"><img
src="images/home_sidebar_flotzam.jpg" height="90"
width="355"></img></a></li>
</ul>
</div>
CSS
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
color:#fff;
}
#tooltipList ul
{
margin:0px;
padding:0px;
}
#tooltipList li
{
display:block;
margin-bottom:20px;
}
jQuery
jQuery(function($) {var timer;
function mouseoverActiontooltip(event)
{
$("body").append("<p id='tooltip'>"+ this.rel + "</p>");
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}
function mouseoutActiontooltip(event)
{
$("#tooltip").remove();
}
function mousemoveActiontooltip(event)
{
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}
function mouseoverActiontooltipImage(event)
{
$("body").append("<p id='tooltip'><img src="+ this.rel + "></img></p>");
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}
function mouseoutActiontooltipImage(event)
{
$("#tooltip").remove();
}
function mousemoveActiontooltipImage(event)
{
$("#tooltip").css("left",(event.pageX + 20) + "px");
$("#tooltip").css("top",(event.pageY - 10) + "px");
}
$('.tooltip').bind('mouseover', mouseoverActiontooltip);
$('.tooltip').bind('mouseout', mouseoutActiontooltip);
$('.tooltip').bind('mousemove', mousemoveActiontooltip);
$('.tooltipImage').bind('mouseover', mouseoverActiontooltipImage);
$('.tooltipImage').bind('mouseout', mouseoutActiontooltipImage);
$('.tooltipImage').bind('mousemove', mousemoveActiontooltipImage);
});