Question

I have a page with some text and links. I want to display image there itself on clicking those links. However, I am bound of not using javascript at all. All I can use is some server side component like PHP. Thanks

Answer 1

Since you stated in a comment that you don’t want to reload the page and can’t use Ajax, PHP won’t help you because it runs on the server. Instead, you can achieve what you want with CSS. Have a look at this simple demo.

Basically, you put the image inside the link:

<a href='#img1'>link text <img src='...'></a> 

and then specify in your CSS something like:

a img {display:none} a:visited img {display:inline} 

so the image is hidden by default, but once the user clicks on the link, the image is displayed. If you have several images on your page, you must assign each link a different href anchor:

<a href='#img1'>link text <img src='...'></a> <a href='#img2'>link text <img src='...'></a> 

One potential issue with this approach is that once a user has revealed a particular image, that image will also be revealed by default on that user’s subsequent visits to that page unless he clears his browser history. If you want to prevent that from happening, i.e. always hide all images by default, then, for example, your PHP code could generate random href anchors each time.