Subscribe to updates
<< September 2010 >>
| Su |
Mo |
Tu |
We |
Th |
Fr |
Sa |
| |
|
|
1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
9 |
10 |
11 |
| 12 |
13 |
14 |
15 |
16 |
17 |
18 |
| 19 |
20 |
21 |
22 |
23 |
24 |
25 |
| 26 |
27 |
28 |
29 |
30 |
|
|
|
Take The Global Broadband Speed Test...FREE!
(I DID!)
|
 
| Creating a Hot-Spot for your images |
Now, suppose you wish to have a hot-spot in the shape of a circle or a polygon (any unusual shape such as a triangle, trapezoid or any other object other than a rectangle and a circle. Just remember, the more you define your object, the better your hot-spot), all you have to do is define the points for the area in which you wish to have a hot-spot just like we did for the rectangle, and it should work.
The circle, however, is a little different than the rest so don't let a little geometry upset you. We will need to know the center as well as the radius of the circle. If you have Photoshop then you've got it made, because then you just have to read the coordinates in the Info box (make sure it is set to pixels in your properties).
Other programs such as Paintshop Pro will give you the coordinates of an image by selecting rulers/grid from the View menu. Other graphic programs may do the same, so you have to check your menus and so forth. If you still are not able to get the coordinates for your image, then my suggestion would be to just use trial and error. You should be able to get it pretty close just by guessing.
You make the coordinates for the circle the same as you did for the rectangle, except change the area shape to circle, and change the coordinates as follows:
[map name="ImageName"][area shape="circle" coords=x,y,r href="hyperlink.html"][/map]
The radius is the distance from the center to the outer edge of the circle, or half of the diameter for those who still remember. Just remember that x = the distance from the left edge of the image, and y = the distance from the top of the image.
And don't forget to change the brackets [ ] back to < >.
I think by now you have pretty much figured out how to make a hot-spot for a polygon.
[map name="ImageName"][area shape="poly" coords=x1,y1,x2,y2,x3,y3,... href="hyperlink.html"][/map]
Another thing, don't forget to use a comma to seperate the coordinates as I have illustrated. That pretty much covers it. Good luck, and if you encounter any problems, please let me know.
Next, we will cover "Creating Multiple Hot-Spots for a Single Image".
Creating Multiple Hot-Spots for a Single Image
There are situations in which you have to have multiple hot-spots from just one image. For instance, you have a picture with several advertisers on it and you want people to be able to click any of the advertisers to go to their link. Instead of breaking up the image into multiple sections you of course can just have, you said it, multiple hot-spots.
You pretty much follow the same steps as outlined earlier, but add a few more tags into the code and you've got it.
[map name="logos"]
[area shape="circle" coords="68,56,33" href="http://www.stumbleupon.com/" title="StumbleUpon" alt="StumbleUpon" /]
[area shape="rect" coords="220,19,306,54" href="http://www.youtube.com/" title="Youtube" alt="Youtube" /]
[area shape="rect" coords="367,32,516,84" href="http://www.google.com/" title="Google" alt="Google" /]
[area shape="rect" coords="556,12,639,115" href="http://www.wikipedia.com/" title="Wikipedia" alt="Wikipedia" /]
[area shape="rect" coords="128,62,244,114" href="http://www.skype.com/" title="Skype" alt="Skype" /]
[area shape="rect" coords="301,103,444,136" href="http://www.yahoo.com/" title="Yahoo" alt="Yahoo" /]
[area shape="rect" coords="25,158,135,207" href="http://www.ebay.com/" title="eBay" alt="eBay" /]
[area shape="rect" coords="180,147,271,175" href="http://www.flickr.com/" title="Flickr" alt="Flickr" /]
[area shape="rect" coords="299,166,379,208" href="http://www.digg.com/" title="Digg" alt="Digg" /]
[area shape="circle" coords="500,184,32" href="http://wordpress.org/" title="Wordpress.org" alt="Wordpress.org" /]
[area shape="rect" coords="599,142,667,209" href="http://www.blogger.com/" title="Blogger" alt="Blogger" /]
(area shape="default" nohref="nohref" title="Default" alt="Default"/]
[/map]
Notice that at the end there is a tag labeled "Default" with a nohref reference to it. Evidently this is necessary in closing your sequence of codes for your different shapes. Also, don't forget to change back to < >.
That is pretty much it. And like I said, Photoshop or Paintshop Pro are good applications to get your coordinates, and probably most major graphics programs should have some kind of way to get the coordinates for your image. If all else fails, send me the image and I will give the coordinates for it.
Thanks, and good luck!
|
#1 |
on July 02 2010 22:28
#2 |
on July 22 2010 03:24
#3 |
on July 22 2010 03:29
#4 |
on September 09 2010 02:51
|
|
Please Login to Post a Comment.
|
|
Rating is available to Members only.
Please login or register to vote.
No Ratings have been Posted.
|
|
     
Not a member yet? Click here to register.
Forgotten your password? Request a new one here.
|
|
Newest Threads
No Threads created
Hottest Threads
No Threads created
|
|
You must login to post a message.
|
|
