如何用js控制img中src图片路径改变
下边是一列小图片（src图片路径是动态生成的）上边有一个div，鼠标移到下边的任意一个小图片上边的div中显示小图片的放大图！...
下边是一列小图片（src图片路径是动态生成的）上边有一个div，鼠标移到下边的任意一个小图片上边的div中显示小图片的放大图！
展开
3个回答
展开全部
<!--这个是我刚刚做的，可以哦-->
<html>
<head>
<title>TestImgHtml</title>
<script>
function changeImg(url)
{
var bigimg = document.getElementById("myimg");
bigimg.src=url;
}
function changeBack()
{
var bigimg = document.getElementById("myimg");
bigimg.src="";
}
</script>
</head>
<body>
<div><img id="myimg" src="" alter="此处为大图片" width="500" height="500"></div>
<div>
<img src="1.gif" onmouseover="changeImg(this.src)" onmouseout="changeBack()">
<img src="2.gif" onmouseover="changeImg(this.src)" onmouseout="changeBack()">
</div>
</body>
</html>
<html>
<head>
<title>TestImgHtml</title>
<script>
function changeImg(url)
{
var bigimg = document.getElementById("myimg");
bigimg.src=url;
}
function changeBack()
{
var bigimg = document.getElementById("myimg");
bigimg.src="";
}
</script>
</head>
<body>
<div><img id="myimg" src="" alter="此处为大图片" width="500" height="500"></div>
<div>
<img src="1.gif" onmouseover="changeImg(this.src)" onmouseout="changeBack()">
<img src="2.gif" onmouseover="changeImg(this.src)" onmouseout="changeBack()">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码懒得给你写了，给你个思路，就是当下面小图的onmouseover事件触发时，将小图的SRC复制到上面的DIV的img的SRC中，同时给上面的大图的宽度和高度设置好，如果你的小图和大图是两张图片那么最好有个对应规则根据对应规则设置上面的大图路径
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
HTML>
<HEAD>
<SCRIPT>
function getImageDimension (imgURL, loadHandler) {
var img = new Image();
img.onload = loadHandler;
img.src = imgURL;
}
function showImageDimensions () {
if(this.width>200 && this.height>100) {
alert(this.width + 'x' + this.height+"\n"+"5");
} else {
alert("taixiao");
}
}
</SCRIPT>
<SCRIPT>
function checkImageDimensions (fileName) {
var imgURL = 'file:///' + fileName;
getImageDimension(imgURL, showImageDimensions);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="file" NAME="fileName">
<BR>
<INPUT TYPE="button" VALUE="check image dimensions"
ONCLICK="checkImageDimensions(this.form.fileName.value)">
</FORM>
</BODY>
</HTML>
<HEAD>
<SCRIPT>
function getImageDimension (imgURL, loadHandler) {
var img = new Image();
img.onload = loadHandler;
img.src = imgURL;
}
function showImageDimensions () {
if(this.width>200 && this.height>100) {
alert(this.width + 'x' + this.height+"\n"+"5");
} else {
alert("taixiao");
}
}
</SCRIPT>
<SCRIPT>
function checkImageDimensions (fileName) {
var imgURL = 'file:///' + fileName;
getImageDimension(imgURL, showImageDimensions);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="file" NAME="fileName">
<BR>
<INPUT TYPE="button" VALUE="check image dimensions"
ONCLICK="checkImageDimensions(this.form.fileName.value)">
</FORM>
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
