我想实现一个图片链接,要求如下:
1.在鼠标移向图片时会出现提示(如:welcome to ***),鼠标移出图片时提示不再出现
2.提示出现在鼠标旁,以文本框形式出现。
具体如何实现呢???知道的朋友帮帮忙哦~~越具体越好哦~~~~!!!!
1.在鼠标移向图片时会出现提示(如:welcome to ***),鼠标移出图片时提示不再出现
2.提示出现在鼠标旁,以文本框形式出现。
具体如何实现呢???知道的朋友帮帮忙哦~~越具体越好哦~~~~!!!!
解决方案 »
- 为什么html中form的method是get,为什么我最后提交数据时地址栏没有显示数据,不是post没有吗?
- tomcat启动没有一点错误,却打不开欢迎界面
- 常用的MVC框架有哪些
- 问一下JAVA 类型的问题
- 请教大家问题啊,JDBC查询速度慢
- 求Castor官网,帮助文档之类
- 自学hibernate出现了一个奇怪的问题,求解
- 如何在一个JSP页面触发一个应用程序呀?
- tomcat5下,admin用户管理界面是用Struts的taglib写的?送分了..
- Weblogic7 不能使用的问题
- SSH在启动时报错Unable to load configuration.
- 求助,新手学hibernate4.1.4遇到问题
<img src="xxoo" title="Welcome to XXOO">如果要自己用DIV实现,那么就需要注册事件,在事件调用你自己写的函数来中显示或隐藏某DIV。
<img src="xxoo" onmouseover="showDiv('Welcome to XXOO')" onmouseout="hideDiv()">
<img src="XXX.jpg" alt="welcome to ***">如果要显示自己格式的提示框可以用一楼的,onmouserover事件。
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跟随鼠标移动(大图展示)</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
#box ul{width:768px;height:172px;list-style-type:none;margin:10px auto;}
#box li{float:left;width:170px;height:170px;cursor:pointer;display:inline;border:1px solid #ddd;margin:0 10px;}
#box li.active{border:1px solid #a10000;}
#box li img{width:170px;height:170px;vertical-align:top;}
#big{position:absolute;width:400px;height:400px;border:2px solid #ddd;display:none;}
#big div{position:absolute;top:0;left:0;width:400px;height:400px;opacity:0.5;filter:alpha(opacity=50);background:#fff url(http://js.fgm.cc/learn/lesson5/img/loading.gif) 50% 50% no-repeat;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var aLi = document.getElementsByTagName("li");
var oBig = document.getElementById("big");
var oLoading = oBig.getElementsByTagName("div")[0];
var i = 0;
for (i = 0; i < aLi.length; i++)
{
aLi[i].index = i;
//鼠标划过, 预加载图片插入容器并显示
aLi[i].onmouseover = function ()
{
var oImg = document.createElement("img");
//图片预加载
var img = new Image();
img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");
//插入大图片
oBig.appendChild(oImg);
//鼠标移过样式
this.className = "active";
//显示big
oBig.style.display = oLoading.style.display = "block";
//判断大图是否加载成功
img.complete ? oLoading.style.display = "none" : (oImg.onload = function() {oLoading.style.display = "none";})
};
//鼠标移动, 大图容器跟随鼠标移动
aLi[i].onmousemove = function (event)
{
var event = event || window.event;
var iWidth = document.documentElement.offsetWidth - event.clientX;
//设置big的top值
oBig.style.top = event.clientY + 20 + "px";
//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";
};
//鼠标离开, 删除大图并隐藏大图容器
aLi[i].onmouseout = function ()
{
this.className = "";
oBig.style.display = "none";
//移除大图片
oBig.removeChild(oBig.lastChild)
}
}
};
</script>
</head>
<body>自动判断大图显示位置,如果超出显示范围,在另一侧展示支持IE6~9-Firefox-Chrome
<div id="box">
<ul>
<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_1.jpg" /></li> <li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_2.jpg" /></li>
<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_3.jpg" /></li>
<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_4.jpg" /></li>
</ul>
</div>
<div id="big"><div></div></div>
</body>
</html>[/html]
呵呵,還有一個也不錯,更接近你的要求,不過代碼多了點,就看你取捨啦。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sweet Titles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="developer" content="Dustin Diaz" />
<style type="text/css" media="screen,projection">
<!--
/* Fading Tooltips By Dustin Diaz*/
#toolTip { position:absolute;z-index:1000;width:220px;background:#000;border:2px double #fff;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;
}
#toolTip p { margin:0;padding:0;color:#fff;font:11px/12px verdana,arial,sans-serif; }
#toolTip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }
#toolTip p em span { font-weight:bold;color:#fff; }
-->
</style>
<script language="javascript">
/*
Sweet Titles (c) Creative Commons 2005
http://creativecommons.org/licenses/by-sa/2.5/
Author: Dustin Diaz | http://www.dustindiaz.com
*/
Array.prototype.inArray = function (value) {
var i;
for (i=0; i < this.length; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
addEvent(window,'unload',EventCache.flush);
var sweetTitles = {
xCord : 0, // @Number: x pixel value of current cursor position
yCord : 0, // @Number: y pixel value of current cursor position
tipElements : ['a','abbr','acronym'], // @Array: Allowable elements that can have the toolTip
obj : Object, // @Element: That of which you're hovering over
tip : Object, // @Element: The actual toolTip itself
active : 0, // @Number: 0: Not Active || 1: Active
init : function() {
if ( !document.getElementById ||
!document.createElement ||
!document.getElementsByTagName ) {
return;
}
var i,j;
this.tip = document.createElement('div');
this.tip.id = 'toolTip';
document.getElementsByTagName('body')[0].appendChild(this.tip);
this.tip.style.top = '0';
this.tip.style.visibility = 'hidden';
var tipLen = this.tipElements.length;
for ( i=0; i<tipLen; i++ ) {
var current = document.getElementsByTagName(this.tipElements[i]);
var curLen = current.length;
for ( j=0; j<curLen; j++ ) {
addEvent(current[j],'mouseover',this.tipOver);
addEvent(current[j],'mousemove',this.tipMove);
addEvent(current[j],'mouseout',this.tipOut);
current[j].setAttribute('tip',current[j].title);
current[j].removeAttribute('title');
}
}
},
updateXY : function(e) {
if ( document.captureEvents ) {
sweetTitles.xCord = e.pageX;
sweetTitles.yCord = e.pageY;
} else if ( window.event.clientX ) {
sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
}
},
tipOut: function() {
if ( window.tID ) {
clearTimeout(tID);
}
if ( window.opacityID ) {
clearTimeout(opacityID);
}
sweetTitles.tip.style.visibility = 'hidden';
},
tipMove:function(e){
var e = e || window.event;
var o = sweetTitles;
var scrX = Number(o.xCord);
var scrY = Number(o.yCord);
var tp = parseInt(scrY+15);
var lt = parseInt(scrX+10);
o.tip.style.left = lt+'px';
o.tip.style.top = tp+'px';
sweetTitles.updateXY(e);
},
checkNode : function() {
var trueObj = this.obj;
if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
return trueObj;
} else {
return trueObj.parentNode;
}
},
tipOver : function(e) {
sweetTitles.obj = this;
tID = window.setTimeout("sweetTitles.tipShow()",50);
sweetTitles.updateXY(e);
},
tipShow : function() {
var scrX = Number(this.xCord);
var scrY = Number(this.yCord);
var tp = parseInt(scrY+15);
var lt = parseInt(scrX+10);
var anch = this.checkNode();
var addy = '';
var access = '';
if ( anch.nodeName.toLowerCase() == 'a' ) {
addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);
var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );
} else {
addy = anch.firstChild.nodeValue;
}
this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(this.tip.offsetWidth+lt) ) {
this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+'px';
} else {
this.tip.style.left = lt+'px';
}
if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(this.tip.offsetHeight+tp) ) {
this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+'px';
} else {
this.tip.style.top = tp+'px';
}
this.tip.style.visibility = 'visible';
this.tip.style.opacity = '0.5';
this.tipFade(10);
},
tipFade: function(opac) {
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac < 50 ) {
this.tip.style.opacity = '.'+newOpac;
this.tip.style.filter = "alpha(opacity:"+newOpac+")";
opacityID = window.setTimeout("sweetTitles.tipFade('"+newOpac+"')",20);
}
else {
this.tip.style.opacity = '0.5';
this.tip.style.filter = "alpha(opacity:50)";
}
}
};
function pageLoader() {
sweetTitles.init();
}
addEvent(window,'load',pageLoader);
</script>
</head>
<body>紧贴鼠标移动的title提示支持IE6~9-Firefox2.0,3.0,3.6-Chrome<br>
<div id="wrapper">
<p id='tagLine'><a href="http://hi.baidu.com/comasp" alt="sdfsfsdfsdfd" >
<img src="http://www.baidu.com/img/baidu_logo.gif" /></a></p>
<h1>好看的标题(鼠标移上去,提示)</h1>
<h2>By Dustin Diaz</h2>
<ul>
<li><a accesskey="y" href="http://www.yahoo.com" title="The Great Y! Corp strikes again">Go to Yahoo</a></li>
<li><a accesskey="s" href="http://www.sitepoint.com" title="Good development site. Great for learning">Go to Sitepoint</a></li>
<li><a accesskey="2" href="http://www.dustindiaz.com/sweet-titles/" title="A place to download the latest copy just incase something went wrong.">"Sweet Titles" supporting article</a></li>
<li>An acronym: <acronym title="Document Object Model">D.O.M.</acronym></li>
<li>An abbreviation: <acronym title="Extensible Hypertext Markup Language">XHTML.</acronym></li>
</ul>
<p>
<br>
<br>
</div></body>
</html>