We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Toggle Icon of annotation button through Puzzles

Home Forums Puzzles Toggle Icon of annotation button through Puzzles

Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #76517
    abd3d
    Participant

    I am following this tutorial of swiss army knife from Youtube. I am stuck at the tutorial 9 where I have to toggle icon of annotation to visible to hidden using different svg files.
    For HTML I am not using webflow to generate HTML code, rather I have created HTML.
    For image as button I am using this CSS style

    .image-button {
                width: 50px;
                height: 50px;
                margin: 10px 0;
                border: none;
                background-color: transparent;
                cursor: pointer;
            }
    
            .image-button img {
                width: 100%;
                height: 100%;
                display: block;
            }

    and in body

    <button class="image-button" id="annotation_button"><img src="media/annotation_visible_button.svg" alt="Button 3"></button>

    I am using this….

    Now the problem is I am unable to change icon as tutorial mention using ” SET Style” and “backgrond” image no matter what i do. The button is working correctly cause I put audio when it clicked and the audio in playing.

    This is my whole code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Swiss army knief</title>
        <link rel="icon" href="media/favicon.png" type="image/png">
        <style>
            body {
                margin: 0;
                padding: 0;
                height: 100vh;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                overflow: hidden;
            }
    
            .column {
                display: flex;
                flex-direction: column;
                align-items: center;
                z-index: 2;
            }
    
            #left-column {
                padding-left: 20px;
            }
    
            #right-column {
                padding-right: 20px;
            }
    
            .image-button {
                width: 50px;
                height: 50px;
                margin: 10px 0;
                border: none;
                background-color: transparent;
                cursor: pointer;
            }
    
            .image-button img {
                width: 100%;
                height: 100%;
                display: block;
            }
    
            iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
                z-index: 1;
            }
    
            @media (max-width: 768px) {
                #left-column {
                    padding-left: 10px;
                }
    
                #right-column {
                    padding-right: 10px;
                }
            }
        </style>
    </head>
    <body>
        
        <div class="column" id="left-column" style="display: none;">
            <button class="image-button" id="unfold_knife_button"><img src="media/unfold_knife_button.svg" alt="Button 2"></button>
            <button class="image-button" id="fold_knife_button"><img src="media/fold_knife_button.svg" alt="Button 1"></button>
            <button class="image-button" id="annotation_button"><img src="media/annotation_visible_button.svg" alt="Button 3"></button>
        </div>
    
        <div class="column" id="right-column" style="display: none;">
            <button class="image-button" id="plastic_button"><img src="media/plastic_button.png" alt="Button 4"></button>
            <button class="image-button" id="wood_button"><img src="media/wood_button.png" alt="Button 5"></button>
            <button class="image-button" id="carbon_button"><img src="media/carbon_button.png" alt="Button 6"></button>
        </div>
    
        <iframe src="my_awesome_app.html" allowfullscreen sandbox="allow-scripts allow-same-origin"></iframe>
    </body>
    </html>
    

    can anyone help me with this.
    Thank you

    • This topic was modified 3 months, 1 week ago by abd3d.
    Attachments:
    You must be logged in to view attached files.
    #76542

    At first you need to operate not to “.image-button.annotation_button” in your puzzle but only to “.image-button”. The second you set src file directly inside the gtml element but you need to set it as “background-image” in style of the object.

    Co-founder and lead graphics specialist at Soft8Soft.

    #76548
    abd3d
    Participant

    Yes, Thank you, I did exactly that,
    added background-image style in .image-button class
    and set URL like this

     #annotation_button {
                background-image: url('media/annotation_visible_button.svg');
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.