Categories
Home-and-Garden

How to add a hyperlink to a jpeg in photoshop

Although it’s advisable to use text as links, rather than images, as it offers better discoverability, a little bit of variety also never hurt anyone.

Setting up an HTML clickable image gives visitors to your blog or website a bit of visual flair while providing a way to link to related pages. If you wish to create an HTML image link, then we’ll show you the most straightforward methods available to do so.

The Clickable Image HTML Code

If you want to use an image for your clickable HTML, follow the steps in the tutorial below. Or, watch the overview video of how to create clickable images using HTML code:

1. Select an appropriate image

It’s best to choose an image that reflects the link that you want it to redirect to. A button link HTML would be best served by an image of a button along with the name of the page it lands on.

An envelope or a message icon would best represent an HTML email link, and so on. Nothing is stopping you from using whatever image you want, but it’s better to think about the visitors to your site and how you want to direct them.

2. Optimize the image size

If you’re frequently planning to add image HTML files, then it’s best to reduce the size of the image that you use. Large file sizes will slow down a webpage, and this will begin to add up eventually.

Any good image editor will have an image resizer. If you don’t have an image editor on hand, you can use free online ones, like PicResize.com or ResizeImage.net to do it for you.

3. Upload the image to an image Hosting Site

In order to use the image as a clickable link, you will need to get its HTML link code. To do this, you will have to upload the image online.

There are plenty of options to do this, such as Dropbox, Imgur, or even Google Photos. As long as you can get the image URL, then it’s okay.

Get the URL you want to link

4. Enter the following HTML code

Once you have your image link and the URL of the page you want to be linked, you will need to type in this code:

”an

This is the insert image HTML code that assigns a URL address to the image itself. Replace the URLs as indicated in the code above, but be sure to keep the quotation marks.

The alt text is intended for those who aren’t able to view the image to know what the link is supposed to be about.

An Alternative Method

If you’re using WordPress as a content management platform, then a more straightforward method is available to you. This technique is as follows:

  1. Download the image you wish to use on your computer. Be sure to optimize the image size as it does add up over time.
  2. Open your WordPress Dashboard.
  3. On the Dashboard menu to the left, click on Post.
  4. Click on Add New, either on the menu or on the button to the right.
  5. Click on the + button below the Add Title text.
  6. Click on Image. If you can’t see the Image icon, click on Browse All and scroll down until you find it.
  7. Upload the image that you selected. Alternatively, if an image is in your media folder, or you know the URL of your image, you can also use that.
  8. Once uploaded, click on the Edit Link icon above the image.
  9. Type in the URL of where you want the image to link to.
  10. Press Enter to apply. You can press Preview on the upper right corner to see the clickable image as it will appear on your webpage.

Best Used in Moderation

Using an HTML clickable image is a great way to spice up a blog or a webpage. It draws the visitor’s attention and can direct the flow of your website’s traffic to where you want it to go. Be sure to use it in moderation, though, as too much of anything is never good.

How to add a hyperlink to a jpeg in photoshop

Adobe Photoshop is a robust image creation and editing program useful in many business applications. Among many other graphics functions, Photoshop allows you to manipulate images to be used on the Web. Adding links in Photoshop makes an image clickable on a website. Links can be set to open in the same Web browser, a new browser or a new tab within the browser.

Open Adobe Photoshop and select the image to which you wish to add a link.

Slice your image using the Slice tool from the toolbox. This will select the area of the image you wish to turn into a link. You can select the entire image or certain portions of it. To use the Slice tool, hold down your mouse button while you drag over the area of your choice.

Select the slice you want to link using the Slice Select tool from the toolbox. Double-click on the slice to open the Slice Options box.

Type a name for the slice along with the full website address where you want to link. Don’t forget to add the “http://” in front of your desired Web address inside the URL text box.

Enter your target in the “Target” text box. This will tell the browser how to open the link. For example, “_blank” will open a new Web browser when a user clicks on the link. Click “OK” when finished.

