鼠标悬停显示图片

本文介绍了一种使用CSS实现鼠标悬停时显示图片的方法,通过JavaScript跟踪鼠标位置,动态调整内容层的位置。文章还展示了如何配置各种参数以自定义弹出窗口的样式,包括背景颜色、边框、文字颜色等。
摘要由CSDN通过智能技术生成

/*
对象跟随鼠标
document.οnmοusemοve=function()  
  {  
 
  var offsetX=document.body.scrollLeft>0?document.body.scrollLeft:0;  
  var offsetY=document.body.scrollTop>0?document.body.scrollTop:0;  
  overDiv.style.pixelTop=event.clientY+offsetY;  
  overDiv.style.pixelLeft=event.clientX+offsetX; 
  }
*/ 
/*

内容层名:
<div id="overDiv" style="Z-INDEX: 1000; VISIBILITY: hidden; POSITION: absolute"></div>
调用
 <a href="#" οnmοuseοver="return overlib('<img src=http://www.ewgo.cn/Images/ewgo.jpg>', CAPTION, '纹眉机',FGCOLOR, '#fcfcfc', BGCOLOR, '#0080C0', CAPCOLOR, '#ffffff', BORDER, 2, CLOSETEXT, 'Close');" οnmοuseοut="nd();"><img src="Admin/pic/icon-viewpic.gif" border="0"></a>
*/

var INARRAY  = 1;
var CAPARRAY  = 2;
var STICKY  = 3;
var BACKGROUND  = 4;
var NOCLOSE  = 5;
var CAPTION  = 6;
var LEFT  = 7;
var RIGHT  = 8;
var CENTER  = 9;
var OFFSETX  = 10;
var OFFSETY  = 11;
var FGCOLOR  = 12;
var BGCOLOR  = 13;
var TEXTCOLOR  = 14;
var CAPCOLOR  = 15;
var CLOSECOLOR  = 16;
var WIDTH  = 17;
var BORDER  = 18;
var STATUS  = 19;
var AUTOSTATUS  = 20;
var AUTOSTATUSCAP = 21;
var HEIGHT  = 22;
var CLOSETEXT  = 23;
var SNAPX  = 24;
var SNAPY  = 25;
var FIXX  = 26;
var FIXY  = 27;
var FGBACKGROUND = 28;
var BGBACKGROUND = 29;
var PADX  = 30; // PADX2 out
var PADY  = 31; // PADY2 out
var FULLHTML  = 34;
var ABOVE  = 35;
var BELOW  = 36;
var CAPICON  = 37;
var TEXTFONT  = 38;
var CAPTIONFONT  = 39;
var CLOSEFONT  = 40;
var TEXTSIZE  = 41;
var CAPTIONSIZE  = 42;
var CLOSESIZE  = 43;
var FRAME  = 44;
var TIMEOUT  = 45;
var FUNCTION  = 46;
var DELAY  = 47;
var HAUTO  = 48;
var VAUTO  = 49;
var CLOSECLICK  = 50;
var CSSOFF  = 51;
var CSSSTYLE  = 52;
var CSSCLASS  = 53;
var FGCLASS  = 54;
var BGCLASS  = 55;
var TEXTFONTCLASS = 56;
var CAPTIONFONTCLASS = 57;
var CLOSEFONTCLASS = 58;
var PADUNIT  = 59;
var HEIGHTUNIT  = 60;
var WIDTHUNIT  = 61;
var TEXTSIZEUNIT = 62;
var TEXTDECORATION = 63;
var TEXTSTYLE  = 64;
var TEXTWEIGHT  = 65;
var CAPTIONSIZEUNIT = 66;
var CAPTIONDECORATION = 67;
var CAPTIONSTYLE = 68;
var CAPTIONWEIGHT = 69;
var CLOSESIZEUNIT = 70;
var CLOSEDECORATION = 71;
var CLOSESTYLE  = 72;
var CLOSEWEIGHT  = 73;



// DEFAULT CONFIGURATION
// You don't have to change anything here if you don't want to. All of this can be
// changed on your html page or through an overLIB call.

// Main background color (the large area)
// Usually a bright color (white, yellow etc)
if (typeof ol_fgcolor == 'undefined') { var ol_fgcolor = "#CCCCFF";}
 
// Border color and color of caption
// Usually a dark color (black, brown etc)
if (typeof ol_bgcolor == 'undefined') { var ol_bgcolor = "#333399";}
 
// Text color
// Usually a dark color
if (typeof ol_textcolor == 'undefined') { var ol_textcolor = "#000000";}
 
// Color of the caption text
// Usually a bright color
if (typeof ol_capcolor == 'undefined') { var ol_capcolor = "#FFFFFF";}
 
// Color of "Close" when using Sticky
// Usually a semi-bright color
if (typeof ol_closecolor == 'undefined') { var ol_closecolor = "#9999FF";}

// Font face for the main text
if (typeof ol_textfont == 'undefined') { var ol_textfont = "宋体";}

// Font face for the caption
if (typeof ol_captionfont == 'undefined') { var ol_captionfont = "宋体";}

// Font face for the close text
if (typeof ol_closefont == 'undefined') { var ol_closefont = "宋体";}

// Font size for the main text
// When using CSS this will be very small.
if (typeof ol_textsize == 'undefined') { var ol_textsize = "2";}

