JS mouse over the display large figure code to provide a JS mouse over the display of large code, like a lot of sites will have a mouse on the small map to show the big picture effect, especially the mall site use a lot, below we also look at it.
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >
<html xmlns= "http://www.jzread.com/1999/xhtml" >
<head>
<title> mouse over show big picture </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
</head>
<body>
<div class= "Latestweb" >
<ul>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/20095121750198009074_small.jpg" Onmouseo tutorial ver= " ToolTip (' <img src=/effect/images/201010090045/20095121750198009074.jpg> ') "onmouseout=" tooltip () "></ A></div>
</li>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/2009512172933475478_small.jpg" ToolTip (' <img src=/effect/images/201010090045/2009512172933475478.jpg> ') "onmouseout=" tooltip () "></a ></div>
</li>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/200957188213477090_small.jpg" onmouseover= "tooltip" (' <img src=/effect/images/201010090045/200957188213477090.jpg> ') "onmouseout=" tooltip () "></a>< /div>
</li>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/2009511102511591969_small.jpg" ToolTip (' <img src=/effect/images/201010090045/2009511102511591969.jpg> ') "onmouseout=" tooltip () "></a ></div>
</li>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/2009511956153474660_small.jpg" ToolTip (' <img src=/effect/images/201010090045/2009511956153474660.jpg> ') "onmouseout=" tooltip () "></a ></div>
</li>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/20095121752382849770_small.jpg" ToolTip (' <img src=/effect/images/201010090045/20095121752382849770.jpg> ') "onmouseout=" tooltip () "></ A></div>
</li>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/200955181403758690_small.jpg" onmouseover= "tooltip" (' <img src=/effect/images/201010090045/200955181403758690.jpg> ') "onmouseout=" tooltip () "></a>< /div>
</li>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/2009551813457815940_small.jpg" ToolTip (' <img src=/effect/images/201010090045/2009551813457815940.jpg> ') "onmouseout=" tooltip () "></a ></div>
</li>
<li class= "" >
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/200955181308903992_small.jpg" onmouseover= "tooltip" (' <img src=/effect/images/201010090045/200955181308903992.jpg> ') "onmouseout=" tooltip () "></a>< /div>
</li>
<li class= ""
<div style= "WIDTH:128PX;HEIGHT:126PX;" ><a href= "#" ><img src= "/effect/images/201010090045/200955181403758690_small.jpg" onmouseover= "tooltip" (' <img src=/effect/images/201010090045/200955181403758690.jpg> ') "onmouseout=" tooltip () "></a>< /div>
</LI>
</ul>
</div>
<script language= "Web Effects"
function Getviewportheight () {
if (window.innerheight!=window.undefined) return window.innerheight;
if (document.compatmode== ' CSS Tutorial 1compat ') return document.documentelement.clientheight;
if (document.body) return document.body.clientheight;
return window.undefined;
}
function Getviewportwidth () {
if (window.innerwidth!=window.undefined) return window.innerwidth;
if (document.compatmode== ' Css1compat ') return document.documentelement.clientwidth;
if (document.body) return document.body.clientwidth;
return window.undefined;
}
/**
* Gets the real scroll top
*/
function Getscrolltop () {
if (self.pageyoffset)//All except Explorer
{
return self.pageyoffset;
}
else if (document.documentelement && document.documentelement.scrolltop)
//Explorer 6 strict
{
return document.documentelement.scrolltop;
}
else if (document.body)//All other explorers
{
return document.body.scrolltop;
}
}
function Getscrollleft () {
if (self.pagexoffset)//All except Explorer
{
return self.pagexoffset;
}
else if (document.documentelement && document.documentelement.scrollleft)
//Explorer 6 strict
{
return document.documentelement.scrollleft;
}
else if (document.body)//All other explorers
{
return document.body.scrollleft;
}
}
//--Initialization Variable--
var rt=true;//allows image transitions
var bt=true;//allows images to fade in and out
var tw=150;//tip box Width
var endaction=false;//end Animation
var ns4 = document.layers;
var ns6 = document.getElementById &&!document.all;
var ie4 = document.all;
offsetx = 10;
offsety = 20;
var tooltips tutorial tyle= "";
function inittooltips ()
{
Tempdiv = document.createelement ("div");
tempdiv.id = "Tooltiplayer";
tempdiv.style.position = "differs";
Tempdiv.style.display = "None";
Document.body.appendchild (TEMPDIV);
if (ns4| | ns6| | IE4)
{
if (ns4) Tooltipstyle = Document.tooltiplayer;
else if (NS6) Tooltipstyle = document.getElementById ("Tooltiplayer"). Style;
else if (ie4) tooltipstyle = Document.all.tooltiplayer.style;
if (ns4) document.captureevents (event.mousemove);
Else
{
tooltipstyle.visibility = "visible";
Tooltipstyle.display = "None";
}
document.onmousemove = Movetomouseloc;
}
}
function tooltip (msg, FG, BG)
{
try {
if (Tooltip.arguments.length < 1)//Hide
{
if (NS4)
{
tooltipstyle.visibility = "hidden";
}
Else
{
//--image transition, fade processing--
if (!endaction) {tooltipstyle.display = ' none ';}
if (RT) document.all ("Msg1"). Filters[1].apply ();
if (BT) document.all ("Msg1"). Filters[2].apply ();
document.all ("Msg1"). filters[0].opacity=0;
if (RT) document.all ("Msg1"). Filters[1].play ();
if (BT) document.all ("Msg1"). Filters[2].play ();
if (RT) {
if (document.all ("MSG1"). Filters[1].status==1 | | document.all ("MSG1"). filters[1].status==0) {
Tooltipstyle.display = "None";}
}
if (BT) {
if (document.all ("MSG1"). Filters[2].status==1 | | document.all ("MSG1"). filters[2].status==0) {
Tooltipstyle.display = "None";}
}
if (!rt &&!bt) Tooltipstyle.display = "None";
//----------------------
}
}
else//show
{
if (!FG) FG = "#777777";
if (!BG) bg = "#eeeeee";
var content =
' <table id= "MSG1" name= "MSG1" border= "0" cellspacing= "0" cellpadding= "1" bgcolor= "' + FG + '" class= "trans_msg" ><td> ' +
' <table border= "1" cellspacing= "2" cellpadding= "3" bgcolor= "' + BG +
' "><td><font face=" Arial "color=" + FG +
' "size="-2 ">" + msg +
' </font></td></table></td></table> ';
if (NS4)
{
tooltipstyle.document.write (content);
Tooltipstyle.document.close ();
tooltipstyle.visibility = "visible";
}
if (NS6)
{
document.getElementById ("Tooltiplayer"). innerHTML = content;
tooltipstyle.display= ' block '
}
if (IE4)
{
document.all ("Tooltiplayer"). Innerhtml=content;
tooltipstyle.display= ' block '
//--image transition, fade in--
var cssopaction=document.all ("Msg1"). Filters[0].opacity
document.all ("Msg1"). filters[0].opacity=0;
if (RT) document.all ("Msg1"). Filters[1].apply ();
if (BT) document.all ("Msg1"). Filters[2].apply ();
document.all ("Msg1"). Filters[0].opacity=cssopaction;
if (RT) document.all ("Msg1"). Filters[1].play ();
if (BT) document.all ("Msg1"). Filters[2].play ();
//----------------------
}
}
} catch (e) {}
}
function Movetomouseloc (e)
{
var scrolltop = Getscrolltop ();
var scrollleft = Getscrollleft ();
if (ns4| | NS6)
{
x = E.pagex + scrollleft;
y = e.pagey-scrolltop;
}
Else
{
x = Event.clientx + scrollleft;
y = event.clienty;
}
if (X-scrollleft > Getviewportwidth ()/2) {
x = X-document.getelementbyid ("Tooltiplayer"). Offsetwidth-2 * OFFSETX;
}
if ((Y+document.getelementbyid ("Tooltiplayer"). Offsetheight+offsety) >getviewportheight ()) {
y = getviewportheight ()-document.getelementbyid ("Tooltiplayer"). Offsetheight-offsety;
}
Tooltipstyle.left = (x + offsetx) + ' px ';
Tooltipstyle.top = (y + offsety + scrolltop) + ' px ';
return true;
}
inittooltips ();
<style type= "Text/css"
*{padding:0;margin:0;
Html{overflow:-moz-scrollbars-vertical;}
body{font:12px/22px "song Body"; Word-break:break-all;text-align:left;background: #c0c0c0; color: #4e4e4e;}
Ul,li{list-style:none;}
A{color: #333; text-decoration:none;}
A:hover{color: #ff722d; text-decoration:none;}
img{border:0;}
a img,a:hover img{border:0;}
. latestweb{width:560px;margin:10px auto 0;}
. Latestweb ul{overflow:hidden;_height:1%;}
. Latestweb li{float:left;border:1px solid #ebeaea; width:150px;padding:17px 0 14px 22px;margin:14px 18px 0 0;}
. Trans_msg{filter:alpha (opacity=100,enabled=1) Revealtrans (duration=.2,transition=1) Blendtrans (duration=.2) ;}
div.bodycontent{font-family:arial,helvetica,sans-serif;padding:0 10px 10px 13px;color: #555; line-height:22px;text-align:justify;text-justify:inter-ideograph;}
Div.bodycontent ul{margin-left:0px;}
</style>
<script language= "javascript"
function tooltip (str) {
}
</script>
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
