请教怎么实现 鼠标移动 图片上时 图片颜色变暗，并在图上出现文字说明
日期：2014-05-17 浏览次数：20588 次
请问如何实现 鼠标移动 图片上时 图片颜色变暗，并在图上出现文字说明
如题 说明。。。。。。。。。。。。。。。。
谢谢
------解决方案--------------------
可能是在图片上加了一个半透明的div了吧？
------解决方案--------------------
++
------解决方案--------------------
+1
文字说明 ，直接加title属性。 <img title="我是图片文字说明"/> 就可以了。
------解决方案--------------------
<!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>
<script type="text/javascript">
var screenDiv="";
var text="";
function getImagePosition(dom){
var style="";
if(document.defaultView&&document.defaultView.getComputedStyle){
style=document.defaultView.getComputedStyle(dom);
}else{
style=dom.currentStyle;
}
return{
'left':style.left=='auto'?dom.offsetLeft:style.left,
'top':style.top=='auto'?dom.offsetTop:style.top,
'width':style.width=='auto'?dom.offsetWidth:style.width
}
}
function init(){
var imgs=document.images;
for(var i=0;i<imgs.length;i++){
imgs[i].onmouseover=createScreen;
imgs[i].onmouseout=removeScreen;
}
}
function createScreen(){
screenDiv=document.createElement("div");
screenDiv.innerHTML=this.src;
var style=getImagePosition(this);
var style={
'position':'absolute',
'left':parseInt(style.left)+"px",
'top':parseInt(style.top)+"px",
'width':parseInt(style.width)+"px",
'height':'40px',
'opacity':'.5',
'filter':'alpha(opacity=50)',
'backgroundColor':'black',
'color':'white',
}
for(var i in style){
screenDiv.style[i]=style[i];
}
document.body.appendChild(screenDiv);
}
function removeScreen(){
document.body.removeChild(screenDiv);
}
window.onload=init;
</script>
</head>
<body>
<img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" />
</body>
</html>
类似这样试试
------解决方案--------------------
给图片加上一个onemousehover事件，加上一个position定位出一个div区块 基本就这样 颜色变暗的话CSS可以调
------解决方案--------------------
++1，价格onmouseover事件的方法，把原来的图片替换为另一张你设计的暗一点的图片。直接修改图片的src就行了
如题 说明。。。。。。。。。。。。。。。。
谢谢
------解决方案--------------------
可能是在图片上加了一个半透明的div了吧？
------解决方案--------------------
++
------解决方案--------------------
+1
文字说明 ，直接加title属性。 <img title="我是图片文字说明"/> 就可以了。
------解决方案--------------------
<!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>
<script type="text/javascript">
var screenDiv="";
var text="";
function getImagePosition(dom){
var style="";
if(document.defaultView&&document.defaultView.getComputedStyle){
style=document.defaultView.getComputedStyle(dom);
}else{
style=dom.currentStyle;
}
return{
'left':style.left=='auto'?dom.offsetLeft:style.left,
'top':style.top=='auto'?dom.offsetTop:style.top,
'width':style.width=='auto'?dom.offsetWidth:style.width
}
}
function init(){
var imgs=document.images;
for(var i=0;i<imgs.length;i++){
imgs[i].onmouseover=createScreen;
imgs[i].onmouseout=removeScreen;
}
}
function createScreen(){
screenDiv=document.createElement("div");
screenDiv.innerHTML=this.src;
var style=getImagePosition(this);
var style={
'position':'absolute',
'left':parseInt(style.left)+"px",
'top':parseInt(style.top)+"px",
'width':parseInt(style.width)+"px",
'height':'40px',
'opacity':'.5',
'filter':'alpha(opacity=50)',
'backgroundColor':'black',
'color':'white',
}
for(var i in style){
screenDiv.style[i]=style[i];
}
document.body.appendChild(screenDiv);
}
function removeScreen(){
document.body.removeChild(screenDiv);
}
window.onload=init;
</script>
</head>
<body>
<img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" />
</body>
</html>
类似这样试试
------解决方案--------------------
给图片加上一个onemousehover事件，加上一个position定位出一个div区块 基本就这样 颜色变暗的话CSS可以调
------解决方案--------------------
++1，价格onmouseover事件的方法，把原来的图片替换为另一张你设计的暗一点的图片。直接修改图片的src就行了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
