ansaurus

Question

How to change Image & content using JavaScript?

Answer 1

+1 A:

Do you think something like

<head>
    <script type="text/javascript">
        var newsImageData = [
            {src: "D:/Search/images/search1.jpg", data: "image content1"},
            {src: "D:/Search/images/search2.jpg", data: "image content2"},
            {src: "D:/Search/images/search3.jpg", data: "image content3"}
        ];

        var currNewsImgIdx = 0;

        function UpdateNews () {
            var img = document.getElementById ("image");
            var imgContent = document.getElementById ("imageContent");

            img.src = newsImageData[currNewsImgIdx].src;
            imgContent.innerHTML = newsImageData[currNewsImgIdx].data;
        }

        function NextNews () {
            currNewsImgIdx = (currNewsImgIdx + 1) % newsImageData.length;
            UpdateNews ();
        }

        function PrevNews () {
            currNewsImgIdx = (currNewsImgIdx + newsImageData.length - 1) % newsImageData.length;
            UpdateNews ();
        }

        function OnDocLoad () {
            UpdateNews ();
        }
    </script>
</head>
<body onload="OnDocLoad ()">
    <table> 
        <tr> 
            <td height="240" valign="top" colspan="3"> 
                <img id="image" class="newsimage" src="" alt="search" height="120" width="50%"/> 
                <div id="imageContent" class="imageContent"></div> 
            </td> 
        </tr> 
    </table> 

    <a href="#" onclick="PrevNews ()">Previous</a>       
    <a href="#" onclick="NextNews ()">Next</a>     

</body>

Related links:
onload event,
getElementById method,
innerHTML property,
src property (image)

gumape 2010-08-18 11:34:07

Somthing Problem, image is not getting changed.

Sarang 2010-08-18 12:29:33

Use relative paths instead of full paths (images/search1.jpg instead of D:/Search/images/search1.jpg)

gumape 2010-08-18 13:38:19

Answer 2

A:

Have a look at this page to see how you can change the source of an image.

To change the content of the DIV, give it an ID and use JavaScript to change its innerHTML

gabe3886 2010-08-18 11:34:56

ansaurus

tags:

views:

answers:

How to change Image & content using JavaScript?

related questions