Как создать текстовую ссылку на файл изображения?

Question

Я создаю некоторую веб-страницу, функция которой заключается в показе некоторого изображения. Для текста ссылки, конечно, мы используем <a href....>, а для ссылки на изображение мы используем <img src....>.

Но как, если я хочу показать некоторые изображения после щелчка по тексту ссылки?

<ul>
      <li><a href="#"><span>Tulip</span></a></li>
      <li><a href="#"><span>Rose</span></a></li>
      <li><a href="#"><span>Jasmine</span></a></li>
 </ul>

файл изображения

tulip.jpg
rose.jpg
Jasmine.jpg

Answer 1

Вы можете просто связать напрямую с файлом изображения:

<a href="tulip.jpg"><span>Tulip</span></a>

Предполагается, что tulip.jpg находится в том же каталоге, что и веб-страница с указанным выше кодом. Это загрузит страницу, отображающую только указанное изображение.

Если вы намеревались отобразить изображение на текущей странице, после нажатия на ссылку вам потребуется использовать JavaScript, чтобы скрыть / показать его.

Обновление (на основе комментариев)

Чтобы отобразить изображение на текущей странице при нажатии на ссылку, вы можете сделать что-то вроде этого (JavaScript):

function showImage(hiddenImgId) {
    document.getElementById(hiddenImgId).style.display = "block";
}

С HTML, похожим на это:

<a href="#" onclick="showImage('hidden1');">Show Image</a>
<div id="hidden1" style="display:none">
    <img src="image.jpg" />
</div>

Обновление на основе дальнейших комментариев

Если вы хотите использовать jQuery, а изображения уже загружены и скрыты с помощью display:none, как показано выше, вы можете просто использовать:

$("#imageID").show();

Наилучшим вариантом, вероятно, является отображение изображений по умолчанию и их скрытие при загрузке страницы с использованием jQuery (в приведенном ниже коде предполагается, что все скрываемые изображения имеют класс imagesToHide):

$(document).ready(function() {
    $(".imagesToHide").hide();
});

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

Answer 2

Вы упомянули jQuery в своем комментарии к @James Allardice.

Вы можете сделать что-то вроде этого:

$('ul li a').click(function(){
    var img = $(this).attr('href');
    $('#content').html('<img src="' + img + '" />');
    return false;
});

HTML

<ul>
    <li><a href="tulip.jpg" id="tulip">Tulip</a></li>
    <li><a href="rose.jpg" id="rose">Rose</a></li>
    <li><a href="jasmine.jpg" id="jasmine">Jasmine</a></li>
</ul>

<div id="content"></div>

Fiddle: http://jsfiddle.net/jasongennaro/K7pTu/

Answer 3

Или вы можете сделать новую html-страницу, на которой есть картинка + информация о. В этом решении вы можете стилизовать страницу, чтобы она была более удобной для пользователя и более интересной для глаз.

Вы также можете использовать такие скрипты, как лайтбокс JS, если вы хотите, чтобы пользователь оставался на той же странице:

http://www.huddletogether.com/projects/lightbox/ (Попробуйте нажать на картинку)

Обычно я бы не использовал текстовую ссылку на картинку.

Answer 4

<a href="http://example.com/tulip.jpg">link text here</a>