showing image on a link

[KGH]

Dear sir/madam,

I have a work where I have many headings.Each heading should be a link,on clicking should show respective work's image.Should i open new html page where i place that particular image?If so for 10 headings 10 different pages should be there.How efficiently i can do it?Please suggest me.

Thank you.

[davej]

It isn't clear to me what you are asking for.

 

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink

[KGH]

I have a page our services.In that 10 headings are there.These headings should be links and on clicking on this it should show some images.This is the work i have got.I'm asking you on clicking particular heading,should i open a new page(html) in which the image is shown?

If it is the case, I should have 10 html pages which have different images showing.Is it the way i have to do or any other way is there?

Thanks.

[moonstarsun]

This question sounds more like a usability /methodology issue than a css one. There are multiple ways this can be achieved.

 

Wrapping the header in an href anchor tag is the most simple method. (Adding the target="_blank" will open the link in a new window, for a better experience)

<a href="https://www.google.com/images/srpr/logo11w.png" target="_blank"><h1>google service</h1></a><a href="http://rack.1.mshcdn.com/media/ZgkyMDEzLzA5LzE2L2JjL0Jpbmdsb2dvb3JhLmFkYjJkLnBuZwpwCXRodW1iCTEyMDB4OTYwMD4/996d9598/35b/Bing-logo-orange-RGB.png" target="_blank"><h1>bing service</h1></a>

You could also use a javascript function. Depending on your overall scheme and this will give you much more flexibility for implementing. However you should be aware that you are now relying on javascript. This means you must also have a solution for issues with popup blocker, and javascript disabled browsers (which are sadly more common than you think)

<h1 onclick="openImgUrl('https://www.google.com/images/srpr/logo11w.png')">google service</h1><h1 onclick="openImgUrl('http://rack.1.mshcdn.com/media/ZgkyMDEzLzA5LzE2L2JjL0Jpbmdsb2dvb3JhLmFkYjJkLnBuZwpwCXRodW1iCTEyMDB4OTYwMD4/996d9598/35b/Bing-logo-orange-RGB.png')">bing service</h1> <script> function openImgUrl(linkTarget){     window.open(linkTarget); }</script>

 

 

The 3rd and most common method for web-applications is using the javascript DOM to assign values for attributes (in this case href=""). This is for advanced javascript users or developers and can be taxing on your page loading depending on your solution. However, if you have a list of several links or links categorized, you can use dom scripting to add events, attributes and dynamically modify thousands of elements without changing a single part of your actual markup.

 

As I've mentioned there are several more plugins, methods and tricks to do this depending on how creative and robust you are willing to make your design go. These are the 3 most common ways to do it. Hope this helps.

Edited February 26, 2014 by Themoonstarsun