{"id":3586,"date":"2024-12-11T15:55:22","date_gmt":"2024-12-11T20:55:22","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3586"},"modified":"2024-12-11T15:55:22","modified_gmt":"2024-12-11T20:55:22","slug":"hotspots","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/wordpress-shortcodes\/hotspots\/","title":{"rendered":"Hotspots"},"content":{"rendered":"

The hotspot<\/strong> and hotpoint<\/strong> shortcodes allows you to place markers on an image. The visitor can mouse-over or tab to these markers to expand a label. This is achieved by listing the hotpoint shortcodes within the

shortcode. Hotpoints are placed by assigning percentage points to the left and top attributes:\n

Example<\/h2>\n
\"Aerial<\/div>\nSusan A. Cole Hall<\/span><\/a>
\nFreeman Hall<\/span><\/span>
\nRuss Hall<\/span><\/span>
\nJohn J Cali School of Music<\/span><\/span>
\n<\/div>\n

Code Sample<\/h2>\n
\r\n\r\n[[hotspot image="\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/campus-aerial.jpg.5.2x.generic.jpg"]\r\n\r\n[hotpoint left="39.6" top="63.5" label="Susan A. Cole Hall" url="https:\/\/www.montclair.edu\/campus-map\/#CO"]\r\n[hotpoint left="46.89" top="34.91" label="Freeman Hall"]\r\n[hotpoint left="64.44" top="33.5" label="Russ Hall"]\r\n[hotpoint left="73.55" top="44.79" label="John J Cali School of Music"]\r\n\r\n[\/hotspot]]\r\n\r\n<\/pre>\n
Attributes<\/h2>\n
Hotspot Shortcode<\/h3>\n\n\n\n\n\n
Name<\/th>\nPossible Values<\/th>\nRequired<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
image<\/td>\nurl of an image<\/td>\nYes<\/td>\nThe image URL should be for an image in your media library.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Hotpoint Shortcode<\/h3>\n\n\n\n\n\n\n\n\n
Name<\/th>\nPossible Values<\/th>\nRequired<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
label<\/td>\ntext<\/td>\nYes<\/td>\nThis is a text field – not HTML.<\/td>\n<\/tr>\n
left<\/td>\nnumber<\/td>\nYes<\/td>\nThe left position of the point in percentage.<\/td>\n<\/tr>\n
top<\/td>\nnumber<\/td>\nYes<\/td>\nThe top position of the point in percentage.<\/td>\n<\/tr>\n
url<\/td>\nURL of a page<\/td>\nNo<\/td>\nIf you provide a URL the hotpoint will act as a link.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Getting Coordinates in Percentage<\/h2>\n
The hotpoint<\/strong> shortcode requires you to provide coordinates for the point in percentage, not pixels. This ensures that your points are placed properly at any resolution or size – from small phone displays to large desktop monitors.<\/p>\n
Using Adobe Photoshop it’s relatively easy to get percentage coordinates for your image.<\/p>\n
Step 1: Get the Image Resolution<\/h3>\n
Open your image in Photoshop and then go to Image > Image Size. On a scrap piece of paper, write down the width and height of your image.<\/p>\n
\n
\n
<\/figure>\n<\/div>\n
\n
<\/figure>\n<\/div>\n<\/div>\n
Step 2: Get the Coordinate in Pixels<\/h3>\n
Choose the ruler tool. Click and drag on your image starting <\/em>at the place you want to put your point. Copy down the X and Y coordinates for each hotpoint<\/strong> you’d like to create.<\/p>\n
\n
\n
<\/figure>\n<\/div>\n
\n
<\/figure>\n<\/div>\n
\n
<\/figure>\n<\/div>\n<\/div>\n
Step 3: Calculate Percentages<\/h3>\n
Now that you have the width<\/strong>, height<\/strong>, x<\/strong>, and y<\/strong> values for your image, you can easily calculate the left<\/strong> and top<\/strong> values using the formulae:<\/p>\n
    \n
  • left<\/strong> = 100 \u00d7 (x<\/strong>\/width<\/strong>)<\/li>\n
  • top<\/strong> = 100 \u00d7 (y<\/strong>\/height<\/strong>)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    The hotspot and hotpoint shortcodes allows you to place markers on an image. The visitor can mouse-over or tab to these markers to expand a label. This is achieved by listing the hotpoint shortcodes within the Code Sample [hotspot image="\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/campus-aerial.jpg.5.2x.generic.jpg"] [hotpoint left="39.6" top="63.5" label="Susan A. Cole Hall" url="https:\/\/www.montclair.edu\/campus-map\/#CO"] [hotpoint left="46.89" top="34.91" label="Freeman Hall"] [hotpoint left="64.44" […]<\/p>\n","protected":false},"author":411,"featured_media":3554,"parent":3552,"menu_order":24,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3586","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3586"}],"version-history":[{"count":3,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3586\/revisions"}],"predecessor-version":[{"id":3840,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3586\/revisions\/3840"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3554"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}