在页面上实现图像叠加后，鼠标的形状的问题

wpmsoft 2008-02-15 03:53:37
想实现如下功能：

在一个页面背景上方再叠加一些小图标，然后再定义一些超级链接，这些超级连接是页面上的一个固定的区域。如下所示：

<!--一个大的背景图-->
<body style="background-repeat:no-repeat;background-image=url(BACK.JPG);">
<!--在某个固定的位置，叠加一幅图标-->
<img src="OVERLAY.JPG" style="position:absolute;left=100;top=200;">
<!--定义一个超级链接，它的区间大小与上面的图标的大小不同，可能会有有重叠-->
<a href="test2.html" style="position:absolute;left=100;top=200;width=200;height=200;"></a>
</body>

问题：

移动鼠标，到超级链接的区域中时，希望它变成手型。但事与愿违，当移到那个叠加的小图标上时（属于可以被链接的区域），就不是手型光标了。
如何解决？
...全文
241 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
一把编程的菜刀 2008-02-15
  • 打赏
  • 举报
 回复
呵呵，我知道用CSS可以控制啊！我不是在1楼说 了吗？
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
IE6.0+SP2？！
晕，手头没有这版本，用15楼的代码再试试！

俺刚刚用IE7测试了，会提示ActiveX风险提示，就是那个透明滤镜！
如果不允使用，就是黑色的；
允许了就OK了，透明了！

IE6.0+SP2应该也是ActiveX的问题！
wpmsoft 2008-02-15
  • 打赏
  • 举报
 回复

说错了，不是缓存的问题，是我的浏览器设置中限制了ACTIVEX控件。
更正一下，以免混淆视听。
wpmsoft 2008-02-15
  • 打赏
  • 举报
 回复

NND，搞定，晕死！！

因为我没有关浏览器，所以一直跑的是缓存？重新关掉，再开，OK。谢谢了，我也可以交差了，呵呵
wpmsoft 2008-02-15
  • 打赏
  • 举报
 回复

似乎明白了些，呵呵，难道是浏览器的版本在捣乱？？
我现在用的测试版本是IE6.0+SP2，应该不会有什么问题吧？唉
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
再换个MS官方推荐写法
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

以下代码用IE6sp1,FF2均测试正常，是透明层！
<!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>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

    <style type="text/css">

body

{

    background-repeat: no-repeat;

    background-image: url(BACK.JPG);

}

#imgIcon

{

    position:absolute;

    left: 100px; 

    top: 200px;

}

#transparencyLink

{

    background-color: black;

    position:absolute;

    left: 100px;

    top: 200px;

    width: 200px;

    height: 200px;

    /* For IE */

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

    /*

    filter: alpha(opacity=0);

    */

    /* For FF */

    opacity: 0;

}

    </style>

</head>

<!--一个大的背景图--> 

<body> 

<!--在某个固定的位置，叠加一幅图标--> 

<img   src="OVERLAY.JPG" id="imgIcon"> 

<!--定义一个超级链接，它的区间大小与上面的图标的大小不同，可能会有有重叠--> 

<a href="test2.html" id="transparencyLink"></a> 

</body> 



</html>
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
超级链接的区间（黑色）？！
-------------------------
测试浏览器名称？版本？！
wpmsoft 2008-02-15
  • 打赏
  • 举报
 回复

呵呵，不管怎么样，还是要相当地感谢。。。。回复得这么快。。

规范的与“不规范的”，两个的结果是一样的 ： 超级链接的区间（黑色）把原图标给覆盖住了，应该是参数值不太对的原因吧。。
实在不想再动脑子了，老大如果知道的话，改一改。如果没时间的话，回应一下吧，我结贴好了。

：）
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
to wpmsoft
我把你代码中的background-color:black;给去掉了
------------------------------------------
不要捣乱好不，哈
请看下面这三句，效果就是透明层！
背景色根本看不到滴，再捣乱翻脸了，哈


    background-color: black;

    /* For IE */

    filter: alpha(opacity=0); 

    /* For FF */

    opacity: 0;
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
重写贴个规范滴，哈
<!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>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

    <style type="text/css">

body

{

    background-repeat: no-repeat;

    background-image: url(BACK.JPG);

}

#imgIcon

{

    position:absolute;

    left: 100px; 

    top: 200px;

}

#transparencyLink

{

    background-color: black;

    position:absolute;

    left: 100px;

    top: 200px;

    width: 200px;

    height: 200px;

    /* For IE */

    filter: alpha(opacity=0); 

    /* For FF */

    opacity: 0;

}

    </style>

</head>

<!--一个大的背景图--> 

<body> 

<!--在某个固定的位置，叠加一幅图标--> 

<img   src="OVERLAY.JPG" id="imgIcon"> 

<!--定义一个超级链接，它的区间大小与上面的图标的大小不同，可能会有有重叠--> 

<a href="test2.html" id="transparencyLink"></a> 

</body> 



</html>
wpmsoft 2008-02-15
  • 打赏
  • 举报
 回复
TO 你我他，三人行必有我师焉:

呵呵，不敢玩LINUX，目前在玩DSP上的音视频方面的东东。

此问题是帮助一个小兄弟的，我把你代码中的background-color: black;给去掉了，因为我并不想这个超级链接带任何的边框或底色，结果情况依旧，555
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
红旗下的蛋？！难道是红旗Linux？！

嵌入式开发厉害厉害！

是俺失礼了，得罪得罪，哈

现在这样可以交差不，嘿
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
to wpmsoft
俺在4楼不是写了么？
透明遮罩！
wpmsoft 2008-02-15
  • 打赏
  • 举报
 回复

