-6

I want to create a Hyperlink text on top of the image in HTML5 . Please suggest how to do ?

Regars, RAvi

5
  • 1
    any example how it should look like
    – Stefan
    Nov 17, 2013 at 13:03
  • I think you should go with a div which have background image as the image you want to place and then write inside it.... Nov 17, 2013 at 13:11
  • I need to show text with hyperlinks hover on Image, I have tried with text in same div where image is there. But it doesn't wotk and i think the text is displaying behind the image.
    – RKCY
    Nov 17, 2013 at 13:13
  • Follow below answer, it is the same implementation as I mentioned... Nov 17, 2013 at 13:15
  • why this question put on hold? I have asked a related to HTML5 questions and I got few valid answers for this also.
    – RKCY
    Nov 17, 2013 at 18:24

2 Answers 2

2

you don't need javascript for this only css and html

<div id ="all"><a href="http://google.com">Click here to go</a></div>

#all{    
background:url('http://jsfiddle.net/img/initializing.png') no-repeat;
width: 200px;
height: 200px;
}

demo for this

For 4 links as you want

<div id ="all">
<a href="http://google.com">Click here to go1</a><br>
<a href="http://hotmail.com">Click here to go1</a><br>
<a href="http://yahoo.com">Click here to go1</a><br>
<a href="http://google.com">Click here to go1</a><br>
</div>

demo

5
  • Yes, its great, but i need to display 4 text link on top of the image. Not only one. Can i use different div and can give id to css to display it?
    – RKCY
    Nov 17, 2013 at 13:16
  • @RaviKChowdary this 4 links should be Horizontal or Vertical?
    – Hichem
    Nov 17, 2013 at 13:27
  • same like the above vertical :) i will try with the above code once
    – RKCY
    Nov 17, 2013 at 13:31
  • @RaviKChowdary You never mentioned anything about 4 text links in the question, so how were we supposed to know? Be specific in the question!
    – Mr Lister
    Nov 17, 2013 at 13:45
  • @RaviKChowdary can you please turn the answer as correct ?
    – Hichem
    Nov 17, 2013 at 16:29
0

Use an imagemap. This lets you have as many links as you want, with no CSS needed!

However, imagemaps are buggy on (some) iphones.

Not the answer you're looking for? Browse other questions tagged or ask your own question.