Draw custom shapes - shapes, hotspots, buttons, etc

theav-ator Community Member Posts: 69 ☆ Roadie ☆
It would be nice to be able to draw a custom shape or custom shape hotspots (much the same as Dreamweaver lets you draw custom hotspots for linking in websites). If I have an object/image and want to put a hotspot link over it, the only thing I can do is put a square over it. The issue is, not everything is a square. If my object is skewed or has other angles involved, I end up with overhang or area not covered, or I need to create multiple hotspots to cover an object (which can get tricky depending on the functionality).


  • mgarratt4149
    mgarratt4149 Community Member Posts: 2
    I agree. This is a critical feature missing for me. I need custom hotspot shape to achieve required test result. Please notify me if/when this is added.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916 ☆ Roadie ☆
    A trick to get this done is with a combination of Javascript and Photoshop. Create your irregular hotspot anyway you want in Photoshop. Import that into Lectora ( as a .png offcourse ) and then use Javascript to hide it, make it a hotspot or whatever.
  • mgarratt4149
    mgarratt4149 Community Member Posts: 2
    If you are able to post up a sample Maths Notermans, I'd be super grateful! While I've dabbled in Javascript, I've not got the skills to come up with a code that could make this work. As I said, super critical for me at the moment so if you can help out it'd be a big win!
  • klaatu
    klaatu Community Member Posts: 988
    Matt, I think what you are asking for is a way to add and image map with hotspots and to have this communicate with Lectora, correct? I agree it would be nice to have something like this built in, however, it is pretty straightforward to accomplish.

    First, make sure the image you want to use is the size you want it to be in Lectora because once you make the imagemap you cannot change the image size or it will not work. You will need the height and width dimensions in pixels later. One way you can get this is to temporarily add it to a Lectora page and jot down its height and width then delete it off the page.

    1. Go to this site: Easy Imagemap Generator.

    2. Upload the image file that you want to have hotspots on.

    3. Carefully click around the outside of the item you want to be a hotspot. When you finish the first item make sure you click the " + Add Area" button before starting the second hotspot. Do this for all the areas you want to become hotspots.

    4. Copy the html in the lower rectangle. Paste into a new notepad file (so you can makes some changes). Save the txt file as a backup (you don't really want to create the hotspots all over again, right?)

    5. In the text you just pasted notice that each hotspot has coordinates enclosed in an <area> tag. This area tag will have attributes like alt, title and href.  After alt="" add id="" and inside the quotes give each area a unique ID. This is the information that will eventually be assigned to a Lecotra variable when it is selected.

    6. At the end of the pasted text you should see [...]. Delete this and resave the text file.

    7. The first line of your pasted text should be img src="url/to/your/image.jpg" alt="" usemap="#Map" (I left out the tag<> symbols so the line would print). You need to edit the source of the image to point to where you have the image on your computer. Use the full path to the file. So, if your file is called bottles.png and it is located in the root directory of your hard drive it would be "c:/botttles.png". Spelling AND case counts so be careful. Select and copy all the text then resave again.

    8. You need to enclose all the text in a <div> tag and give it an ID. You do this by adding <div id=""> above the first line ( tag). Give the ID a name such as "myImageMap". Then after the very last line add (on a new line) </div>. Copy all this text and resave.

    8. In Lectora on the page you want to have the image, insert an HTML extension, the type should be Custom DIV (default). Click edit and paste the text you just copied. Rename the object from External HTML Object to whatever you want to call it, like imageMap.

    9. Remember I said you will need the exact dimensions of the image in pixels? In Position & Size of the custom div change its size to reflect the original images size. You can now drag the custom div to wherever you want on the page, just be careful not to accidentally change its size again.

    10. Almost done. Create a Lecotra variable. You can name it however you want following the proper naming conventions. For this example I will name it selectedArea.

    11. Add an action - Run JavaScript to the PAGE (on show) that the image is on. Add the following (bold text only):

    document.getElementById("Map").onclick = function(e){

    Explanation of the above JavaScript: The document.getElementByID("Map") selects the imagemap as the item to listen out for a mouse click. When it is clicked, it will fire off the function(e) which assigns the ID of the item that was clicked to the Lectora variable you created in step 10.

    12. That's it. You can now use that Lectora variable in any creative way you want.

    The .awt file for the attached example is located in the zip file as well. I see you're under the gun, feel free to private message me if you need any help implementing this or wish further explanation. Hope this helps.