// Font size for the caption
// When using CSS this will be very small.
if (typeof ol_captionsize == 'undefined') { var ol_captionsize = "2";}

// Font size for the close text
// When using CSS this will be very small.
if (typeof ol_closesize == 'undefined') { var ol_closesize = "1";}

// Width of the popups in pixels
// 100-300 pixels is typical
if (typeof ol_width == 'undefined') { var ol_width = "200";}

// How thick the ol_border should be in pixels
// 1-3 pixels is typical
if (typeof ol_border == 'undefined') { var ol_border = "1";}

// How many pixels to the right/left of the cursor to show the popup
// Values between 3 and 12 are best
if (typeof ol_offsetx == 'undefined') { var ol_offsetx = 10;}
 
// How many pixels to the below the cursor to show the popup
// Values between 3 and 12 are best
if (typeof ol_offsety == 'undefined') { var ol_offsety = 10;}

// Default text for popups
// Should you forget to pass something to overLIB this will be displayed.
if (typeof ol_text == 'undefined') { var ol_text = "Default Text"; }

// Default caption
// You should leave this blank or you will have problems making non caps popups.
if (typeof ol_cap == 'undefined') { var ol_cap = ""; }

// Decides if sticky popups are default.
// 0 for non, 1 for stickies.
if (typeof ol_sticky == 'undefined') { var ol_sticky = 0; }

// Default background image. Better left empty unless you always want one.
if (typeof ol_background == 'undefined') { var ol_background = ""; }

// Text for the closing sticky popups.
// Normal is "Close".
if (typeof ol_close == 'undefined') { var ol_close = "Close"; }

// Default vertical alignment for popups.
// It's best to leave RIGHT here. Other options are LEFT and CENTER.
if (typeof ol_hpos == 'undefined') { var ol_hpos = RIGHT; }

// Default status bar text when a popup is invoked.
if (typeof ol_status == 'undefined') { var ol_status = ""; }

// If the status bar automatically should load either text or caption.
// 0=nothing, 1=text, 2=caption
if (typeof ol_autostatus == 'undefined') { var ol_autostatus = 0; }

// Default height for popup. Often best left alone.
if (typeof ol_height == 'undefined') { var ol_height = -1; }

// Horizontal grid spacing that popups will snap to.
// 0 makes no grid, anything else will cause a snap to that grid spacing.
if (typeof ol_snapx == 'undefined') { var ol_snapx = 0; }

// Vertical grid spacing that popups will snap to.
// 0 makes no grid, andthing else will cause a snap to that grid spacing.
if (typeof ol_snapy == 'undefined') { var ol_snapy = 0; }

// Sets the popups horizontal position to a fixed column.
// Anything above -1 will cause fixed position.
if (typeof ol_fixx == 'undefined') { var ol_fixx = -1; }

// Sets the popups vertical position to a fixed row.
// Anything above -1 will cause fixed position.
if (typeof ol_fixy == 'undefined') { var ol_fixy = -1; }

// Background image for the popups inside.
if (typeof ol_fgbackground == 'undefined') { var ol_fgbackground = ""; }

// Background image for the popups frame.
if (typeof ol_bgbackground == 'undefined') { var ol_bgbackground = ""; }

// How much horizontal left padding text should get by default when BACKGROUND is used.
if (typeof ol_padxl == 'undefined') { var ol_padxl = 1; }

// How much horizontal right padding text should get by default when BACKGROUND is used.
if (typeof ol_padxr == 'undefined') { var ol_padxr = 1; }

// How much vertical top padding text should get by default when BACKGROUND is used.
if (typeof ol_padyt == 'undefined') { var ol_padyt = 1; }

// How much vertical bottom padding text should get by default when BACKGROUND is used.
if (typeof ol_padyb == 'undefined') { var ol_padyb = 1; }

// If the user by default must supply all html for complete popup control.
// Set to 1 to activate, 0 otherwise.
if (typeof ol_fullhtml == 'undefined') { var ol_fullhtml = 0; }

// Default vertical position of the popup. Default should normally be BELOW.
// ABOVE only works when HEIGHT is defined.
if (typeof ol_vpos == 'undefined') { var ol_vpos = BELOW; }

// Default height of popup to use when placing the popup above the cursor.
if (typeof ol_aboveheight == 'undefined') { var ol_aboveheight = 0; }

// Default icon to place next to the popups caption.
if (typeof ol_caption == 'undefined') { var ol_capicon = ""; }

// Default frame. We default to current frame if there is no frame defined.
if (typeof ol_frame == 'undefined') { var ol_frame = self; }

// Default timeout. By default there is no timeout.
if (typeof ol_timeout == 'undefined') { var ol_timeout = 0; }

// Default javascript funktion. By default there is none.
if (typeof ol_function == 'undefined') { var ol_function = Function(); }

// Default timeout. By default there is no timeout.
if (typeof ol_delay == 'undefined') { var ol_delay = 0; }

// If overLIB should decide the horizontal placement.
if (typeof ol_hauto == 'undefined') { var ol_hauto = 0; }

// If overLIB should decide the vertical placement.
if (typeof ol_vauto == 'undefined') { var ol_vauto = 0; }

 

// If the user has to click to close stickies.
if (typeof ol_closeclick == 'undefined') { var ol_clo

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值