One Styled HTML Page with Dynamic Content

Question

I have a question that I may just be overthinking. So I have three links on a page. All three links will open the same HTML page. The only problem is I want to display different images depending on which link is clicked.

I don't want to create three different variation of the same page, so is there a way to do this dynamically (maybe Javascript?)

Any help would be appreciated.

Thanks!

score 2 · Accepted Answer · answered Nov 23 '14 at 06:51

2

The easiest way I could imagine this working is using a hash in the URL of the <a> elements in the origin page:

<a class="imgClass" href="http://example.com/path/to/page.html#imgOne">Link to show image one</a>
<a class="imgClass" href="http://example.com/path/to/page.html#imgTwo">Link to show image two</a>
<a class="imgClass" href="http://example.com/path/to/page.html#imgThree">Link to show image three</a>

And in the receiving page, the CSS:

/* selects the relevant images: */
.imgClass {
    /* hides them: */
    display: none;
}

/* selects the image whose id appears in the URL: */
.imgClass:target {
    /* shows that image: */
    display: inline-block;
}

Reference:

:target pseudo-class.

answered Nov 23 '14 at 06:51

David Thomas

249,100
51
377
410

Anchoring is a great idea, I can't believe I didn't think of that. Problem is that the CCS on the receiving page. The class .imgClass is not actually being hidden or displayed. This means that all the images would be displayed and the link would just anchor to a certain one. I would like all the other ones hidden and only the one being anchored to displayed. – Алина Заморская Nov 23 '14 at 07:11
Yes, that's the downside of this approach; you *need* to be able to hide (and therefore select) the images you want to optionally present, how you do that depends entirely on the HTML (which, clearly, we don't know). Also, should any other link on that page link to another element on that page, the chosen image will (by design, and the nature of `:target`) be hidden once more. It's imperfect, unfortunately. – David Thomas Nov 23 '14 at 07:15
Nevermind, it's a late night. I got it all working thanks to you. The images on the receiving end need to have an ID and a Class in order for this to work. Thanks a lot! You saved me about an hour of creating HTML pages just to get different images. – Алина Заморская Nov 23 '14 at 07:17
Well, I'm glad to have been of help! :) – David Thomas Nov 23 '14 at 07:18

score 0 · Answer 2 · answered Nov 23 '14 at 06:24

Use a query parameter.

Link 1 might point to /page?link=1, link 2 might go to /page?link=2, and so on. You'd probably want to generalize out to "which kind of image should display," but you get the gist. Don't forget to include some default value in case no parameter is presented.

And for the record, you'd typically handle the query and choose the image server-side, although yes, you could also do it in JavaScript.

score 0 · Answer 3 · edited May 23 '17 at 10:33

Since I assume that you are not using any server side script what you can do is pass query string parameters from one page to another.

Suppose the name of the second page is images.html you can call the link as images.html?img=1 or images.html?img=2 etc, on the page you need to use javascript to read the query string values.Based on the img value you can load different images. Check this stackoverflow for details

How can I get query string values in JavaScript?

One Styled HTML Page with Dynamic Content

3 Answers3