感谢 你我他，三人行必有我师焉！

呵呵，我的星星是几年以前拿来的，近三年来都没有再做过任何与此有关的项目了，该忘记的也忘记得差不多了，呵呵。
这几年都泡在嵌入式开发方面了，很高兴认识你。。。。
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
to chinmo
没有连接怎么能变手型?
-------------------
设置一下透明背景就可以了，最好嵌套起来，
当然一些特殊情况下就要做遮罩，
例如flash，因为flash本身可以接收点击事件！
wpmsoft 2008-02-15
  • 打赏
  • 举报
 回复
Chinmo: 你好！

感谢你的回答。
可能是我的描述不太清楚吧。小图标只有一部分被包含在超级链接中。
比如说：
小图标是一个长条形，可是我的超级链接区只包含了这个长条形的一部分，该如何处理？
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
忘了加透明，哈

<!--一个大的背景图--> 

<body   style="background-repeat:no-repeat;background-image: url(BACK.JPG);"> 

<!--在某个固定的位置，叠加一幅图标--> 

<img   src="OVERLAY.JPG"   style="position:absolute;left: 100px; top: 200px;"> 

<!--定义一个超级链接，它的区间大小与上面的图标的大小不同，可能会有有重叠--> 

<a href="test2.html" style="background-color: black;filter: alpha(opacity=0); opacity: 0;position:absolute;left: 100px;top: 200px;width: 200px;height: 200px;"></a> 

</body>
yixianggao 2008-02-15
  • 打赏
  • 举报
 回复
晕，咋说也是星星，一个低级错误，=改为:！！！

俺帮你改了！
<!--一个大的背景图--> 

<body   style="background-repeat:no-repeat;background-image: url(BACK.JPG);"> 

<!--在某个固定的位置，叠加一幅图标--> 

<img   src="OVERLAY.JPG"   style="position:absolute;left: 100px; top: 200px;"> 

<!--定义一个超级链接，它的区间大小与上面的图标的大小不同，可能会有有重叠--> 

<a href="test2.html" style="background-color: yellow; position:absolute;left: 100px;top: 200px;width: 200px;height: 200px;"></a> 

</body>


送你三本手册！

DHTML参考手册
http://download.csdn.net/source/308913

样式表中文手册
http://download.csdn.net/source/304124

JScript语言参考
http://download.csdn.net/source/308916
一把编程的菜刀 2008-02-15
  • 打赏
  • 举报
 回复
<!--一个大的背景图-->
<body style="background-repeat:no-repeat;background-image=url(BACK.JPG);">
<!--在某个固定的位置，叠加一幅图标-->

<!--定义一个超级链接，它的区间大小与上面的图标的大小不同，可能会有有重叠-->
<a href="test2.html" style="position:absolute;left=100;top=200;width=200;height=200;"><img src="OVERLAY.JPG" style="position:absolute;left=100;top=200;"> </a>
</body>

这样就OK了
你小图表没有连接怎么能变手型，要么你就要CSS定义这个小图标鼠标经过时的形状
wpmsoft 2008-02-15
  • 打赏
  • 举报
 回复
顶一下。
PNG矢量各种形状鼠标指针
PNG矢量各种形状鼠标指针PNG矢量各种形状鼠标指针
OpenCV C++开发 第二节：图像处理（四、图像叠加、调整图像亮度与对比度、绘制形状与文字）
一、图像叠加 关门放代码 #include <opencv2/opencv.hpp> #include <iostream> using namespace std; using namespace cv; int main(int argc, char** argv) { Mat src1, src2, dst; src1 = imread("C:\\Use...
图像文字叠加技术与实现
工具栏中包含了如画笔、橡皮擦、文字工具等基础编辑工具。用户可以通过点击工具栏上的图标选择所需工具。在计算机图形学和图像处理中，图像坐标系统是用来指定图像中每个像素位置的数学框架。坐标系统可以是笛卡尔坐标系，也可以是极坐标系，但在图像处理中最常用的是笛卡尔坐标系。笛卡尔坐标系由两个或三个互相垂直的轴构成，分别对应于横轴（X轴）和纵轴（Y轴），在三维空间中还会有第三个轴（Z轴）。在二维图像中，每个像素的位置可以通过其X和Y的坐标值来唯一确定。
OpenCV图像处理与形状识别实战
本文介绍了多个基于OpenCV的图像处理任务，包括：1）在空白图像上交互式添加标签；2）使用反转图像与拉普拉斯算子检测瞳孔；3）通过霍夫变换识别任意形状；4）使用grabCut与inpaint移除图像中的人物；5）对图像区域进行模糊处理；6）利用距离变换叠加正方形；7）构建肤色注意力检测器；8）进行手势识别与梯度直方图分析；9）分析极值点算法复杂度并提出优化方法；10）探讨Hu矩特征提取中填充轮廓与线条轮廓的区别。
Captura水印功能实现：文本/图像叠加技术详解
在数字化内容创作的浪潮中，屏幕录制工具已成为开发者、教育者和内容创作者不可或缺的生产力工具。Captura作为一款开源屏幕录制软件，凭借其丰富的功能和灵活的扩展性，在众多同类工具中脱颖而出。水印功能作为内容版权保护和品牌展示的重要手段，在Captura中得到了精心设计和实现。本文将深入剖析Captura中水印功能的实现原理，重点讲解文本水印和图像水印两大核心技术，为开发者提供全面的技术参考。 #...
CSS

61,126

社区成员

60,706

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章