ansaurus

Question

Answer 1

+1 A:

You'll need to change the image source.

document.getElementById("myImage").src = "cottage_large.jpg";

KooiInc 2010-03-18 06:05:02

I change it but still wrong, it shows: document.getElementById() is null or not an object.

2010-03-18 06:24:36

Answer 2

A:

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');";

ZX12R 2010-03-18 06:12:20

The `getElementById` method (introduced on DOM Level 2 standard, late 2000) and setting the `src` attribute will work even on IE5.

CMS 2010-03-18 06:22:16

sO, HOw do I change it to make whole coding work?

2010-03-18 06:28:11

Answer 3

A:

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

asarfraz 2010-03-18 06:43:34

Thank you ! it work!!!!

2010-03-18 07:07:42

Answer 4

A:

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>

ydobonmai 2010-03-18 06:50:09

Thank you!!it work!!

2010-03-18 07:08:28

I am glad I could help. Please mark that as the answer. :-)

ydobonmai 2010-03-18 07:38:16

ansaurus

tags:

views:

answers:

change image use javascript DOM

related questions