<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title>Активные темы</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#slider_wrap {
margin:20px;
overflow:hidden;
position: relative;
width: 555px;
height: 345px;
padding:55px;
border: #B4B4C4 dashed 1px;
}
#slider:hover #cursor{
opacity:1.0;
}
#slider{
width: 100%;
height: 100%;
border: #B7BEBE outset 2px;
}
#cursor {
opacity:0.0;
z-index:100;
position: absolute;
cursor:crosshair!important;
background-image:url(http://s1.uploads.ru/i/NFXCp.png);
width: 105px; height: 145px;
transition-property:opacity;
transition-duration: 0.3s;
-o-transition-property:opacity;
-o-transition-duration: 0.3s;
-moz-transition-property:opacity;
-moz-transition-duration: 0.3s;
-webkit-transition-property:opacity;
-webkit-transition-duration: 0.3s;
-ms-transition-property:opacity; /* IE9+ */
-ms-transition-duration: 0.06s;
}
</style>
</head>
<body>
<div id="slider_wrap">
<div id="slider">
<img src="http://s1.uploads.ru/i/MxNcZ.png" width=100% height=100%/>
<span id="cursor"></span>
</div>
</div>
<script type="text/javascript">
var Cur=$('#cursor');
$('#slider').mousemove(function(e){
Cur.css({
'left':parseInt(e.pageX-67)+'px',
'top':parseInt(e.pageY-92)+'px'
});
});
</script>
</body>
</html>