CODEWITHSUNDEEP
javascriptjqueryhtml
ProgAndPlay
ProgAndPlay

Reputation: 277

Anchor inside an image

Just for curiosity, is it possible to define an anchor inside an image? Let's say I have an image and I want to jump right into its middle (vertically or horizontally), it that possible? (It doesn't matter if it is pure html or with the aid of javascript or another trick). Well, breaking an image in two would certainly make this easier, but besides that is there any way available?

Upvotes: 0

Views: 88

Answers (2)

RamblinRose
RamblinRose

Reputation: 4963

Sure you can! Look into mixing the <map>, <area> and <img> elements like this

<map name="mymap">
    <area shape="rect" coords="174,240,400,370" onclick="alert('an area!')"/>
    <area shape="rect" coords="19,378,120,480" onclick="alert('another area!')"/>
    <area shape="rect" coords="0,507,399,549" onclick="alert('the bottom area!')"/>
</map>
<img src="myimage.png" usemap="#mymap" ismap>

Here's a plunkr! Tap on the box, the footer banner and the fine print to enjoy the awesome.

Upvotes: 1

css
css

Reputation: 944

You could use jQuery scrollTo and specify an absolute position within the window. For example, if you have an image that's 2000px high, you'd get the absolute position of the image in the page, and then add to that the position within the image you want to move to. To get to the middle of that image if it's located at 100px, you'd use $(...)scrollTo("1100px", 0)

For full reference on scrollTo: http://demos.flesler.com/jquery/scrollTo/

Upvotes: 1

Related Questions