Showing text association of an image (an alt) on another HTML page

Question

This is probably a simple lookup, but since I don't know how to word my question in the form of a google search, I brought it here. I have a number of divs with an image associated inside each div. With each image, I gave it an alt for word association. I might need to use title instead, but for now I am just going to use alt for the purpose of my question. I want the user to click each image and link them all to the same html page (kind of like an under construction page). For obvious refactoring, I only want one of these html 'under construction sites'. However, I want them slightly personalized to show that the image they clicked is being noted as under construction. iE:

<div class="view view-first">
               <img src = "img/storage.jpg" alt="Storage Corp">
               <div class="mask">
               <h2>Storage Rental Space</h2>
               <p>Develepment, Server</p>
               <a href ="server.html" class="info">Read More"</a>
            </div>
        </div>

So I would want them to click on read more, have them go to server.hml where it says something like 'Sorry Storage Corp is under constriction'.

Easy enough for one image, but let's say I have 20, and I want one server.html that spits out a different 'Sorry xxxx is under construction'. Do I created an empty div in server.html and call the text from the image alt text for the image they clicked into the html page for each image? If so, what is the proper syntax? Maybe I have been too knee deep in JS for the last few weeks that I just can't think of a proper way to do with without declaring a universal scope to hold the string and call it on an image click?

Thanks for any tips!

How about you pass the text as a parameter, something like `server.html?q=Storage+Corp` and read the parameter on index.html and display it ? — Ankur Anand, Jul 14 '15 at 18:10
Prevent the default click event and then do what @AnkurAnand said with passing a parameter based on the 'id' of the image or (better) a 'data-x' attribute. But what attempt have you, yourself tried? — codyogden, Jul 14 '15 at 18:12

score 1 · Accepted Answer · edited May 23 '17 at 12:29

You’re likely to need either a server-side language or JavaScript to make the result page dynamic. The simplest way to do this would be to include the text you want in the href as part of the URI. For example "server.html?text=Sorry+wrong+page". In server.html, you could then grab this variable from the GET string and put it into the page.

All server-side languages give you access to GET variables. In JavaScript, it’s a little more complicated. See this question for ways to do it.

Showing text association of an image (an alt) on another HTML page

1 Answers1