Adding mulltiple links to a jpeg

• 

  darrylcotton · Member · May 3, 2017 at 5:09 pm

  • Copy link
  • Add topic to favorites

  Hi
  I need to have two active links on a jpeg but not sure how to go about it. its the jpeg under the heading BREAKING NEWS on the home page.
  The two links are MORE INFO and I AM INTERESTED. Ive made the whole jpeg link to MORE INFO but cannot figure out how to create the second link.
  Thanks

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

• 

  otpidusprime · Member · May 4, 2017 at 10:07 am

  • Copy link

  Hello @darrylcotton,
  You can use image mapping by switching to the HTML tab of the post editor to map 2 links inside an image.

  Consider you have this HTML code for your image:
  <img id="Image-Map" src="https://meltoncapetown1.files.wordpress.com/2017/05/israelseminar1.jpg?w=1529&h=1019" border="0" width="1529" height="1019" orgWidth="1529" orgHeight="1019" usemap="#image-maps-2017-05-04-060024" alt="" />

  You can map the 2 links inside it by using this:

  <map name="image-maps-2017-05-04-060024" id="ImageMap">
  <area  alt="" title="" href="https://meltoncapetown1.files.wordpress.com/2017/04/melton-within-borders-israel-seminar-sept-2017.pdf" shape="rect" coords="61,0,778,1005" style="outline:none;" target="_self"     />
  <area  alt="" title="" href="https://meltoncapetown.org/isrealseminarinterested/" shape="rect" coords="774,0,1470,1004" style="outline:none;" target="_self"     />
  </map>

  This code maps the more information link to the left half of the image and I am interested link to the right half of the image.

  Here’s the working example: https://jsfiddle.net/q2frs0ht/

  Hope this helps 🙂

• 

  darrylcotton · Member · May 4, 2017 at 11:05 am

  • Copy link

  Hi

  Thanks for this. I really appreciate it!

  What you probably saw when you were helping me was a newer version of the jpeg as I couldnt get the links to work on th eolder one..However I have resorted back to using the older jpeg. Would you mind mapping the two links agi=ain.

  Thanks :)

• 

  darrylcotton · Member · May 4, 2017 at 11:15 am

  • Copy link

  Just to clarify: the updated jpeg is live now on th home page. it has links on the left and right (for more info and i’m interested, respectivley) so its ok if you map the image in 2 halves the way you did before.

  Ive pasted in your code and changed the file name, but for some reason only the left hand side is working as a link

  Thx

• 

  otpidusprime · Member · May 4, 2017 at 11:17 am

  • Copy link

  Sure, here you go:

  <img id="Image-Map" src="https://meltoncapetown1.files.wordpress.com/2017/05/israelseminar.jpg?w=1529&h=1019" border="0" width="1529" height="1019" orgWidth="1529" orgHeight="1019" usemap="#imagemap" alt="" />
  
  <map name="imagemap" id="Image-Map">
    <area alt="" title="" href="https://meltoncapetown1.files.wordpress.com/2017/04/melton-within-borders-israel-seminar-sept-2017.pdf" shape="rect" coords="61,0,778,1005" style="outline:none;" target="_self" />
    <area alt="" title="" href="https://meltoncapetown.org/isrealseminarinterested/" shape="rect" coords="774,0,1470,1004" style="outline:none;" target="_self" />
  </map>

  Here’s the updated working example: https://jsfiddle.net/q2frs0ht/2/

  Hope this helps🙂

• 

  darrylcotton · Member · May 4, 2017 at 11:33 am

  • Copy link

  Ok great. i see the I’m interested is working but i have to go to the very right edge of the jpeg . can you focus the coordinates more towards the green buttons for each link pls

  if you give me only the coordiantes i can replace them.

  Thx

• 

  otpidusprime · Member · May 4, 2017 at 12:58 pm

  • Copy link

  @darrylcotton i see that you removed the image from the homepage.

  Do you still need help with that?

• 

  darrylcotton · Member · May 4, 2017 at 1:03 pm

  • Copy link

  hi
  yes please.
  ive put the image it back now

• 

  darrylcotton · Member · May 4, 2017 at 1:03 pm

  • Copy link

  hi
  yes please.
  ive put the image it back now

• 

  otpidusprime · Member · May 4, 2017 at 1:41 pm

  • Copy link

  Alright, so here’s the code:

  <img src="https://meltoncapetown1.files.wordpress.com/2017/05/israelseminar.jpg?w=1529&h=1019" alt="" usemap="#Map" />
  
  <map name="Map" id="Map">
      <area alt="" title="" href="https://meltoncapetown1.files.wordpress.com/2017/04/melton-within-borders-israel-seminar-sept-2017.pdf" shape="poly" coords="27,699,206,699,206,723,27,722" />
      <area alt="" title="" href="https://meltoncapetown.org/isrealseminarinterested/" shape="poly" coords="769,722,770,698,949,698,947,724" />
  </map>

  It maps the links to only the button areas of the images.

  Here’s the updated-updated demo:
  https://jsfiddle.net/q2frs0ht/5/

• 

  darrylcotton · Member · May 4, 2017 at 2:16 pm

  • Copy link

  I see that you have done it and it is working in the demo, but not when i copy and paste the html.,,the links don’t activate.
  could it have something to do with the image size. i had to manually scale it bigger to fit the width of the column?

• 

  otpidusprime · Member · May 4, 2017 at 2:41 pm

  • Copy link

  could it have something to do with the image size. i had to manually scale it bigger to fit the width of the column?

  Do not scale it… use the original size.

  You can also, try mapping it yourself using this simple online tool:
  http://www.isdntek.com/tagbot/imap.htm

• 

  darrylcotton · Member · May 5, 2017 at 6:15 am

  • Copy link

  Its now working perfectly!
  Thanks for all your help :)