Jump to content
Sign in to follow this  
KGH

showing image on a link

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...