`
Hsiang
  • 浏览: 29016 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

自定义alt提示实例

    博客分类:
  • Web
 
阅读更多

 

  要求制作一个图片的alt提示,前段显示商品名称+商品的促销信息(红色显示样式)

<style>

#toolTipLayer{position:absolute; visibility: hidden;z-index: 1000; margin:0 auto;}

</style>

<script language="javascript">

var ns4 = document.layers;

var ns6 = document.getElementById && !document.all;

var ie4 = document.all;

offsetX = 15;

offsetY = 0;

var toolTipSTYLE="";

var strlong="";

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,prm, fg, bg)

{

  if(toolTip.arguments.length < 1) // hide

  {

    if(ns4) toolTipSTYLE.visibility = "hidden";

    else toolTipSTYLE.display = "none";

  }

  else // show

  {

    if(!fg) fg = "";

    if(!bg) bg = "#FFFFFF";

    var fm="#f00000";

    if(msg.length>14){

    strlong='width="175px"' ;

    }else{

    strlong="";

    }

    var content =

    '<table border="1px"'+strlong+' cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' +

    '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg + 

    '"><td align="center"><font face="sans-serif" color="' + fg +

    '" style="font-size:12px">&nbsp\;' + msg +

    '&nbsp\;</font><font face="sans-serif" color="' + fm +

    '" style="font-size:12px">&nbsp\;' + prm +

    '&nbsp\;</font></td></table></td></table>';

    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)

{

    e= e || window.event; 

var mousePos = mouseCoords(e);   

    x = mousePos.x ;

    y = mousePos.y;    

  toolTipSTYLE.left = x+offsetX + "px";

  toolTipSTYLE.top = y +"px";

  return true;

}

 

function mouseCoords(e) 

if(e.pageX || e.pageY){ 

return {x:e.pageX, y:e.pageY}; 

}

return { 

x:e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, 

y:e.clientY + document.documentElement.scrollTop - document.documentElement.clientTop 

}; 

</script>

。。。。。

 

 

<a href="<%=basePath %>product/<bean:write name = "prodcuts"  property="itemcode" />.html"  

            onMouseOver="toolTip('<bean:write name = "prodcuts"  property="itemname" />','<bean:write name = "prodcuts"  property="comments" />', '', '')" 

            onMouseOut="toolTip()" >

            <img src="<%=basePath %>goodspic/200g/<bean:write name = "prodcuts"  property="filename4" />" />

            </a>

 

 

 <div id="toolTipLayer" ></div>

<script language="JavaScript">

<!--

initToolTips(); 

//--></script>

。。。。

分享到:
评论

相关推荐

    Excel-VBA宏编程实例源代码-自定义函数-显示新产品名称中后3个字符.zip

    本实例主要探讨如何通过VBA宏编程创建自定义函数,以提取新产品名称中的后三个字符。这对于数据处理、分析和报告尤其有用,尤其是在处理大量产品数据时。 首先,让我们了解VBA的基础。VBA是基于Visual Basic编程...

    Android xmlns 的作用及其自定义实例详解

    Android xmlns 的作用及其自定义实例详解  xmlns:Android=”http://schemas.android.com/apk/res/android的作用是: 这个是xml的命名空间,有了他,你就可以alt+/作为提示,提示你输入什么,不该输入什么,什么是对...

    设定任意时间锁定自己的计算机Ctrl+Alt+Delete失效

    总结来说,这个VB程序展示了如何利用编程技巧创建一个自定义的计算机锁定机制,绕过标准的Ctrl+Alt+Delete锁定方式。这涉及到VB的事件处理、用户界面设计、API调用以及键盘事件监听等多个编程概念,是学习和探索...

    100个MFC实例程序

    在"100个MFC实例程序"中,我们可以深入学习MFC的各种核心概念和功能,通过实际的代码示例来提升开发技能。 1. **多线程**:MFC支持多线程编程,允许程序在同一时间执行多个任务。在Windows环境中,可以使用...

    element中Notification组件(this.$notify)自定义样式图片

    在实际开发中,我们经常需要根据项目需求对组件进行自定义,包括添加图片来增强提示信息的表现力。本文将深入探讨如何在`Notification`组件中使用`this.$notify`方法来自定义样式,并集成图片。 首先,`this.$...

    易语言源码巧妙的方法-禁止ALT&F4关闭程序.zip

    这个源码实例提供了一个很好的学习机会,帮助开发者掌握如何在易语言环境中自定义键盘事件的行为,特别是在需要特殊控制用户交互的场景下。 需要注意的是,虽然禁止用户使用标准的关闭程序快捷键有时是必要的,但...

    收集的div,css,js制作的一些实例代码

    "title及alt提示个性化特效"涉及到HTML的`title`和`alt`属性。`title`为元素提供额外信息,当鼠标悬停时显示为工具提示,而`alt`主要用在图像元素上,作为图片无法显示时的替代文本。开发者可以通过JavaScript来定制...

    struts2实例和详细介绍

    - 如果MyEclipse的默认提示快捷键`Ctrl+Space`与输入法切换冲突,你可以更改提示快捷键,如改为`Alt+/`。 在实际开发中,Struts2的灵活性和可扩展性使其成为Java web开发的首选框架之一。开发者可以利用Action、...

    DELPHI 5编程实例与技巧

    5.3.1 检测Shift、Alt和Ctrl键是否 按下 122 5.3.2 屏蔽系统功能键 123 5.3.3 模拟按下键盘上的某个键 124 5.3.4 限制鼠标移动的范围 124 5.3.5 自定义鼠标 125 5.3.6 设置光标闪烁的速度 126 5.3.7 不同程序间的...

    C# Winform中监听/禁用系统快捷键(CTRL+ALT+DEL和WIN+L除外)

    或者,你也可以执行自定义操作,比如弹出警告框,提示用户当前快捷键已被占用。 4. **确保程序仅运行一次**:为了确保程序只允许运行一次,可以使用`Mutex`类。在程序启动时,创建一个全局命名的`Mutex`,如果已经...

    Excel-VBA宏编程实例源代码-显示出会自动关闭的信息对话框.zip

    在Excel中,VBA(Visual Basic for Applications)是一种强大的编程工具,它允许用户自定义工作簿、工作表和图表的功能,提高工作效率。本压缩包"Excel-VBA宏编程实例源代码-显示出会自动关闭的信息对话框.zip"包含...

    javascript+html弹出层实例

    当我们谈论“javascript+html弹出层实例”时,我们通常是指在网页中实现一种可浮动、可自定义的对话框,这种对话框会在用户交互时突然出现,显示额外的信息或功能,如图片、文字或整个 div 元素。这种弹出层效果极大...

    详解PHP如何更好的利用PHPstorm的自动提示

    此外,通过在循环内添加类型检查的`if`语句(`if ($item instanceof Data)`),我们可以确保在访问属性时,IDE只会为`Data`类实例提供提示,进一步增强了代码的严谨性和可读性。这样做还有助于预防潜在的类型错误,...

    rails实现验证码实例

    一个常用的库是`kaptcha`,它提供了创建图片验证码的功能,并且可以自定义样式以适应应用的视觉设计。要添加`kaptcha`到项目中,可以在`Gemfile`中添加以下行: ```ruby gem 'kaptcha' ``` 然后运行`bundle ...

    Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

    标题中的“Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例”是指使用jQuery库实现的一个功能,当用户鼠标悬停在地图上的特定区域(热点)时,会弹出一个提示层显示相关信息。这个功能常用于交互式地图...

Global site tag (gtag.js) - Google Analytics