WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

Go to page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1Accespted Multiple clickable portions on a Image. Sat Jan 23, 2010 11:28 pm

Sanket

Sanket
Administrator
Administrator
Multiple clickable portions on a Image.
Using HTML make Mutliple portions on a image clickable

Hello Everyone Very Happy

This is a very simple tutorial to make multiple clickable areas on your image.

Enter this code into your HTML Page.

Code:
<img src="http://i50.tinypic.com/33ze045.png" border="none"
usemap=#Webartz>
<map name=Webartz>
<area shape=rect coords=17,105,256,123 href="http://google.com">
<area shape=rect coords=403,105,479,123 href="http://webartz.forumotion.com/webartz-news-f1/promote-win-t149.htm">
</map>

With the above code we will make two clickable links on the image. Here basically we make rectangular clickable links.

Multiple clickable portions on a Image. 20tm077

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.
Multiple clickable portions on a Image. Ejx2bp

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 Smile

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 9:59 pm; edited 1 time in total

http://www.webartzforum.com

Fred100

Fred100
Registered Member
Registered Member
Just what i was looking for!
Thanks man , thanks a lot for posting this tutorial , I'll try one myself soon enough!

http://www.art-castle.biz/forum.htm

Sanket

Sanket
Administrator
Administrator
Glad you like it Very Happy
Hope i have explained it nicely Wink

http://www.webartzforum.com

Fred100

Fred100
Registered Member
Registered Member
Well it's really complicated when i tried it now Sad

http://www.art-castle.biz/forum.htm

Sanket

Sanket
Administrator
Administrator
Where are you stuck? I am sure its the co-ordinates part.

http://www.webartzforum.com

Fred100

Fred100
Registered Member
Registered Member
yeah those cords thing T-T

http://www.art-castle.biz/forum.htm

Sanket

Sanket
Administrator
Administrator
Okay, did you try it with paint to check the co-ords as suggested?

http://www.webartzforum.com

Fred100

Fred100
Registered Member
Registered Member
wait paint with what?
You refered to MS Paint in this tut?

http://www.art-castle.biz/forum.htm

Sanket

Sanket
Administrator
Administrator
Yes to find out the co-ordinates.

http://www.webartzforum.com

10Accespted Re: Multiple clickable portions on a Image. Mon Jan 25, 2010 12:14 pm

Fred100

Fred100
Registered Member
Registered Member
Oh kay i get it now , thanks bro.

http://www.art-castle.biz/forum.htm

Sanket

Sanket
Administrator
Administrator
Cool Very Happy

http://www.webartzforum.com

Fred100

Fred100
Registered Member
Registered Member
Okay it's my test on it(Not that writing one. Razz)
Spoiler:
so where i put "Click Here"
I have to change the co-ordinates according to that, is it correct?
Or is there a easier way?

http://www.art-castle.biz/forum.htm

Sanket

Sanket
Administrator
Administrator
Yes correct.
Do you want me to tell you the co-ordinates? Or you want to try it yourself?

http://www.webartzforum.com

14Accespted Re: Multiple clickable portions on a Image. Tue Jan 26, 2010 10:07 pm

Fred100

Fred100
Registered Member
Registered Member
Lemme try one myself using the same image thing.
When I'm done I'll edit this post which'll include that thing
--------------------EDIT---------------------------
Here i made it!!
i just saw it again , HTMLs aren't enabled i forgot that T-T

http://www.art-castle.biz/forum.htm

15Accespted Re: Multiple clickable portions on a Image. Wed Jan 27, 2010 12:06 am

Sanket

Sanket
Administrator
Administrator
Oh yes try it out on that html editor.

http://www.webartzforum.com

Fred100

Fred100
Registered Member
Registered Member
I did ,
After checking it there it was finally done , but then i remembered HTML aren't enabled here Anyway thanks.
I have a question btw.
The sides you mentioned like
"Right Edge
Top Edge
Left Edge
Bottom Edge"
Can you just specify them clearly so that i don't have much problem in future?

http://www.art-castle.biz/forum.htm

Sanket

Sanket
Administrator
Administrator
Lets see tomorrow i will make a screenshot of it.

http://www.webartzforum.com

18Accespted Re: Multiple clickable portions on a Image. Thu Jan 28, 2010 12:14 pm

Fred100

Fred100
Registered Member
Registered Member
Uhm W/B the screenie buddy?

http://www.art-castle.biz/forum.htm

Fred100

Fred100
Registered Member
Registered Member
24 hrs past a long time ago T-T

http://www.art-castle.biz/forum.htm

20Accespted Re: Multiple clickable portions on a Image. Fri Jan 29, 2010 10:00 pm

Sanket

Sanket
Administrator
Administrator
I know Fred100, i had not logged in on WebArtz for a long time.
Now since i am online, i will do it in sometime.

edit: Image Added Very Happy
See if thats a bit easier to understand.

http://www.webartzforum.com

21Accespted Re: Multiple clickable portions on a Image. Fri Jan 29, 2010 10:03 pm

Fred100

Fred100
Registered Member
Registered Member
Yeah it's more understandable now!
Thanks man!

http://www.art-castle.biz/forum.htm

22Accespted Re: Multiple clickable portions on a Image. Fri Jan 29, 2010 10:40 pm

Sanket

Sanket
Administrator
Administrator
Glad you are able to understand it better now Very Happy

http://www.webartzforum.com

23Accespted Re: Multiple clickable portions on a Image. Fri Jan 29, 2010 11:14 pm

Fred100

Fred100
Registered Member
Registered Member
Thanks sanket bro , I made that code again & this time in less time than before!!
YAAAY!!

http://www.art-castle.biz/forum.htm

24Accespted Re: Multiple clickable portions on a Image. Fri Jan 29, 2010 11:16 pm

Sanket

Sanket
Administrator
Administrator
Brilliant, thanks for your inputs to improve the tutorial Wink

http://www.webartzforum.com

25Accespted Re: Multiple clickable portions on a Image. Fri Jan 29, 2010 11:35 pm

Fred100

Fred100
Registered Member
Registered Member
Lol
No Problem & here is the result using the Image i made in paint as a decoy Very Happy
http://art-castle-test.forumotion.com/HTML-Test-h1.htm

http://www.art-castle.biz/forum.htm

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 2]

Go to page : 1, 2  Next

Permissions in this forum:
You cannot reply to topics in this forum