当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript实例教程(14) 鼠标触发窗口

Javascript
Prototype使用指南之form.js
Prototype1.5 rc2版指南最后一篇之Position
javascript 对象的定义方法
JS多级连动菜单
javascript编程起步(第一课)
javascript编程起步(第二课)
java script编程起步(第三课)
jquery简单体验
javascript编程起步(第四课)
javascript编程起步(第五课)
javascript编程起步(第六课)
javascript编程起步(第七课)
javascript object oriented 面向对象编程初步
js宝典学习笔记(上)
JS宝典学习笔记(下)
javascript基础的动画教程,直观易懂
javascript 的面向对象特性参考
JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接
JScript面向事件驱动的编程
一份老外写的XMLHttpRequest代码多浏览器支持兼容性

Javascript实例教程(14) 鼠标触发窗口


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 215 ::
收藏到网摘: n/a

利用Javascript产生鼠标移过时弹出窗口

本节教程将介绍当鼠标移过图片的时候弹出一个窗口的设计。这个弹出的窗口是一个标准的网页,你可以设置它的大小。

首先在网页的Header标签处加入以下代码:

<SCRIPT LANGUAGE="Javascript">

var popupwindow_window = null;

function popupwindow(status,url) {

if(status != 0) {

if(popupwindow != null) popupwindow.focus();

else {

var popupwindow = open(url, "popupwindow", "width=350,height=225");

//这里设置弹出窗口的大小,宽度为350,高度为225.

popupwindow_window = popupwindow;

}

} else {

if(popupwindow_window != null) popupwindow_window.close();

}

}

</SCRIPT>

那如何调用这个JavaScript脚本呢?具体代码如下:

This is your link <A HREF="" onMouseover="popupwindow(1,'popupwindow.html')"

onMouseout="popupwindow(0)"><img src="/images/picture.gif"

hspace=0 vspace=0 border=0 alt="Network"></A>

这样你只要将鼠标移过图片picture.gif的时候,就会弹出一个宽度为350,高度为225的网页了。

点击此处去测试效果页面