Labeled images with HTML


  • Global Moderator

    Labeled images is an excellent tool for adding text, numbers and algorithm variables to an existing image. This post is tailored for Maple TA 2016, but the same technique can be used for the earlier versions.

    1. Prepare the image

    In this example we'll be adding text "Mathematics", "Modeling" and "Simulations" to Maplesoft logo. The labeled image is simply a canvas on top of an existing image. On the canvas, we will define content (text) and location (px). The original image has width of 1800px (pixels), to make process easier, we will start by crop it to the final size. For purposes of this example the width will be set to 500px, but any value can be used.





    2. Get the locations

    Now that the image is sized correctly, we can determine the locations to put the text. Simply hover over desired location and write down the location in px.


    3. Get URL

    Upload the cropped image from step 1 to Maple T.A., and place it inside a Question:

    4. Edit HTML

    Click on "Source" to open HTML code, you should see something like this:

    <p>
    <img alt="" src="https://mapleta.com:443/web/Tawor000/Public_Html/_thumbs/Maplesoft_logo2.jpg" style="width: 500px; height: 227px;">
    </p>
    

    Now, we'll need to add a canvas (div) and place holders for text. The code below will be used as a template in this example.

    <div align="center">
    <div class="labelledImage" style="width: YOUR IMAGE WIDTH px; height: YOUR IMAGE HEIGHT px; float: none;"> <img src="YOUR IMAGE URL">
    
    <div class="centered" style="left: LABEL ONE LOCATION X px; top: LABEL ONE LOCATION Y px;"> LABEL 1 </div
    <div class="centered" style="left: LABEL TWO LOCATION X px; top: LABEL TWO LOCATION Y px;"> LABEL 2 </div>
    <span></span><div class="centered" style="left: LABEL THREE LOCATION X px; top: LABEL THREE LOCATION Y px;"> LABEL 3 </div>
    </div>
    </div>


    Modify the template to match with your original code and enter the locations found in step 2. It should looks like this:

    <div align="center">
    <div class="labelledImage" style="width:  500 px; height: 227px; float: none;"> <img src="https://mapleta.com:443/web/Tawor000/Public_Html/_thumbs/Maplesoft_logo2.jpg">
    
    <div class="centered" style="left:  20px; top: 189px;"> Mathematics </div>
    <div class="centered" style="left: 213px; top: 189px;"> Modeling </div>
    <div class="centered" style="left: 369px; top: 189px;"> Simulation </div>
    </div>
    </div>

    Click on the Source to see the result:

    5. Adjust

    The originally found locations could be a bit off. At this point you can either open "Source" and edit the locations manually or, if you're using Firefox, move the labels by resizing them:

    After some adjustments, we ended up with:

    <div align="center">
    <div class="labelledImage" style="width:  500 px; height: 227px; float: none;"><img src="https://mapleta.com:443/web/Tawor000/Public_Html/_thumbs/Maplesoft_logo2.jpg">
    <div class="centered" style="left:  90px; top: 191px;">Mathematics</div>
    <div class="centered" style="left: 260px; top: 191px;">Modeling</div>
    <div class="centered" style="left: 399px; top: 191px;">Simulation</div>
    </div>
    </div>
    


    Optional steps:

    It's possible to place algorithmic variables, mathematical expressions and even images instead for the plain text:

    <div align="center">
    <div class="labelledImage" style="width:  500 px; height: 227px; float: none;"><img src="https://mapleta.com:443/web/Tawor000/Public_Html/_thumbs/Maplesoft_logo2.jpg">
    <div class="centered" style="left:  150px; top: 191px;">$some_value</div>
    <div class="centered" style="left: 310px; top: 191px;">\( \frac{a}{sin(b \cdot c)} \)</div>
    <div class="centered" style="left: 350px; top: 180px;"><img src="https://mapleta.com:443/web/Tawor000/Public_Html/_thumbs/smiley.jpg" style="height: 40px; width: 40px;"></div>
    </div>
    </div>
    


Log in to reply