locked
Click locations in an image on full screen RRS feed

  • Question

  • User-2146352328 posted

    Hi.
    I have an image that I need to have specific areas, when clicked, to navigate to a different url.
    Is that possible?
    I remember, a long time ago, we had a project that would click to map locations but the project was canceled so I did not implement anything.
    I have found this tool http://imagemap-generator.dariodomi.de/ that do the work.
    Now my problem is, I need to have the HTML resize, according to every device it is opened and maintain the coordinates.
    So if I open it from a mobile, i need to resize to that phone , if I open it from a PC to resize to that etc.
    How would I go and maintain the coordinates?

    Thanks.

    Monday, March 5, 2018 11:53 AM

All replies

  • User753101303 posted

    Hi,

    You are using jQuery? Try http://imagemapresize.com/ or search for image map resize.

    Monday, March 5, 2018 1:35 PM
  • User-2146352328 posted

    Hello.

    I cannot use a Jquery plug in as this is a simple html send by email.

    Thanks.

    Monday, March 5, 2018 2:15 PM
  • User-2146352328 posted

    Also I'm thinking to use something like this:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=0" />

    Problem is I do not know if will scale OK for the phone (because the image is very big) and if I will loose the location coordinates due to the scaling.

    Thanks

    Monday, March 5, 2018 2:49 PM
  • User753101303 posted

    Humm...AFAIK html email is often quite restricted. If not done already I would start with  a basic sample such as ttps://www.w3schools.com/tags/tag_map.asp (and https://sendgrid.com/blog/embedding-images-emails-facts/)

    I'm afraid you'll find anyway that not all mail clients have support for image maps (for example Outlook which uses Word as its rendering engine). Also it seems everybody is uses JavaScript (whcich likely won't work in a mail client, I dbout a plain CSS solution could work).

    IMO for HTML email you should always keep things as simple as possible

    Monday, March 5, 2018 3:31 PM
  • User-2146352328 posted

    Hi.

    Currently using something like this:

    <html> 
    <head>
        <title>Order confirmation</title>
        <meta http-equiv="Content-Type CONTENT=text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=0" />
        <style>
            .textblacklarge
            {
                font-family: Verdana,Arial, Helvetica, sans-serif;
                font-size: 11px;
                color: #000000;
            }
            .textblackmed
            {
                font-family: Verdana,Arial, Helvetica, sans-serif;
                font-size: 10px;
                color: #000000;
            }
            .textredlarge
            {
                font-family: Verdana,Arial, Helvetica, sans-serif;
                font-size: 11px;
                color: #D90000;
            }
            .Barcode
            {
                height: 200px;
            }
             .HeadText
            {
                border-bottom-style: solid;
                border-width:1px;
                width:600px;
                display:inline-block;
                 padding: 10px;
       .margin: 0 -1em; 
            }
            .bodyX
            {
                width: 615px;
            }
    .Full{
    width: 100%;
    height: 100%;
    
    
    }
        </style>
    </head>
    <body>
     
              <div>
              <!--   <img src="cid:[imgsrc]" /> -->
                <img src="http://test.vias.gr/media/49448/Eikastike-order-2-018.jpg" 
                      alt="" usemap="#Map" class=Full"  >
    <map name="Map" id="Map" >
        <area alt="" title="" href="https://www.vias.gr/WebTicketing/ConcessionSelection" shape="poly" coords="510,1191,845,1192,847,1259,514,1258" />
        <area alt="" title="" href="https://www.vias.gr/WebTicketing/ConcessionSelection" shape="poly" coords="73,1861,407,1860,408,1925,77,1924" />   
    </map>
           </div>   
    </body>
    </html>
    

    However, it will just show half the page on a mobile opening the html.

    I wonder if I can expand to full page or this is restricted somehow( do not have a clue why the image is not full expanded)

    Thanks

    Monday, March 5, 2018 3:53 PM
  • User-2146352328 posted

    Correction.

    I was missing a  " on the class call.

    However this will expand the image and deform it.

    Monday, March 5, 2018 3:54 PM
  • User753101303 posted

    Have you tried this in a mail client ?

    Before spending time on this I would really ensure image map even works. For example according to https://social.msdn.microsoft.com/Forums/office/en-US/5e78417a-787a-4c87-b4df-b0e1f43a3238/image-maps-in-outlook-2013?forum=outlookdev it won't work in Outlook 2013 or earlier (and perhaps not even in Outlook 2016). Is this ok with you ?

    Monday, March 5, 2018 4:41 PM
  • User-2146352328 posted

    Hi.

    I've notified the managers for that outlook, still waiting.

    If there is another way to do it with simple html and javascript please let me know.

    Thanks.

    Monday, March 5, 2018 5:22 PM
  • User-2146352328 posted

    Hi.

    So I could not make this work through an email.

    The mappings do not work.

    Any other idea?

    Thanks

    EDIT. Actually let me rephrase that. I was sending it with copy past of the HTML through the ouutlook. This seems to have removed the mappings.

    I should write a program to send the html through code and see if that will work.

    Tuesday, March 6, 2018 9:11 AM
  • User753101303 posted

    Which kind of shapes are you using ? If rectangular, you should be able to position plain <a> links over an image.

    Also for HTML email, always try to keep things simple IMO so if this is for example a list of  few countries you could also just list them.

    Antoher option is to send a link and let the user to achieve the actual task in a real browser.

    Edit: so it seems to confirm the previous link ie Outlook just doesn't support image maps which is not really a surprise. In my experience it's best to keep your HTML email as simple as possible.

    Tuesday, March 6, 2018 9:21 AM
  • User-2146352328 posted

    Hi.

    This image is actually on big image and have sections that must be clickable.

    I'm not sure I can use a <a> is a scenario like this. Is there some example?

    Also I'm not sure that map will not work on outlook, as I've googled around I found opinions divided. Of course I don't see a reason why should I not trust you but in any way, outlook is not really a concern. I was just having issues because I copy paste the html to the outlook. I'm not sure if it's the outlook issue that got rid of the clickable areas or just the copy paste just inserted the plain image an ignored that it had html in it.

    Tuesday, March 6, 2018 12:46 PM
  • User-474980206 posted
    Most email clients support the <map>. The main restriction is that the image can not be responsive, it must be a fixed size as the coordinates are fixed. As email does not support JavaScript, your only other option is a table of image segments. This will work if the click coordinates are squares.
    Tuesday, March 6, 2018 3:15 PM
  • User-2146352328 posted

    I do not understand the " table of image segments". Do you mean one image after the other down below?

    This is extremely hard as the click areas are inside the main image at specific areas that do not cover the image portion from XtoY, meaning they may be rectangle but they do begging from position 0 left or the image and end at position "end" right of image. They are somewhere inside the image, mostly at the center area.

    Else I do not know what you mean.

    thanks.

    Tuesday, March 6, 2018 3:39 PM
  • User-2146352328 posted

    So.

    This was given to an outsource developer.

    what is done is the image is one big click and no mapping.

    The individual clicks are added to the bottom of an image and are full X,Y, rectangles that start from the left to the far right and if 2 click images are on the same position the a <td> is used with a same 50% background, similar to the other 50% background + image. So the whole image + it's background is clickable, until it reaches the vicinity or the other 50% image + background click.

    Also @media is used to simulate different iphone displays. That sees like an issue as we need to change that with every new IPhone

    So media is something like:

         /* iPhone 6+, 7+, and 8+ */
            @media only screen and (min-device-width: 414px) {
                .email-container {
                    min-width: 414px !important;
                }

    Also there is some Gmail custom fixes as I can see. Probably something wrong with the Gmail client.

    So the fix is not what I had in mind since it uses many images and not one and the click is per rectangle from left to whole right side.

    Wednesday, March 7, 2018 11:15 AM