如何丰富alt属性的显示效果

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



蓝色理想

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

.popShow{
background:#ffffcc; border:1px solid black; padding:4px;font-family:verdana; font-size:70%; width:300px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#0099FF', EndColorStr='#00FFFF')
}
.popImg{
border:0px; cursor: hand;
}

var oPopup = window.createPopup();
function fnDef()
{

oPopup.document.body.innerHTML = "
"+event.srcElement.title+"

";

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);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
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)
{
if(toolTip.arguments.length

' +
'

&nbsp\;' + msg +
'&nbsp\;

';
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'
}
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}

四川辣椒的艺术 (转)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

'+unescape(tipContent)+'

'

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('

'+unescape(tipContent)+'

')
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;
}
}

', '#fffff2','#000000','#000000','20000')" onMouseOut="hideTooltip('dHTMLToolTip')">点这里

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#ffffff; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#ffff00; font-weight:bold}

// Location of this script:
// http://www.geocities.com/e_i_search/premshree/pub/scripts/JS/link_hint_scroller.htm
//*********************************************
//* Link Hint Scroller 1.0 *
//* This script when you move your mouse over *
//* displays a scrolling hint *
//* (c) Premshree Pillai, *
//* http://qik.cjb.net *
//* E-mail : premshree@hotmail.com *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************

window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer"
&& bVer >= 4);
var NS3 = (bName == "Netscape" && bVer

Link Hint Scroller 1.0

Move your mouse over

This is the hint or description for the above link!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 如何丰富alt属性的显示效果

    IE默认会给带alt属性图片和带title的链接一个浮动显示 蓝色理想 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 很多朋友觉得不好看或者功能不丰富想改改,搜集了几种办法大家研究下 .popShow{ background:#ffffcc; border:1px solid black; padding:4px;font-family:verdana; font-size:70%; width:300px;filter:progid:DXImageTransform.Micros

  • 百度ueditor组件上传图片后如何设置img里的alt属性

    百度ueditor组件,使用上传图片后,自动将上传图片显示在编辑器中,也就是插入了一个<img>标签.并设置了一个alt属性,其值是上传图片时的本地路径.暂时没发现哪里可以配置这个值.在查看发布的内容时,看到alt的值是一个磁盘路径,有点别扭. 可以在编辑完内容,保存到数据库时过滤下,修改alt的内容,也可以直接修改源码 function callback(){ try{ var link, json, loader, body = (iframe.contentDocument || ifr

  • alt属性和title属性

    作者:JunChen 2005-5-23 12:00:35原文:http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/ 翻译:JunChen 首发:http://blog.handsbrain.com/junchen/archive/2005/05/21/3355.aspx 版权:本文版权归译者Junchen所有,转载请先联系译者. 当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一

  • img标签中alt和title属性的正确使用

    在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在用户体验上也是很有帮助,下面就来说说alt和title的概念与正确使用. alt 此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用,不过在IE6下还起到了title的作用(鼠标放上去后的文字提示),IE的实现方法实际上是错误的.如果想在鼠标滑过时显示提示,应该用title属性.由于错误的

  • jquery 学习之二 属性相关

    attr(name) 取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined . Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an at

  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

  • php过滤HTML标签、属性等正则表达式汇总

    $str=preg_replace("/\s+/", " ", $str); //过滤多余回车 $str=preg_replace("/<[ ]+/si","<",$str); //过滤<__("<"号后面带空格)   $str=preg_replace("/<\!--.*?-->/si","",$str); //注释 $str=p

  • JavaScript通过使用onerror设置默认图像显示代替alt

    JavaScript代码 //图像加载出错时的处理 function errorImg(img) { img.src = "默认图片.jpg"; img.onerror = null; } html代码 <img width="32" height="32" src="1.jpg" onerror="errorImg(this)" /> 为了美观当网页图片不存在时不显示叉叉图片 当在页面显示的时

  • PHP正则表达式过滤html标签属性(DEMO)

    过滤html标签在php中可以有内置的函数了,但它过滤的太干净了,我们就整理了一下些利用正则来过滤指定html标签的例子,具体如下所示. 采集的时候有时候需要过滤掉多余的标签属性,比如 img标签过滤掉除了src属性之外的所有属性例如删除titile alt等属性以及一些脚的onclick属性等. 例如 过滤除了src之外的所有属性: 复制代码 代码如下: $str= preg_replace('/\s(?!src)[a-zA-Z]+=[\'\"]{1}[^\'\"]+[\'\&quo

  • Android源码系列之深入理解ImageView的ScaleType属性

    做Android开发的童靴们肯定对系统自带的控件使用的都非常熟悉,比如Button.TextView.ImageView等.如果你问我具体使用,我会给说:拿ImageView来说吧,首先创建一个新的项目,在项目布局文件中应用ImageView控件,代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.

随机推荐