html link to the page but with another image (that could be changed by javascript)

Question

The link on the page 1.html is

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

On the page 2 you have several links that perform some javascript code when clicked.

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

Actually they change the image on the page, the page is not reloaded.

How to add that links on the first page properly so the second page is loaded with a proper image using html only?

I mean, <a href="http://???valid link here???">go to page 2 with img B</a> Is it possible?

What does "second page is loaded with a proper image" mean? What is a "proper image"? If you want to pass data from the first page to the second, there are mechanisms to do that, for example, use the query string. However, you'll need some Javascript. — Matt Burland, Dec 17 '13 at 15:03

score 4 · Answer 1 · edited May 23 '17 at 11:56

4

You can just specify the image you want in a hash. Something like

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

You'll need to parse out the hash from your URL, but this should be easy to do with Javascript.

See: Parsing URL hash/fragment identifier with JavaScript

edited May 23 '17 at 11:56

Community

1
1

answered Dec 17 '13 at 15:04

Julio

2,261
4
30
56

score 1 · Answer 2 · answered Dec 17 '13 at 15:07

You can do one of the next: A. add hash to the href, after it add the image full path, and using js to install it to the second page

B. Do not link to the second page, simply use js ans change src of img exist on page 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>

Instead of buttons you may use div, span or any other element, and set it to look like link with css.

score 1 · Accepted Answer · answered Dec 17 '13 at 15:10

HTML only solution is not achievable in this case. Whatever needs to be displayed in the second page needs to be checked against the data being generated by the first one. Passing data between these two requires either JS or server side method as HTTP protocol is stateless.

There are quite some methods to achieve mentioned effect, yet generating url with hash tag on the first page, and placing conditional JS which will retrieve hash tag value and replace src attribute inside img tag,

score 1 · Answer 4 · edited May 23 '17 at 12:28

You can use a hash link on page 1:

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

then on 2.htm, detect the hash value with javascript:

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

You might also consider using the onclick handler to execute the myfunc() function:

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

see https://stackoverflow.com/a/11348403/521400

html link to the page but with another image (that could be changed by javascript)

4 Answers4