Save the file and optimize for the Web. This can be done by clicking “File,” then “Save for Web.” Select the image optimization options that you want to apply to the file. The most common options are to save the file as a JPEG, GIF or PNG image file. For most uses, a JPEG will be a universal choice. The “JPEG Options” box appears, which allows you to select the size of the file and the quality level. For most uses, the default settings here should be sufficient. Click “OK.”

Name the file and select the file type as “.html” under the “Save as type” menu. Ensure the “All Slices” option is turned on and click “Save.”

One of the many useful features of Adobe Photoshop is being able to add hyperlinks to images in photoshop. This is primarily done using the slice tool. Photoshop adds HTML or CSS to sliced images that load links in web pages. If different parts of one image are sliced, they are reassembled and load as one seamless image with separate hyperlinks saved. In the following article, I’ll guide you step by step on how to add and save single or multiple hyperlinks to image files in Adobe Photoshop.

How to add a hyperlink to a jpeg in photoshop

  1. Open the image you want to add hyperlinks to in Adobe photoshop. You can do this by dragging the image from its location on your PC onto photoshop, or go to File>Open or File>Place.
  2. Add any text layers or buttons that you want to have hyperlinks. When you click the texts or buttons they will open their own links if you follow this method.
  3. Select the slice tool. It’s usually hidden under the crop tool. If so, click and hold the crop tool and it will open up a drop-down with the different tools that include the slice tool.How to add a hyperlink to a jpeg in photoshop
  4. Click and drag on the areas of the image you want to have the hyperlink. Slice the necessary text, buttons and other areas you need.How to add a hyperlink to a jpeg in photoshop
  5. Right-click a sliced area and select “Edit slice options” to get the slice options pop-up window. In the options, name your slice to make it easier to identify. Add the URL you want that part of the image to link to. In the target field, type _blank if you want the link to open in a new tab in the browser. Then click ok once you’re done with the options.How to add a hyperlink to a jpeg in photoshop
  6. Do the same for all the other slices and add their respective URLs. If you just want one URL for the whole image you can slice the image as a whole. Just click and drag from one corner to another.
  7. Save your image with the hyperlinks. Go to File>Export>Save for Web…How to add a hyperlink to a jpeg in photoshop
  8. In the Save for Web settings, choose JPEG or PNG-24 in the preset field. Then click Save.How to add a hyperlink to a jpeg in photoshop
  9. In the Save As options, go to the location you want to save the file to on your PC. Name the file. In the format field, select HTML and Images. Then click Save.How to add a hyperlink to a jpeg in photoshop
  10. To test your image, go to the save location on your pc. You’ll see an images folder and a HTML file. Open up your HTML file in your browser. Then click on your hyperlinks. They should open to the URLs you set them to.How to add a hyperlink to a jpeg in photoshop

Now you know how to add hyperlinks to jpeg images with Adobe Photoshop.

What are hyperlinks?

Hyperlinks are text strings or images that direct you to URLs when you click them. They are the means to connecting web pages to other web pages and documents. Without hyperlinks, we’d have to know the URLs to every webpage we need to visit and type it into the address bar on your browser. Hyperlinks can be added to images using different programs including Adobe Photoshop as outlined in this article above. Learn more about hyperlinks by clicking this text hyperlink to the mozilla developer site.

Where do we use hyperlinks?

Hyperlinks are used on webpages where the reader or viewer needs access to information on a different webpage on the internet. Clicking the hyperlink directs them to the address they need to access. Hyperlinks can include a target that instructs the browser to open in a new tab. For example if you click a link in the description of a youtube video, it will open and load in a new tab. This helps the user to switch between the youtube tab and the tab with the link they followed. Read more about using hyperlinks on Wikipedia.

Do hyperlinks work in JPEG?

