Toggle Icon of annotation button through Puzzles

This topic has 2 replies, 2 voices, and was last updated 2 months, 3 weeks ago by abd3d.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

2024-08-12 at 8:44 am #76517

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 2 months, 3 weeks ago by abd3d.

Attachments:

You must be logged in to view attached files.

2024-08-13 at 7:51 am #76542

Mikhail Luzyanin

Staff

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.

2024-08-13 at 3:12 pm #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');

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.