Mac App To Make X3 X2 X1 Png Images

Posted on by
  • Added apps: WindowsLive 10.7 Marketplace 1.2 MyPhone 1.6 (latest version) PHM RegEdit Office 2010 Final CHT 2.0.0 beta, Editor R0 and Scheduler Huashan Notification Enhancement Amarullz GreenBlack 6.5.x theme (modified by me) Added Call History, Documents and Facebook tabs PLToggle (hold 'Send' key to rotate any app to landscape/portrait) BG Tweak.
  • ICO Convert is a free online icon maker and favicon generator, with it you can make icons from png or jpg images, just upload a photo of yourself, resize and crop it, convert to a shape you like, add borders and shadows, and save it as a PNG image or Windows icon.

How to Manually Code HTML Image Maps

Make a copy of the image you want to resize. Go to the image you want to resize, right-click it, and click Copy in the drop-down menu, then right-click an empty space in the folder or on the desktop and click Paste. Failing to make a copy of the image will result in the original image being modified.

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. Now, as promised, I will walk you through manually coding image maps.

Mac App To Make X3 X2 X1 Png Images Download

Recap

Mac App To Make X3 X2 X1 Png Images Black And White

An 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. (Need to brush up on your HTML skills? W3Schools is a great resource. ) For example, I could use an image map to create the illusion of buttons on this graphic:

The “buttons” aren’t actually buttons; they’re just part of the graphic as a whole. 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. Note: If you have one graphic with one button, I’d recommend just linking the entire graphic. Image maps allow one graphic to serve double (or triple) duty and link to more than one webpage.

Image maps are best used in HTML emails because not all email clients support more advanced methods. There are certainly simpler techniques to achieve the same effect on your website.

Parts and Pieces

An image map is made up of several parts: a map name, area shapes, coordinates, URLs and the image or graphic the map is defining. For the graphic above, the image map would look like this:

Make

<img src=“blogposter.png” width=”400” height=”400” alt=”Blog Poster” usemap=”#blogposter”>

<map name=”blogposter”>

Mac App To Make X3 X2 X1 Png Images Free

<area shape=”rect” coords=”145, 128, 255, 174” href=https://fiorecommunications.com/2014/03/27/use-image-maps-to-create-interactive-emails/” alt=”Use Image Maps”>

<area shape=”rect” coords=”145, 335, 255, 383” href=https://fiorecommunications.com/2013/10/30/great-content-is-more-than-a-catchy-headline/ alt=”Great Content”>

</map>

Map Name and Graphic

<img src=“blogposter.png” width=”400” height=”400” alt=”Blog Poster” usemap=”#blogposter”>

<map name=”blogposter”>

Your html image map will start, of course, with the image you’re mapping. Most email editors have a user-friendly way of inserting images into your emails that doesn’t require coding. You will, however, need to add the usemap attribute to the image tag in this format: usemap=”#mapname”>

The map name can be whatever you want, but I’d recommend naming it something logical, especially if you’re going to be grabbing and repurposing this code later on or you are using more than one image map. You will also need to add the name attribute in your opening map tag.

/helicopter-game-free-download-for-phone.html. <map name=”blogposter”>

Area

Next you will include an area tag for each hotspot you are defining. 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. (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.

Area Shapes

Mac App To Make X3 X2 X1 Png Images Online

Each area tag will include a shape attribute that defines the shape of your image map’s hotspot. The three options are rectangles (rect), circles (circle) and polygons (poly).

Area Coordinates

Each 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. Different shapes require different coordinates.

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.

Circle 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.

Polygon image maps will have the coordinates: coords=”x1,y1,x2,y2,x3,y3….” where each xy pair defines a corner of the shape. So, a triangle would have three pairs, a polygon five pairs and so on.

You can use image editing software to find the coordinates of your hotspots. I use Photoshop Elements, but Microsoft Paint works just as well. Open your graphic in paint and move your cursor to the location of the coordinates you need. The x,y coordinates are displayed in the bottom left of the application screen.

For my example, I placed my cursor over the top left corner of the read buttons and recorded the x,y coordinates Paint displayed. Then I repeated the process with my cursor over the bottom right corner.

Finding the radius for circular hotspots is a little trickier. As you know, the radius is the distance from the center of a circle to a point on its edge. For circles, first find the center coordinates. Then move your cursor to the left or right until it is over the edge. Tweak the position of your cursor until it has the same y value as your center point. Subtract the smaller x value from the larger, and you have your radius.

Note: If you are using Photoshop Elements, under the Window menu item, make sure the Info window is selected. This will list the x,y coordinates.

Area URL

For each area or shape you are linking, you will need to include the URL you are linking to.

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. If you cannot get the hang of it, try using an online image map generator.

Recommended Posts