You can’t save image formats like JPEG and PNG with hyperlinks. However you can create a HTML file with image areas containing hyperlinks as we’ve shown in the steps above using Adobe Photoshop. There are other programs like Outlook and Dreamweaver that allow you to add hyperlinks to images as well. Learn how to add hyperlinks to an image in Microsoft Outlook here . To learn how to add hyperlinks to images in Adobe Dreamweaver, click here for a wikihow article.

Can images be hyperlinks?

Yes, you can make image hyperlinks by adding URLs and saving them as HTML images through the steps above. However, image formats like JPEG and PNG cannot be saved as hyperlinks since they are not mark-up languages.

How do I insert hyperlink images in an e-mail?

You can upload an image format like JPEG or PNG to Gmail and add a URL hyperlink to it. Follow this guide by How-to Geek to learn how.

Conclusion

You can add hyperlinks to JPEGs and PNG by opening in Photoshop, using the slice tool and saving as HTML images. This creates an HTML file and a folder with your image resources. You can add this to webpages and the separate slices will reassemble into a single image with separate hyperlinks for each slice.

I hope you found this article helpful. Subscribe to our mailing list and be the first to get such articles and freebies first. Comment below for any queries or compliments. Thanks for the read!

Adding a hyperlink to an image is not as easy as it seems. You may think that all you need is to copy and paste the URL into your text, but how will people get there? The best way is by adding a link with Photoshop.

We will discuss how you can add a hyperlink to an image in Photoshop so that your readers can easily access it without any problems.

How to Add a Hyperlink to A Jpeg in Photoshop

In this how-to tutorial, we’ll show you how to add a hyperlink to a jpeg in photoshop. This is important for when you want visitors of your website to click on certain images and have them take them directly from the page, they’re on over to another one.

It’s quick and easy, and you need the Right Steps for the job.

Follow those steps.

Step 1:

  • Go ahead & open photoshop.
  • Click “File>new” or press “Ctrl+0”.
  • Again press the “Ok” option.

How to add a hyperlink to a jpeg in photoshop

Step 2: Then make a little image design or add an image exiting one here.

How to add a hyperlink to a jpeg in photoshop

Step 3: Now, Right-click on the “Crop Icon” & select “Slice Tool.

Step 4: Then, draw a selection where you add a hyperlink.

How to add a hyperlink to a jpeg in photoshop

Step 5: Next, “Right-Click,” then pop up the new window and fill up the “URL” box and click the “OK” button.

Step 6: All things are done. Now go to “File> Save for web.”

All things are done. Now go to “File alt= Save for web.” width=”750″ height=”350″ />

Step 7: Next, New window pops up & and selects toggle visibility (it’s select the whole page), then hits the “Save” button.

How to add a hyperlink to a jpeg in photoshop

Step 8: In the end, Again pop pop-up the window, click the format drop-down box, select the “HTML and Images” option, and click the “Save” button.

How to add a hyperlink to a jpeg in photoshop

Step 9: Now open it to any web browser, click the “Link Here” button.

How to add a hyperlink to a jpeg in photoshop

See, open our website.

How to add a hyperlink to a jpeg in photoshop

Conclusion

One of the most common ways to link a photo is by using an image file. It can be done in Photoshop or any other editing program that supports inserting hyperlinks into images (.jpg, .gif). The steps are fairly simple and only take a few minutes to complete.

I’ve shown you how to create a hyperlink in Photoshop. If you have any questions or need some more help on the steps, we went over here, feel free to leave me a comment below and let me know what else would be helpful for you.

While creating and formatting your webpage, it is going to be very useful for you to know how to insert a link straight into your photoshop project. And guess what, the best part is that that process is quick and relatively simple! Just follow this tutorial:

To begin, open up the photo you would like to work with in Photoshop . Next, while using the “Slice Tool” from the Toolbar (found by right-clicking on the “Crop Tool”), select the photo (or specific area in the photo) that you would like to add a link to. A yellow selection-border should appear around that area when you are done.

