change image use javascript DOM
<html>
<head>
&开发者_Python百科lt;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";
is a wrong number of arquments or invalid property assigment.
Dose someone can help?
Bianca
You need to do the following steps
- Change document.getElementById("myImage") to document.getElementById("myImage").src
- Change <b id="boldStuff" />View large image to <b id="boldStuff">View large image</b>
This will solve the problem
You'll need to change the image source.
document.getElementById("myImage").src = "cottage_large.jpg";
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.
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>
KooiInc is correct. but there is one problem with this statement.
IE6 will not honour document.getElementById("myImage").src.
so i suggest you use jquery instead like this.
$('#myImage').attr("src","the new source path");
Update:
@CMS: Please do check what i am tryin to say.
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. I always used to use the following technique to achieve it if i can't use jquery.
document.getElementById('ImageId').style.cssText="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='newPath');";
加载中,请稍侯......
精彩评论