更改图片使用JavaScript DOM
[英]change image use javascript DOM
问题描述
<html>
<head>
<script type="text/javascript">
var curimage = "cottage_small.jpg";
var curtext = "View large image";
function changeSrc() {
if (curtext == "View large image"||curimage == "cottage_small.jpg") {
document.getElementById("boldStuff").innerHTML = "View small image";
curtext="View small image";
document.getElementById("myImage")= "cottage_large.jpg";
curimage = "cottage_large.jpg";
} else {
document.getElementById("boldStuff").innerHTML = "View large image";
curtext = "View large image";
document.getElementById("myImage")= "cottage_small.jpg";
curimage = "cottage_small.jpg";
}
}
</script>
</head>
<body>
<!-- Your page here -->
<h1> Pink Knoll Properties</h1>
<h2> Single Family Homes</h2>
<p>
Cottage:<strong>$149,000</strong><br/>
2 bed, 1 bath, 1,189 square feet, 1.11 acres <br/><br/>
<a href="#" onclick="changeSrc()"><b id="boldStuff" />View large image</a>
</p>
<p><img id="myImage" src="cottage_small.jpg" alt="Photo of a cottage" /></p>
</body>
</html>
This is my coding I need to change the image and text the same time when I click it. 
这是我的编码，单击时需要同时更改图像和文本。
I use LTS, it shows the line document.getElementById("myImage")= "cottage_large.jpg"; 我使用LTS，它显示的行为document.getElementById("myImage")= "cottage_large.jpg";
is a wrong number of arquments or invalid property assigment. 参数数目错误或属性分配无效。
Dose someone can help? 有人可以帮忙吗？
Bianca 比安卡
4 个解决方案
解决方案1
2 已采纳 2010-03-18 06:43:34
You need to do the following steps 您需要执行以下步骤
- Change document.getElementById("myImage") to document.getElementById("myImage").src 将document.getElementById（“ myImage”）更改为document.getElementById（“ myImage”）。src
- Change <b id="boldStuff" />View large image to <b id="boldStuff">View large image</b> 将<b id =“ boldStuff” />查看大图更改为<b id =“ boldStuff”>查看大图</ b>
This will solve the problem 这样可以解决问题
解决方案2
1 2010-03-18 06:05:02
您需要更改图像源 。
document.getElementById("myImage").src = "cottage_large.jpg";
解决方案3
1 2010-03-18 06:50:09
You should change :- 您应该更改：-
<b id="boldStuff" />View large image
to following:- 以下：
<b id="boldStuff">View large image</b>
Looks like the getElementById does not work well for empty tags If you dont use ending tag. 如果您不使用结尾标记，则getElementById似乎不适用于空标记。
Complete correct source:- 完整正确的来源：
<html>
<head>
<script type="text/javascript">
var curimage = "cottage_small.jpg";
var curtext = "View large image";
function changeSrc() {
if (curtext == "View large image"||curimage == "cottage_small.jpg") {
document.getElementById("boldStuff").innerHTML = "View small image";
curtext="View small image";
document.getElementById("myImage").src= "cottage_large.jpg";
curimage = "cottage_large.jpg";
} else {
document.getElementById("boldStuff").innerHTML = "View large image";
curtext = "View large image";
document.getElementById("myImage").src= "cottage_small.jpg";
curimage = "cottage_small.jpg";
}
}
</script>
</head>
<body>
<!-- Your page here -->
<h1> Pink Knoll Properties</h1>
<h2> Single Family Homes</h2>
<p>
Cottage:<strong>$149,000</strong><br/>
2 bed, 1 bath, 1,189 square feet, 1.11 acres <br/><br/>
<a href="#" onclick="changeSrc()"><b id="boldStuff">View large image</b></a>
</p>
<p><img id="myImage" src="cottage_small.jpg" alt="Photo of a cottage" /></p>
</body>
</html>
解决方案4
0 2010-03-18 06:12:20
KooiInc is correct. KooiInc是正确的。 but there is one problem with this statement. 但是这种说法有一个问题。
IE6 will not honour document.getElementById("myImage").src . IE6将不接受document.getElementById（“ myImage”）。src 。
so i suggest you use jquery instead like this. 所以我建议你像这样使用jQuery。
$('#myImage').attr("src","the new source path"); $（'＃myImage'）。attr（“ src”，“新的源路径”）;
Update : 更新 ：
@CMS: Please do check what i am tryin to say. @CMS：请检查我在说什么。
well i suppose there is a terrible misunderstanding here. 好吧，我想这里有一个可怕的误会。 for as far as i know IE6 never honours changing image source directly using ".src=" technique. 据我所知，IE6从来不支持使用“ .src =”技术直接更改图像源。 I always used to use the following technique to achieve it if i can't use jquery. 如果我不能使用jquery，我总是使用以下技术来实现。
document.getElementById('ImageId').style.cssText="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='newPath');";
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.