Эскизы JavaScript из массива

#javascript #html

#JavaScript #HTML

Вопрос:

В настоящее время я пытаюсь работать на веб-сайте, который отображает изображения с помощью java-скрипта. В настоящее время у меня настроен этот веб-сайт, изображение отображается над пронумерованными ссылками на фотографии. Вместо того, чтобы иметь номера, перечисленные под изображениями, я бы хотел, чтобы числа были миниатюрами изображений. Можно ли заменить их изображениями? Любая помощь приветствуется.

Это то, что у меня есть до сих пор:

 var photos = new Array();
var photoindex = 0;

photos[0] = "images/piano.jpg";
photos[1] = "images/guitar.jpg";
photos[2] = "images/studio.jpg";
photos[3] = "images/sheetmusic.jpg";

function backward() {
  if (photoindex > 0) {
    document.images.p.src = photos[--photoindex];
  }
}

function forward() {
  if (photoindex < photos.length - 1) {
    document.images.p.src = photos[  photoindex];
  }
}

for (i = 0; i < photos.length; i  ) {
  document.write("<a href="javascript: goto("   i   ");">"   i   "</a> ");
}

function goto(n) {
  if (n < photos.length amp;amp; n >= 0) {
    photoindex = n;
    document.images.p.src = photos[photoindex];
  }
}

 <br>
<div style="text-align:center;left:5px;">
  <table width="250" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="3" align="center" valign="top">
        <img src="images/weloveweb.png" name="p" width="250" height="188" id="p" />
      </td>
    </tr>
    <tr>
      <td valign="top"><a href="javascript: backward();">amp;<amp;<</a>
      </td>
      <td valign="top" style="text-align: center">
      </td>
      <td valign="top" style="text-align: right"><a href="javascript: forward();">amp;>amp;></a>
      </td>
    </tr>
  </table>
</div>

Ответ №1:

Поскольку ваши URL-адреса миниатюр хранятся в photos массиве, для отображения миниатюры вместо ее индекса вам нужно создать img тег с src атрибутом, содержащим URL-адрес каждой миниатюры (т.Е. photos[i] ).

Изменить:

 for (i = 0; i < photos.length; i  ) {
  document.write("<a href="javascript: goto("   i   ");">"   i   "</a> ");
// ------------------------------------------------------------^ change this `i`
}

В:

 for (i = 0; i < photos.length; i  ) {
  document.write("<a href="javascript: goto("   i   ");">"   "<img src="   photos[i]   "/></a> ");
}

1. Проблема в том, что когда я это делаю, отображается текстовая ссылка, а не эскиз.

2. Спасибо, это в основном сработало! Однако теперь вместо отображения миниатюры изображения миниатюра отображается как поврежденная (хотя при нажатии на них отображается правильное изображение). Есть идеи о том, что здесь пошло не так?

3. Вам может понадобиться относительный путь для ваших эскизов, поэтому добавляйте a ./ перед каждым URL, например ./images/imagename