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

0

Ссылка на странице 1.html

<a href="http://example.com/2.html">show img A</a>

На странице 2 у вас есть несколько ссылок, которые выполняют код javascript при нажатии.

<a href="javascript:myfunc("this.value")">show img A (default)</a>
<a href="javascript:myfunc("this.value")">show img B</a>
<a href="javascript:myfunc("this.value")">show img C</a>
<a href="javascript:myfunc("this.value")">show img D</a>

Фактически они меняют изображение на странице, страница не перезагружается.

Как правильно добавить эти ссылки на первой странице, чтобы вторая страница загружалась с правильным изображением только с помощью html?

Я имею в виду <a href="http://???valid link here???">go to page 2 with img B</a> Возможно ли это?

  • 0
    Что означает «вторая страница загружена с правильным изображением»? Что такое «правильный образ»? Если вы хотите передать данные с первой страницы на вторую, для этого есть механизмы, например, используйте строку запроса. Тем не менее, вам понадобится Javascript.
Теги:

4 ответа

1
Лучший ответ

Решение HTML только в этом случае невозможно. Все, что необходимо отобразить на второй странице, необходимо проверить на данные, сгенерированные первой. Передача данных между этими двумя требует использования метода JS или серверной стороны, поскольку протокол HTTP является безстоящим.

Существует довольно несколько способов достижения упомянутого эффекта, но при этом генерируется URL-адрес с хэш-тегом на первой странице и помещается условный JS, который будет извлекать значение хэш-тега и заменять атрибут src внутри тега img,

Поделиться
4

Вы можете просто указать изображение, которое вы хотите в хеше. Что-то вроде

<a href="http://yoursite.com/2.html#imgB">Go To Page2 (Img B)</a>

Вам нужно проанализировать хэш из вашего URL-адреса, но это должно быть легко сделать с Javascript.

См. Идентификатор хэша/фрагмента URL-адреса с помощью JavaScript.

Поделиться
1

Вы можете использовать хеш-ссылку на странице 1:

<a href="http://example.com/2.html#showImageB">Go to page 2 with image B</a>

затем на 2.htm, определите хэш-значение с помощью javascript:

<img src="" id="myimage"/>
<script>
  if(location.hash == "#showImageB") document.getElementById("myimage").setAttribute("src", "IMAGE_B_FILENAME.jpg");
</script>

Вы также можете использовать обработчик onclick для выполнения функции myfunc():

<a href="" onclick="myfunc(this.value); return false;">show img A (default)</a>

см. qaru.site/questions/19342/...

Поделиться
1

Вы можете сделать одно из следующего: A. добавить хеш в href, после добавления полного пути изображения и с помощью js, чтобы установить его на вторую страницу

B. Не ссылайтесь на вторую страницу, просто используйте js ans change src of img на странице 1:

<!doctype html>
<html>
    <head>
        <title>
            Bla!
        </title>
        <script type='text/javascrip'>
            function ShowImage(img) {
                document.getElementById('imgImage').src = img;
            }
        </script>
    </head>
    <body>
        <button onclick='ShowImage("1.jpg");'> Show image 1</button>
        <button onclick='ShowImage("2.jpg");'> Show image 2</button>
        <button onclick='ShowImage("3.jpg");'> Show image 3</button>
        <img id='imgImage' alt='empty image' src='blank.png'>
    </body>
</html>

Вместо кнопок вы можете использовать div, span или любой другой элемент и настроить его как ссылку на css.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню