Почему при попытке заменить источник изображения вместо этого я перехожу к изображению? - PullRequest
Новая
       5

Почему при попытке заменить источник изображения вместо этого я перехожу к изображению?

0 голосов
/ 18 апреля 2010

Я новичок в JavaScript (всего пару дней чтения книги) и застрял в этом фрагменте кода. Я смотрел на это снова и снова, но не могу понять, почему он не работает. Я уверен, что это что-то действительно простое, что я только что упустил, и мне просто нужна свежая пара глаз, чтобы взглянуть на это.

Код должен обновлять изображение заполнителя на странице без перезагрузки страницы. Но когда я нажимаю на ссылку изображения, я перехожу на ссылку, где находится изображение, вместо замены изображения-заполнителя. Вот мой HTML-код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>

    <h1>Snapshots</h1>
    <ul>
        <li>
        <a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
        </li>
        <li>
        <a href="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
        </li>
        <li>
        <a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
        </li>
        <li>
        <a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
        </li>
        <li>
        <a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
        </li>
        <li>
        <a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
        </li>
    </ul>

    <br />

    <img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" />

</body>
</html>

А вот функция JavaScript, которую я использую для этого: 

<script type="text/javascript">

function showPic(whichpic) { 
    var source = whichpic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source);
}

</script>

Ответы [ 2 ]

1 голос
/ 18 апреля 2010

Вам не хватает атрибута id img tag 

<img id="placeholder" src="images/placeholder.jpg" title="Place Holder Image" />

Кстати, поскольку вы запрашиваете XHTML, убедитесь, что вы закрыли свои теги.

0 голосов
/ 18 апреля 2010

ваш скрипт использует 

document.getElementById("placeholder");

, чтобы получить ссылку на элемент заполнителя. Убедитесь, что вы установили атрибуты id ваших HTML-элементов, если хотите использовать эту функцию. Итак, какой бы ни был ваш элемент-заполнитель (я думаю, это тег IMG внизу), установите атрибут id = "placeholder".

, так как вы начинаете, посмотрите на документацию:

https://developer.mozilla.org/en/DOM/document.getElementByID

Судя по вашей проблеме, вы ссылаетесь на javaScript. Убедитесь, что вы указываете на правильное место в вашем

Если добавление div и проверка местоположения вашего файла .js не помогают, попробуйте открыть страницу в «Firefox», затем нажмите на ссылки и найдите ошибки скрипта. Как это сделать: В меню «Сервис» выберите «Ошибка консоли».

Это даст вам полезную информацию о том, что происходит не так. Если у вас есть ошибка и вы не можете понять, что происходит, опубликуйте ее здесь.

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

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

...