Can a specific part of a picture be used as a link using jQuery or Javascript?

Question

I have this idea to make separate and various parts of a picture(not text) link to different pages or websites, and I want to accomplish without actually creating different photos and the putting them close to one another so it looks like it's one complete picture. Does anybody here have an idea on how to accomplish this using to kind of variation to JavaScript, like jQuery or pure JavaScript or something? Thanks! :-)

Answer 1

I guess, you want to make various portions of an image interactive. ie user should navigate to different locations clicking on different sections of the image or perform some animation.

There are multiple ways to go about it.

1. image map .

you can create various clickable sections on image like given below:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

2 . Create various closely positioned divs (or anyother suitable container, even the img tags itself), and use CSS: Background-position property. something like

    <div style="background-image:url('myImage.png'); background-position:0 0; width:50px height:50px" >
    </div>
  <div style="background-image:url('myImage.png'); background-position:50 0; width:50px height:50px" >
    </div>
  <div style="background-image:url('myImage.png'); background-position:0 50; width:50px height:50px" ></div>
  <div style="background-image:url('myImage.png'); background-position:50 50; width:50px height:50px" >
</div>

learn more about background-position

also take a look at Image Sprites

Answer 2

Have you tried HTML Image Maps ...?

An image map is a picture in which areas within the picture are links. Creating an image involves using the <IMG ...> , <MAP ...> ,and <AREA ...> tags..

Answer 3

Sure CSS will do. HTML:

<div id="linkPictureThing">
    <img src="yourimgage.png" title="" alt=""/>
    <a href="" class="imageSection"></a>
    <a href="" class="imageSection"></a>
    <a href="" class="imageSection"></a>
    <a href="" class="imageSection"></a>
</div>

CSS:

a,img{border:none;}
#linkPictureThing>img{
    width:100%;
    height:100%;/*or auto */
    z-index:-1;
}

links:

#linkPictureThing>a.imageSection{
    display:inline-block;/*Sorry [lt IE 8] lover*/
    width:50%;
    height:50%;
    z-index:1;
    content:'';
}
a.imageSection:hover{
    background:#FF0000;
    opacity:0.8;
}

Or could try relative/absolute positioning with the links to get a more unique location:

#linkPictureThing>a.imageSection:first-child{
    position:absolute;
    top:20;
    left:0;
}

Answer 4

The most correct semantical way is use image maps.

The most easiest way is to place a div on top of the image. In this div make two clickable blocks on different areas.

Example found on http://jsfiddle.net/3mQV2/ with the following code. The advantage of this example is that search engines can index both links.

HTML

<img src="http://lorempixel.com/400/200/" />
<div>
    <a href="test1"></a><!--
 --><a href="test2"></a>    
</div>

CSS

img {
    width:400px;
    height:200px;
    position:absolute;
}
div {
    width:400px;
    height:200px;
    position:relative;
}
div a {
    display:inline-block;
    width:200px;
    height:200px;   
}
div a:nth-child(1):hover {
    background-color:blue;
}
div a:nth-child(2):hover {
    background-color:red;
}