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

У меня только HTML-страница с изображением & Контент.Как изменить изображение и контент с помощью JavaScript?

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

Я хочу изменить образ "изображение" ID & содержания "imageContent" ид с использованием AJAX (JavaScript).

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

источник

2010-08-18 Anonymous

Я думаю, что вам не нужно использовать какие-либо Ajax использовать JavaScript. – unigg

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

<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 event,
getElementById method,
innerHTML property,
src property (image)

источник

2010-08-18 11:34:07 gumape

Проблема Somthing, изображение не меняется. – 2010-08-18 12:29:33

Используйте относительные пути вместо полных путей (images/search1.jpg вместо D: /Search/images/search1.jpg) – gumape

Посмотрите на this page, чтобы посмотреть, как вы можете изменить источник изображения.

Чтобы изменить содержание DIV, дать ему идентификатор и изменить свою innerHTML

источник

2010-08-18 11:34:56 gabe3886

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

ответ

Смежные вопросы