Как изменить изображение и контент с помощью JavaScript? - PullRequest
Новая
       4

Как изменить изображение и контент с помощью JavaScript?

1 голос
/ 18 августа 2010

У меня просто есть HTML-страница с изображением и контентом. 

<table>
<tr>
<td height="240" valign="top" colspan="3">
<img id="image" class="newsimage" src="D:/Search/images/search.jpg" alt="search" height="120" width="50%"/>
<div class="imageContect">image Content</div>
</td>
</tr>
</table>

Под ним у меня есть 2 ссылки на предыдущую и следующую. 

<a href="#" onclick="">Previous</a>
<a href="#" onclick="">Next</a>

Я хочу изменить изображение идентификатора «image» и содержимое идентификатора «imageContent» с помощью AJAX (javaScript).

Каким шагам я должен следовать?

Ответы [ 2 ]

0 голосов
/ 18 августа 2010

Взгляните на эту страницу , чтобы узнать, как можно изменить источник изображения.

Чтобы изменить содержимое DIV, присвойте ему идентификатор и используйте JavaScript для измененияего внутренняя HTML

0 голосов
/ 18 августа 2010

Как вы думаете, что-то вроде 

<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>

Ссылки по теме:
Событие onload ,
Метод getElementById ,
свойство innerHTML ,
свойство src (изображение)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...