Explore the community Forums Lectora Lectora Suggestions Draw custom shapes – shapes, hotspots, buttons, etc

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #283006 Score: 1
    Profile photo of The AV-ator
    The AV-ator
    Member
    advanced
    contributor
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    profile
    picture perfect
    5 pts
    @TheAv-ator

    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).

    This post has received 1 vote up.
    #303716 Score: 0
    Profile photo of Matt Garratt
    Matt Garratt
    Member
    @mgarratt4149

    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.

    #303974 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    57 pts
    @mnotermans5114

    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.

    #303985 Score: 0
    Profile photo of Matt Garratt
    Matt Garratt
    Member
    @mgarratt4149

    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!

    #304010 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    133 pts
    @Klaatu

    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){
    VarselectedArea.set(event.target.id);
    };

    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.

    Darrel

    • This reply was modified 1 year, 4 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: The img src line needed editting because it was trying to insert an image instead of the text
    Attachments:
    1. imagemap2.zip
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.