Now right-click within that area and chose Edit Slice Options… . Then insert the full web address (http://www.websitename.com) you would like to link to into the URL box and click “OK”.

How to add a hyperlink to a jpeg in photoshop

How to add a hyperlink to a jpeg in photoshop

Finally, save the photo by going to File > Save for Web. Select the “4-UP” tab at the top, chose your preferred file size and type (JPEG, GIF, ect.) and then click “Save”. In the next window that opens, change the format of the file by going to the Format drop-down box and selecting “HTML and Images” and then click “Save” again.

How to add a hyperlink to a jpeg in photoshop

How to add a hyperlink to a jpeg in photoshop

You will now have successfully inserted a selectable link into your photo, which can be uploaded to to your website (thanks to the photo file’s new HTML code). Congratulations!

Mother/Gamer/Writer recently went through a huge overhaul and if you’re like me and living on a budget, sometimes it’s just not feasible to hire someone to do a job you can ultimately do yourself. Yes, it may take a lot of trial and error and a massive amount of time especially for newbies (don’t worry I’m one too), but it can be done. And once you figure out how to tweak your blog or website on your own, it’s gratifying – at least it has been for me. Which means, if I can do it, you dear reader can do it too!

In this edition of Lasers

Lipstick Tips and Tricks I’m going to show you something that took me FOREVER to figure out. Because why? I refused to google the answer! Crazy I know, but I wanted to figure it our for myself.

What You’ll Need…

  • Photoshop (I’m using CC for this tutorial)
  • You Image or Images
  • The Links

Step One … Open Your Image

Create a new document and place your image or open one that you’ve made and want to embed with a link. For the sake of this tutorial I’m using an image I’ve already created and want to use in my sidebar.

Step Two … Locate The Slice Tool

How to add a hyperlink to a jpeg in photoshop

Now that you’ve created an awesome work of art, next you need to locate the “Slice Tool”. If the tool is not visible upon opening Photoshop (it wasn’t for me), then click and hold the bottom right corner of the “Crop Tool” and select “Slice Tool” from the list of choices.

Step Three … Create Your Slice

How to add a hyperlink to a jpeg in photoshop

Use the “Slice Tool” to select the area on your image you want to add the link and make clickable to viewers. You can select a small portion of the image or select the entire area. You can also make more than one hyperlink in the same image by doing this step again. In the above example I’ve created four “slices” where I will place links.

Step Four … Add The URL

How to add a hyperlink to a jpeg in photoshop

Once you have your clickable area selected, double click (or right click) the “slice”, and the “Slice Options Window” should open. Inside this window you can now add the webpage address in the “URL” field. A URL is required to make the hyperlink work.

How to add a hyperlink to a jpeg in photoshop

Quick Tips

Adding _blank in the “Target” field will open the link in a new web browser or tab

Adding content to the “Message Text” field will change the default message in the browser and your message will be displayed in place of the URL in the status bar

Do step four to add a hyperlink to all the “slices” you’ve made in the image

Step Five … Save For Web

How to add a hyperlink to a jpeg in photoshop

Now that all your links are ready it’s time to save your fabulous image! Go to “File” and select “Save for Web”. If “Save for Web” is not visible (again, it wasn’t for me), go to “File” and select “Export”. There you should see the “Save for Web” option (where the options are located will depend on your version of Photoshop). Here you can also preview the image to make sure your link works correctly.

How to add a hyperlink to a jpeg in photoshop

How to add a hyperlink to a jpeg in photoshop

Next, select the type of file you want to save: “PNG”, “JPEG”, High Quality, Low, etc. and then click save. Lastly, set the format to “HTML and Images” and make sure the field Slices is set to “All Slices”.

Did you try it? Let me know if it worked for you!

How to add a hyperlink to a jpeg in photoshop

Helpful links:

Diayll-The Nerdy Lipstick Lady

Names Diayll, I am a 34 year old country girl, living and enjoying life. You can find me representing the Xbox (EliteDiva336) and anything else game related on Twitter at MomGamerWriter. But don’t take my word for it, check me out!

1 comment

It’s really a great and helpful piece of information. I am happy
that you just shared this helpful info with us. Please stay us up to date like this.

Thank you for sharing.

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    How to add a hyperlink to a jpeg in photoshop

Follow the chaotic world of a geeky mom as she DIY’s and cosplays her way through life.

Contaminated Minds

Connect With Us!

Next Blog Feature…

Check back soon to see who we’re hosting!

Need A Coupon?

Save 10% Off w/ code SAVE10 at Lootcrate.com

Advertise With Us

How to add a hyperlink to a jpeg in photoshop

Earn a % back for shopping online. Who doesn’t like free money? (Get a $10 giftcard for signing up!)

Geek Unboxing

How to add a hyperlink to a jpeg in photoshopWant a cheap nerdy subscription box? Check out my latest LOOT Crate Unboxing.

How to add a hyperlink to a jpeg in photoshopCheck it out. Love Make-up? Don’t miss my latest Ipsy Glam Bag Review!
See More Subscription Box Reviews & Unboxings by MGW! Beauty, geeky, Crowdtap Samples and more!

Most people know how to add one link to an entire image, but did you know there’s a way to selectively add multiple links to certain areas of your image? Adding multiple links to different parts of an image is very useful for product round-ups, and linking directly to items in photos. It’s super easy and quick to do online using HTML and doesn’t require any coding knowledge.

Personally, I started to research this capability because I wanted to use a combination of RewardStyle links and my own Amazon links in the same product round-up post. The “Money Spot” widget by RewardStyle only allows you to link to products on their platform and I used that widget for a while, but after I ran into some trouble with their “Boutique” widget disappearing from my posts, I started to move away from using RewardStyle widgets and host the images on my blog directly.

Creating the links on your own is way better for several reasons: you have control over the image, the links, everything. If you want to change or update a link, it’s super easy to do without going through RewardStyle. If RewardStyle servers go down temporarily, then so do your images. Maybe you want to link to a product that isn’t featured on RewardStyle, or you want to link using a different affiliate network (like me with Amazon). In all of these cases creating your own image is the way to go.

Set Up Your Blog

What we’re going to do is create an Image Map, which basically tells your readers’ browser which sections of the image are going to be linked and where.

To get started, install this Responsive Image Maps plugin. This plugin helps keep the links aligned to your photo no matter what size the user is viewing it on their browser (mobile, tablet, etc.).

Upload Your Image

Next, upload your image to your website and copy the full .jpg URL. To do this, simply upload your image like you normally would, go to to the Text editor as opposed to the Visual one, and then find where your image is. Copy the .jpg URL as seen here:

Once you’ve got the URL copied, head on over to this website: image-map.net

From here, select “Load Image from Website” and paste the URL from your image.

Create Your Hotspots

On the next page, you’ll be asked to draw boxes around the areas where you’d like to link. Click on the top left area of your first link. Then click on the bottom right spot where the box will end. A box should appear connecting the two dots. You can easily click and drag the dots to adjust them.

How to add a hyperlink to a jpeg in photoshop

At the bottom of the page, you’ll see the option to add a title and a link to the box you just drew. This is where you can add your affiliate URL and give your link a title to remember later on if you like.

You can repeat this as many times as you need by clicking “Add New Area.” Make sure the little circle to the left of the line under the “Active” column is selected as you are drawing your boxes.

Grab the Code

When you’re done, click “Generate Code” and copy the text in that field. Go back to your WordPress post, make sure you’re in the Text editor (not the Visual one) and then paste the code. Be sure to delete the image code that is currently there otherwise your image will appear twice.

When you click “Preview” in your post, you should be able to see that the image appears with the links you set!

  • Double-click a slice with the Slice Select tool . (If the tool isn’t visible, hold down the Crop or Slice tool.)
  • With the Slice Select tool active, click the Slice Options button in the options bar. This method is not in the Save For Web & Devices dialog box.

You can specify how the slice data appears in a web browser when exported with an HTML file. The available options vary according to the slice type you select.

Image slices contain image data. This is the default content type.

No Image slices let you create empty table cells that can be populated with text or a solid color. You can enter HTML text in a No Image slice. If you set the Text Is HTML option in the Save for Web & Devices dialog box, the text is interpreted as HTML when viewed in a browser. Slices of type No Image aren’t exported as images and can be previewed in a browser.

Setting options for an auto slice promotes the slice to a user slice.

As you add slices to an image, you may find it helpful to rename slices based on their content. By default, user slices are named according to the settings in the Output Settings dialog box.

The Name text box is not available for No Image slice content.

You can select a background color to fill the transparent area (for Image slices) or entire area (for No Image slices) of the slice.

Photoshop does not display the selected background color—you must preview the image in a browser to view the effect of selecting a background color.

Assigning a URL to a slice makes the entire slice area a link in the resulting web page. When a user clicks the link, the web browser navigates to the specified URL and target frame. This option is available only for Image slices.

Displays the linked file in a new window, leaving the original browser window open.

Displays the linked file in the same frame as the original file.

Displays the linked file in its own original parent frameset. Use this option if the HTML document contains frames and the current frame is a child. The linked file appears in the current parent frame.

Replaces the entire browser window with the linked file, removing all current frames. The name must match a frame name previously defined in the HTML file for the document. When a user clicks the link, the specified file appears in the new frame.

For more information on frames, see an HTML reference.

You can specify what messages appear in the browser. These options are available only for Image slices and appear only in exported HTML files.

Changes the default message in the browser’s status area for a selected slice or slices. By default, the slice’s URL, if any, is displayed.

Specifies an Alt tag for a selected slice or slices. The Alt text appears in place of the slice image in nongraphical browsers. It also appears in place of the image while the image is downloading and as a tool tip in some browsers.

When you choose a slice of type No Image, you can enter text to be displayed in the slice area of the resulting web page. This can be plain text or text formatted with standard HTML tags. You can also select vertical and horizontal alignment options. For more information on specific HTML tags, see an HTML reference.

Photoshop does not display HTML text in the document window; you must use a web browser to preview the text. Be sure to preview HTML text in different browsers, with different browser settings, and on different operating systems to confirm that your text is displayed correctly on the web.

The amount of text in a No Image slice can affect the layout of an exported page.

(Save For Web & Devices dialog box only) If desired, select options in the Cell Alignment section of the dialog box:

Uses the browser’s default for horizontal alignment.

Aligns the text to the left side of the slice area.

Aligns the text to the center of the slice area.

Aligns the text to the right side of the slice area.

Uses the browser’s default for vertical alignment.

Aligns the text to the top of the slice area.

Sets a common baseline for the first line of text in cells in the same row (of the resulting HTML table). Each cell in the row must use the Baseline option.

How to add a hyperlink to a jpeg in photoshop

In today’s world of “digital everything,” interactivity and engagement are considered prime measures of value and appeal, particularly in professional applications. Whether you are developing a website or creating a presentation for your colleagues, enhancing your work with an additional degree of connectivity and dynamic user interfacing will add a degree of polish and sophistication that stands out from the crowd.

Although many extremely complicated, code-driven methods of improving engagement are now available to developers, even the more classic, time-tested tactics are still proving effective on a daily basis. One such example is incorporating hyperlinks into JPEG files. This relatively straightforward process can dramatically improve navigation for audiences and ensure that your content is traversed smoothly and organically by your intended recipients. Adding hyperlinks to your JPEG files can be accomplished relatively quickly and easily, regardless of the particular medium you are working in.

Video of the Day

Create a Hyperlink in JPEG Files

The first steps you must take to add a hyperlink to your image is to determine the specific platform in which your JPEG will be presented. For example, if you are embedding a clickable JPEG into a PowerPoint presentation, you will use a different series of tools than if you were integrating this same image into a website. Fortunately, however, the steps for placing a link into your image can be completed without too much effort, regardless of the platform you are using.

If you are embedding a link into a JPEG file within a PowerPoint presentation, you can do so by right-clicking the image file within the presentation and selecting the “Hyperlink. ” button from the drop-down menu. At this point, you will be prompted to provide the hyperlink of the website you are planning on sending users to when they click your image file.

Embedding Hyperlinks in JPEGs for Websites

Depending upon the specific web editing platform you are using, you can embed a hyperlink in a JPG file that can then be accessed by users browsing your website with one or two clicks of the mouse. For example, if you are using the Squarespace web editing platform, you can hover over the image you have placed on the website, select the hyperlink button (represented by linking chains), and inputting the URL for the website you would like to link to.

In other web builders, such as Adobe Dreamweaver, you will also have the option to incorporate the hyperlink by directly editing the HTML code of the site itself. With this level of customization also comes opportunities to fully personalize the look and feel of the hyperlink being used. If this degree of tailoring is integral to your web development needs, you can do so without an extensive degree of effort.

Exploring Important Considerations

Although it may sound obvious, it is essential that you test all of your hyperlinks before publishing your website. In some situations, a hyperlink may send online audiences to a website that, although originally in existence at the time the link was created, as now stopped functioning entirely. Taking the time to refresh these hyperlinks can help you avoid any embarrassing missteps over time.

How to add a hyperlink to a jpeg in photoshop

HTML Image Map has been around all this while, and yet not many web pages are using it when it comes to single image with multiple links. It’s really handy and fast for web designers or developers to create multiple “Hot Spots” linking within a single image, without slicing any image for linking.

For instance, your client has given you a list of sponsors and he wants each of the logo to be linked to the sponsor’s web page on his website. You may want to try out Image Map, it will make your job much easier.

[tut demo=”http://www.onextrapixel.com/examples/image-map/” download=”http://www.onextrapixel.com/examples/image-map/image-map.zip”]

What Is Image Map?

Basically, Image Map is a way that allow you to define certain area to be linked within a single image on a web page. This means that, rather than having to link the whole image as one link, you can have lots of different links within that one image.

Still not sure what is Image Map? Check out the demo.

Before we start here are the general attributes for the map tag.

Most of the attributes are used quite often, let’s talk about the shape and the coords attributes. For shape attribute it have rect | circle | poly | default .

For coords attribute, below is a simple overview diagram for the coordinates.

How to add a hyperlink to a jpeg in photoshop

In this tutorial, you will see how you can link several logos to their web pages within a single image. First is to have your image ready, here I mashed up some of the popular web logos into one image.

First create your normal image HTML markup, notice usemap=”#logos” attribute, this is to associate the image map with the image.

Next you will need to find out the coordinates for each of the logo using Photoshop. Let start with a circular logo, first load the image into Photoshop, press F8 for the Info Panel to appear, move your cursor to centre of the circular logo and note down the coordinates.

How to add a hyperlink to a jpeg in photoshop

We will also need to find the radius of the circle. By finding out the difference between the edge of the circle’s coordinates and centre coordinates of the circle, or by using the rule tools in Photoshop. Either way will help you find out the radius of the circle.

How to add a hyperlink to a jpeg in photoshop

Now let’s find the coordinates for a rectangular logo. You just have to find out the top left and bottom right coordinates of the rectangular logo. Using the same method above you will be able to find the coordinates easily.

How to add a hyperlink to a jpeg in photoshop

Once you have find out all the coordinates for each logo, now everything is easy. Just follow the attributes for the Map Tag listed above and enter all the coordinates for each of the shapes you have found.

For custom shape link, you can try poly shape attribute. Just defining those important coordinates and it will form up a more precise Hot Spot area for the link.

[tut demo=”http://www.onextrapixel.com/examples/image-map/” download=”http://www.onextrapixel.com/examples/image-map/image-map.zip”]

Conclusion

Do give this Image Map a try when you need to create multiple links on a single image.