<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点小图看大图</title>
<style type="text/css">
.imgStyle
{
margin: 10px;
padding: 2px;
border: 1px solid #000;
}
</style>
<script language="javascript" type="text/javascript">
var data = { "Images/01_small.jpg": ["Images/01.jpg", "图片1"], "Images/02_small.jpg": ["Images/02.jpg", "图片2"], "Images/03_small.jpg": ["Images/03.jpg", "图片3"] }; //Key:Value;
function LoadImg() {
//遍例小图（Key）地址；
for (var smallImgPath in data) {
//动态创建一个img标签
var smallImg = document.createElement("img");
//动态添加Css样式；imgStyle为样式的类名；
smallImg.className = "imgStyle";
//给创建后的img赋值；（图片路径）
smallImg.src = smallImgPath;
//通过setAttribute改变大图片的(相对)路径;如果不这么写下面取到的会是绝对路径；
smallImg.setAttribute("a1", data[smallImgPath][0]);
smallImg.setAttribute("a2", data[smallImgPath][1]);
smallImg.onmousemove = function () {
//取大图片的地址；
document.getElementById("bigImg").src = this.getAttribute("a1");
//取大图片的标题；
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
//获取隐藏的层的id；
var showDiv = document.getElementById("showDiv");
//让显示的层的位置等于鼠标的位置；
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
//显示层；
showDiv.style.display = "block";
}
smallImg.onmouseout = function () {
document.getElementById("bigImg").src = this.getAttribute("a1");
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
var showDiv = document.getElementById("showDiv");
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
showDiv.style.display = "none";
}
//加载到body中；
document.body.appendChild(smallImg);
}
}
</script>
</head>
<body onload="LoadImg()">
<div id="showDiv" style="display: none; position: absolute;">
<img id="bigImg" src="" width="20%" height="20%" alt="" />
<p id="imgTitle">
</p>
</div>
</body>
</html>
//不知道是不是这个，我在用，还没找到控制图片个数的代码
<html>
<head>
<title>无标题文档</title>
<style>
div {width:100px; height:100px; background:red;}.box {width:200px; height:200px; background:#CC3399;}</style>
</head>
<body>
<div id="div1"onmouseover="document.getElementById('div1').className='box';"onmouseout="document.getElementById('div1').className='';"></div>
</body>
</html>
哪位大侠可以给几个鼠标移动到文字或者图时显示图片(缩略大图)效果原代 ...
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");\/\/获取隐藏的层的id；var showDiv = document.getElementById("showDiv");\/\/让显示的层的位置等于鼠标的位置；showDiv.style.top = window.event.clientY;showDiv.style.left = window.event.clientX + 100;\/\/显示层；...
鼠标移到文字上出现图片提示的代码?
DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"> 鼠标移到文字上弹出提示层.item .box{display:none; width: 315px;height: 180px; background:#CCC;border:1px solid #333;padding:12px;text-align:center;}...
鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片?
代码有bug，修改后如下：需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg 效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!<!docty...
DW中 鼠标放在文字上自动显示图片效果代码
如果有三个就加一个树皮白色 前面的sMouseout('pic','1','2')换成sMouseout('pic','1','3')sMouseout('pic','2','2')换成sMouseout('pic','2','3')如果更多的话，依次类堆
按键精灵区域移动鼠标找图代码求大侠指点鼠标在MoveTo 700,450 和 M...
什么叫乱移动，你还是描述清楚，根据你的意思，应该是在(700,450)到(900,640)矩形区域内鼠标随机移动到该区域某点，移动过程中当出现图片时，找图，然后单击。代码如下：\/\/首先产生两组随机数，700≤x≤900，450≤y≤640，最后在这个区域找图 Randomize \/\/随机数种子 intX = - 1 \/\/是否找到...
急求html代码,当鼠标移动到图片,图片停此滚动?
butong_net_top.scrollTop-=butong_net_top1.offsetHeight \/\/butong_net_top跳到最顶端 else{ butong_net_top.scrollTop++;} } var MyMar1=setInterval(Marquee1,speed)\/\/设置定时器 \/\/鼠标移上时清除定时器达到滚动停止的目的 butong_net_top.onmouseover=function() {clearInterval(MyMar1)...
在Dreamweaver中,如何实现鼠标经过文字时在鼠标旁边自动出现图片?
首先给你说说思路，你把鼠标移动到文字上面，这个时候其实你鼠标旁边就有一个隐藏的层，层里面有一个img图片的样式框，接下来就是调用就是一个onmoseover()事件，然后用这个事件调用一个函数，函数里面将这个层显示并且获得当前鼠标移动位置的坐标即可。这是我的思路，虽然美工方面和代码没有那么标准，我...
...设置把鼠标滑过图片就会在图片上显示我隐藏了的文字 能给代码...
('img').hover(function(){$('#文字的id').show();},function(){$('#文字的id').hide();});其实主要是看你文字在什么文字 如果是被图片遮住，就给图片加个定位，层次z-index写为-1；在最下面就行了
鼠标移动到文字上显示图片
用js可以，创建两个div,一个是放你的文字div1，一个放你的图片div2，当鼠标移到文字时，设置div1的onmouseover设置为使div2显示，当鼠标移出文字时设置div1的onmouseout设置为div2隐藏。
html鼠标悬停在文字显示图片
onmousemove="showPic(this.src);" \/> 5、然后输入代码： 当鼠标指到标题时,鼠标显示对应图片 。6、然后就完成了。
