经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 如何丰富alt属性的显示效果

查看: 5340|回复: 2

如何丰富alt属性的显示效果 [复制链接]

flost　楼主

菜鸟WebBuilder

银牌会员

帖子: 1008
体力: 5490
威望: 1

发表于 2005-9-5 14:48:00 |显示全部楼层

IE默认会给带alt属性图片和带title的链接一个浮动显示

提示：您可以先修改部分代码再运行

很多朋友觉得不好看或者功能不丰富想改改，搜集了几种办法大家研究下

oPopup.document.body.innerHTML = "<DIV STYLE=\"background:#ffffcc; border:1px solid black; padding:4px;font-family:verdana; font-size:70%;color=#111; width:300px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#0099FF', EndColorStr='#00FFFF'\">"+event.srcElement.title+"</div>";

var popupBody = oPopup.document.body;
oPopup.show(0, 0, 300, 50);
var realHeight = popupBody.scrollHeight;
oPopup.hide();
oPopup.show(0, 15 , 300, realHeight, event.srcElement);
}
</SCRIPT>
<IMG src="http://www.blueidea.com/img/common/logo.gif" border=0 class="popImg"  title="联系人：fsdfsafasf<BR>ID：asdfasdf<BR>E-Mail：tierhuang@126.com<BR>联系电话：asdfadsf<BR>联系地址：asdfasdf<BR>邮政编码：asdfasdf<BR>" onmouseover="fnDef();" >

提示：您可以先修改部分代码再运行

<A href="#" onMouseOver="toolTip('四川辣椒的艺术 （转）', '#333333', '#BFFF95')" onMouseOut="toolTip()"><span style="color:#FF6600">四川辣椒的艺术 （转）</span></A>
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<script language="JavaScript"></script>

提示：您可以先修改部分代码再运行

<html>
<head>
  <script language="javascript">
var tipTimer;
function locateObject(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateObject(n,d.layers[i].document); return x;
}

function showTooltip(object,e, tipContent, backcolor, bordercolor, textcolor, displaytime)
{
window.clearTimeout(tipTimer)

if (document.all)
{
locateObject(object).style.top=document.body.scrollTop+event.clientY+20

locateObject(object).innerHTML='<table style="font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; border: '+bordercolor+'; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: '+backcolor+'" width="10" border="0" cellspacing="1" cellpadding="1"><tr><td nowrap><font style="font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+'</font></td></tr></table> '

if ((e.x + locateObject(object).clientWidth) > (document.body.clientWidth + document.body.scrollLeft))
{ 
locateObject(object).style.left = (document.body.clientWidth + document.body.scrollLeft) - locateObject(object).clientWidth-10;
}
else
{
locateObject(object).style.left=document.body.scrollLeft+event.clientX
}
locateObject(object).style.visibility="visible"
tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime);
return true;
}
else if (document.layers)
{
locateObject(object).document.write('<table width="10" border="0" cellspacing="1" cellpadding="1"><tr bgcolor="'+bordercolor+'"><td><table width="10" border="0" cellspacing="0" cellpadding="2"><tr bgcolor="'+backcolor+'"><td nowrap><font style="font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+'</font></td></tr></table></td></tr></table>')
locateObject(object).document.close()
locateObject(object).top=e.y+20

if ((e.x + locateObject(object).clip.width) > (window.pageXOffset + window.innerWidth))
{
locateObject(object).left = window.innerWidth - locateObject(object).clip.width-10;
}
else
{
locateObject(object).left=e.x;
}
locateObject(object).visibility="show"
tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime);
return true;
}
else
{
return true;
}
}
</script>
  </head>
  <body>
<div id="dHTMLToolTip" style="position: absolute; visibility: hidden; width:10; height: 10; z-index: 1000; left: 0; top: 0"></div>
<span onMouseOver="showTooltip('dHTMLToolTip',event, '文字提示信息部分<br>带图片的<img src=http://www.blueidea.com/img/common/logo.gif>', '#fffff2','#000000','#000000','20000')" onMouseOut="hideTooltip('dHTMLToolTip')">点这里</span>
</body>
<html>

提示：您可以先修改部分代码再运行

『网站重构』群：138158

西部数码顶级域名注册商39元抢注！

