Home1
Multiple clickable portions on a Image. on Sat Jan 23, 2010 9:58 pm
Sanket
Administrator
Posts : 5796
Points: 298
Age : 28
Location : Mumbai
Browser:
First topic message reminder :
Multiple clickable portions on a Image. Using HTML make Mutliple portions on a image clickable |
Hello Everyone  This is a very simple tutorial to make multiple clickable areas on your image. Enter this code into your HTML Page.
With the above code we will make two clickable links on the image. Here basically we make rectangular clickable links.  Since now you have seen the demo, we have two clickable links. One over Win HTML Page for your website & the other one over Click Here What we have done is put in the coordinates of the rectangular shapes for each of the text. coords=17,105,256,123 17 as the right edge, 105 as the top edge, 256 as the left edge and 123 as the bottom edge. Now, for beginners who want to easily find the co-ordinates. Open your image with the basic paint. Once you hover over it, it shows the X, Y coordinates. Right Edge(17): Move it over the topmost left corner of your assumed rectangle. (Note the X coordinate) Top Edge(105): Move it over the top edge of your assumed rectangle(Note the Y coordinate) Left Edge(256): Move it over the top rightmost corner of your assumed rectangle (Note the X coordinate) Bottom Edge(123): Move it over the top edge of your assumed rectangle(Note the Y coordinate) An image for your understanding.  Now you have all the 4 coordinates of your rectangle which you can add. You can test the perfectness of your clickable rectangle by testing the code here Repeat this for as many rectangles as you want, so each rectangle can be considered one single link. Thank you  |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Last edited by Sanket on Fri Jan 29, 2010 8:29 pm; edited 1 time in total
