Sometimes you want one image to link to different URLs or you just want one part of your image to be a link. WordPress does not offer a built-in option for this, but do a little prep-work in Dreamweaver and you’re good to go.
For this tutorial, I am going to use Dreamweaver to take this image and add links—or “hotspots”—to the image so each image and circle in the image above hyperlinks to different sites.
- In Dreamweaver, create a new blank HTML document.
- In WordPress, upload your image. Copy the image URL to your clipboard.
- Back in Dreamweaver, paste the image URL between the <img src=” and “> tags:
- Click on the image so the “properties” panel is active below:
- Select the shape you want your hotspot to be, for this, I’ve used circles and rectangles. Create the shape over the area you want to link.
- With the shape selected, fill in the link URL in the “link” box. If you want the link to open in another window, select “_blank” from the “target” drop-down menu:
- Repeat this for each area:
- Go to the code and copy everything within the <map> </map> tags:
- Paste this code into your WordPress HTML editor, adding the code usemap=”#Map” into the img src tags like so:
- Viola… Click away!
Comments