使用道具举报

marvellous　

金翅擘海

钻石会员

帖子: 16559
体力: 37158
威望: 143

发表于 2005-9-5 15:08:00 |显示全部楼层

//SCROLL
function Scroll(layerName){
if (NS4 || IE4) {
 if (NS4 || IE4) { 
 if(i<(begin_pos+scroll_length)){
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="visible"');
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.left="'+i+'"');
 i++;
 j++;
 if(i==j){
 setTimeout("Scroll('"+layerName+"')",time_length);}
 }
 }
 }
}

//STOP SCROLLING
function StopScroll(layerName)
{
i=begin_pos+scroll_length;
  eval(layerRef+'["'+layerName+'"]'+
  styleSwitch+'.left="'+i+'"');
  hideLayer(layerName);
}

function reset()
{ 
i=begin_pos;
j=i;
}

// HIDE HINT
function hideLayer(layerName){
 if (NS4 || IE4) {
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="hidden"');
 }
 }

</script>

<span class="header">Link Hint Scroller 1.0</span>
<br>

<a href="#" class="link" onmouseover="javascript:reset();Scroll('prem_hint');" onmouseout="javascript:StopScroll('prem_hint');">Move your mouse over</a>
</center>
<div id="prem_hint" style="position:relative; visibility:hidden" class="prem_hint">
This is the hint or description for the above link!
</div>

</DIV>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

tfysh　

道风

银牌会员

帖子: 793
体力: 3200
威望: 0
居住地: 安徽省合肥市

发表于 2005-9-5 17:14:00 |显示全部楼层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE>
.haha {
BORDER-RIGHT: #cc0000 1px outset; BORDER-TOP: #cc0000 1px outset; FONT-SIZE: 9pt; BORDER-LEFT: #cc0000 1px outset; WIDTH: 100px; COLOR: #cc0000; BORDER-BOTTOM: #cc0000 1px outset; BACKGROUND-COLOR: #F0F0F0; layer-background-color: #B5CDE6
}
</STYLE>
<SCRIPT language=javascript>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//  ALTTXT V1.2
//  BY: BRIAN GOSSELIN OF SCRIPTASYLUM.COM
//  ADDED FADING EFFECT FOR IE4+ AND NS6+ ONLY AND OPTIMIZED THE CODE A BIT.
//  SCRIPT FEATURED ON DYNAMIC DRIVE (http://www.dynamicdrive.com)

var dofade=true;    // ENABLES FADE-IN EFFECT FOR IE4+ AND NS6 ONLY
var center=false;    // 盢亥弧逆瞷菲公い丁(true), 玥瞷菲公娩(false)
var centertext=false; // 弧ゅい丁癸非逼(true),玥ゅ綼オ逼(false)

////////////////////////////// 礚惠э //////////////////////////////////////

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? true : false;
var IE4 = (document.all && !document.getElementById)? true : false;
var IE5 = (document.getElementById && document.all)? true : false;
var NS6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var W3C = (document.getElementById)? true : false;
var w_y, w_x, navtxt, boxheight, boxwidth;
var ishover=false;
var isloaded=false;
var ieop=0;
var op_id=0;

function getwindowdims(){
w_y=(NS4||NS6)? window.innerHeight : (IE5||IE4)? document.body.clientHeight : 0;
w_x=(NS4||NS6)? window.innerWidth : (IE5||IE4)? document.body.clientWidth : 0;
}

function getboxwidth(){
if(NS4)boxwidth=(navtxt.document.width)? navtxt.document.width : navtxt.clip.width;
if(IE5||IE4)boxwidth=(navtxt.style.pixelWidth)? navtxt.style.pixelWidth : navtxt.offsetWidth;
if(NS6)boxwidth=(navtxt.style.width)? parseInt(navtxt.style.width) : parseInt(navtxt.offsetWidth);
}

function getboxheight(){
if(NS4)boxheight=(navtxt.document.height)? navtxt.document.height : navtxt.clip.height;
if(IE4||IE5)boxheight=(navtxt.style.pixelHeight)? navtxt.style.pixelHeight : navtxt.offsetHeight;
if(NS6)boxheight=parseInt(navtxt.offsetHeight);
}

