Map coords html7/6/2023 ![]() ![]() If you cannot get the hang of it, try using an online image map generator.Note that the image above is not mapped out/hyperlinked, but you can see a working example on my sandbox Canvas page. ![]() The first html image map you code will take you a while, but like most things, the process gets easier every time you complete it. Area URLįor each area or shape you are linking, you will need to include the URL you are linking to. ![]() Note: If you are using Photoshop Elements, under the Window menu item, make sure the Info window is selected. Subtract the smaller x value from the larger, and you have your radius. Tweak the position of your cursor until it has the same y value as your center point. Then move your cursor to the left or right until it is over the edge. For circles, first find the center coordinates. As you know, the radius is the distance from the center of a circle to a point on its edge. Then I repeated the process with my cursor over the bottom right corner.įinding the radius for circular hotspots is a little trickier. The x,y coordinates are displayed in the bottom left of the application screen.įor my example, I placed my cursor over the top left corner of the read buttons and recorded the x,y coordinates Paint displayed. Open your graphic in paint and move your cursor to the location of the coordinates you need. I use Photoshop Elements, but Microsoft Paint works just as well. You can use image editing software to find the coordinates of your hotspots. So, a triangle would have three pairs, a polygon five pairs and so on. Polygon image maps will have the coordinates: coords=”x1,y1,x2,y2,x3,圓….” where each xy pair defines a corner of the shape. Rectangles image maps will have the coordinates: coords=”x1,y1,x2,y2 ” where xy1 are the coordinates of the top left corner and xy2 are the coordinates of the bottom right.Ĭircle image maps will have the coordinates: coords=”x,y,radius” where xy are the coordinates of the center of the circle and the radius is the radius of the circle. Different shapes require different coordinates. Area CoordinatesĮach area tag will also include a coords attribute that defines the location of your hotspot by listing a set of x (horizontal) and y (vertical) coordinates. The three options are rectangles ( rect), circles ( circle) and polygons ( poly). Area ShapesĮach area tag will include a shape attribute that defines the shape of your image map’s hotspot. (Sorry, Pluto.) In my example, I am only linking two parts of the graphic (the two read buttons) to two different URLs, so I only need two area tags. If you were linking the planets on a graphic of the solar system to different Wikipedia pages for each planet, you’d need eight area tags. Next you will include an area tag for each hotspot you are defining. For the graphic above, the image map would look like this: Parts and PiecesĪn image map is made up of several parts: a map name, area shapes, coordinates, URLs and the image or graphic the map is defining. There are certainly simpler techniques to achieve the same effect on your website. Image maps are best used in HTML emails because not all email clients support more advanced methods. Image maps allow one graphic to serve double (or triple) duty and link to more than one webpage. Note: If you have one graphic with one button, I’d recommend just linking the entire graphic. But, the image map allows me to define the clickable areas (the read “buttons”) or hotspots and link only those parts of the graphic to my previous blog posts. The “buttons” aren’t actually buttons they’re just part of the graphic as a whole. ![]() ) For example, I could use an image map to create the illusion of buttons on this graphic: (Need to brush up on your HTML skills? W3Schools is a great resource. Now, as promised, I will walk you through manually coding image maps.Īn image map is an HTML element that allows you to link different parts of one graphic to different web locations by defining clickable areas on your image. In a previous post, Use Image Maps to Create Interactive Emails, we discussed using image maps in your HTML emails to create interactive graphics and circumvent pesky styling problems. ![]()
0 Comments
Leave a Reply. |