Clickable hotspot to open a URL

  • Unknown's avatar
    leschats13 · Member ·

    I’m not sure ‘hotspot’ is the correct tem…apologies if not.

    I’m putting together a website for an annual open studio art trail in my area. All of us organisers are volunteers and we keep artist participation fee as low as possible so the not so professional artists can participate.

    This is our first year using WordPress.com and we are on the lowest paid plan (can’t remember what it’s called). In previous years we had a page with a map of the area and each participant identified by a trail number which, when clicked/tapped on, opened that artist’s page.

    From what I understand from Google searches this isn’t possible with the plan we are on. Is this correct? We don’t have the money to buy a higher plan and now I’m at a loss what to do. In previous years the map page was created with Dreamweaver so I have the HTML and wonder if I can simply code what I want. It will slightly “do my head in” so before I start I’d appreciate advice on whether using the old code will work or suggestions of a better way.

    Any help will be very much appreciated.

    The blog I need help with is: (visible only to logged in users)

  • staff-95percentghost · Staff ·

    Hi! I think the term you’re looking for is ‘image map’:
    https://www.w3schools.com/htmL/html_images_imagemap.asp

    It’s been quite while since I encountered one of those! I wasn’t actually too sure if it would work, but I borrowed the very basic HTML code from the W3Schools link above and put it into a Custom HTML block on a free test site of mine:
    https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/

    That basic one looks like it works when I save and test; and the <map> code is in fact in the list of allowed codes:
    https://wordpress.com/support/code/

    I think it should be OK to put your HTML from Dreamweaver into a Custom HTML block and try it, but you may need to make adjustments to the code based on the addresses of the artist pages. If you find you have trouble with it, we can try to take a look at the code – in that case I’d suggest placing the code into a Code block instead so we can view the code itself:
    https://wordpress.com/support/wordpress-editor/blocks/code-block/

    One last suggestion based on my very quick test – if you find that your initial test looks too small and the map looks cropped down, try this:

  • Unknown's avatar
    leschats13 · Member ·

    I’m constantly amazed at (and appreciative of) the response time from WordPress staff.

    It’s dinner time here where I live and my head has had enough for today. I will go though your reply tomorrow and hopefully understand enough! I have a draft page called “Test page” where I try all the things in WordPress that are new to me…I’ll definitely be trying your advice on that!

    Thank you again…I’ll come back here and ‘report’!

  • The topic ‘Clickable hotspot to open a URL’ is closed to new replies.