function movenavtxt(x,y){
if(NS4)navtxt.moveTo(x,y);
if(W3C||IE4){
navtxt.style.left=x+'px';
navtxt.style.top=y+'px';
}}

function getpagescrolly(){
if(NS4||NS6)return window.pageYOffset;
if(IE5||IE4)return document.body.scrollTop;
}

function getpagescrollx(){
if(NS4||NS6)return window.pageXOffset;
if(IE5||IE4)return document.body.scrollLeft;
}

function writeindiv(text){
if(NS4){
navtxt.document.open();
navtxt.document.write(text);
navtxt.document.close();
}
if(W3C||IE4)navtxt.innerHTML=text;
}

//**** END UTILITY FUNCTIONS ****//

function writetxt(text){
if(isloaded){
if(text!=0){
ishover=true;
if(NS4)text='<div class="navtext">'+((centertext)?'<center>':'')+text+((centertext)?'</center>':'')+'</div>';
writeindiv(text);
getboxheight();
if((W3C || IE4) && dofade){
ieop=0;
incropacity();
}}else{
if(NS4)navtxt.visibility="hide";
if(IE4||W3C){
if(dofade)clearTimeout(op_id);
navtxt.style.visibility="hidden";
}
writeindiv('');
ishover=false;
}}}

function incropacity(){
if(ieop<=100){
ieop+=7;
if(IE4 || IE5)navtxt.style.filter="alpha(opacity="+ieop+")";
if(NS6)navtxt.style.MozOpacity=ieop/100;
op_id=setTimeout('incropacity()', 50);
}}

function moveobj(evt){
if(isloaded && ishover){
margin=(IE4||IE5)? 1 : 23;
if(NS6)if(document.height+27-window.innerHeight<0)margin=15;
if(NS4)if(document.height-window.innerHeight<0)margin=10;
//mx=(NS4||NS6)? evt.pageX : (IE5||IE4)? event.clientX : 0;
//my=(NS4||NS6)? evt.pageY : (IE5||IE4)? event.clientY : 0;
if (NS4){
mx=evt.pageX
my=evt.pageY
}
else if (NS6){
mx=evt.clientX
my=evt.clientY
}
else if (IE5){
mx=event.clientX
my=event.clientY
}
else if (IE4){
mx=0
my=0
}

if(NS4){
mx-=getpagescrollx();
my-=getpagescrolly();
}
xoff=(center)? mx-boxwidth/2 : mx+5;
yoff=(my+boxheight+30-getpagescrolly()+margin>=w_y)? -15-boxheight: 30;
movenavtxt( Math.min(w_x-boxwidth-margin , Math.max(2,xoff))+getpagescrollx() , my+yoff+getpagescrolly());
if(NS4)navtxt.visibility="show";
if(W3C||IE4)navtxt.style.visibility="visible";
}}

if(NS4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=moveobj;
window.onload=function(){
  navtxt=(NS4)? document.layers['navtxt'] : (IE4)? document.all['navtxt'] : (W3C)? document.getElementById('navtxt') : null;
  getboxwidth();
  getboxheight();
  getwindowdims();
  isloaded=true;
  if((W3C || IE4) && centertext)navtxt.style.textAlign="center";
  if(W3C)navtxt.style.padding='4px';
  if(IE4 || IE5 && dofade)navtxt.style.filter="alpha(opacity=0)";

window.onresize=getwindowdims;
}

</SCRIPT>
<style type="text/css">

</style>
</head>

<body>
<DIV class=haha id=navtxt
style="Z-INDEX: 3; LEFT: 0px; POSITION: absolute; TOP: -100px; visibility: visible;"></DIV>
<table width="414" height="133" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
<td> <a href="#" class="chen" onmouseover="writetxt('zhe shi yi ge!')" onmouseout=writetxt(0)
               href="http://www.qq.com">我们都是中国人 </a></td>
<td> </td>
<td> </td>
<td> </td>
  </tr>
  <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
  </tr>
</table>
</body>
</html>

道风的BK
博主QQ群：7916133

使用道具举报

返回列表

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 08:01 , Processed in 0.120761 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

		自动登录	找回密码
密码			注册

如何丰富alt属性的显示效果 [复制链接]

浏览过的帖子

浏览过的版块