Jump to content

envoy

Members
 View Profile  See their activity

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by envoy

    keyframe animation

    in CSS

    Posted

    Hello, I have a simple @keyframe animation that works correctly in principle, but I would like to pack the delays from the body into .circle.

    I tried it with animation-delay, but unfortunately it doesn't work, does anyone have an idea?

    element {
    width: 100px;
    height: 100px;
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: scaleIn 6s;
    animation-delay: 0.0s, 1.0s, 2.0s;
    animation-iteration-count: infinite; }

     


    Best regards

    keyframe_animation.html

    simple image selection

    in JavaScript

    Posted

    How can I reset the two image selections, or all of them if there are more, to the 1st image with one action?

    <button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(all???)')">reset</button>

     

    </head>
        <body>
            <div class="tab">
                <button class="tablinks" onclick="openCity(event, 'left')">left</button>
                <button class="tablinks" onclick="openCity(event, 'right')">right</button>
                
            </div>
            <div id="left" class="tabcontent">
                <img id="bannerImage_left" src="01.jpg">
                <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px">
                <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
                <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
            </div>
            <div id="right" class="tabcontent">
                <img id="bannerImage_right" src="01.jpg" "">
                <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px">
                <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
                <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
            </div>

            <div>
            <button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(all???)')">reset</button>
            </div>
            <script>


     

     

    simple image selection

    in JavaScript

    Posted

    image_selection_02.html

    Is it solved incorrectly if I put a 2 function (the 1st image of the image selection is selected) on the selection of the 1st tab/bannerImage_left, see html file attached?

    <button class="tablinks" onclick="openCity(event, 'left'); changeImage('01.jpg', '#bannerImage_left')">left</button>

    simple image selection

    in JavaScript

    Posted

    Thanks for the quick feedback and solution. I'll have to take a closer look at the function parameter topic to understand it better.

    i would like to add a default function so that when i click on another menu item and then go back to the image selection, the image selection jumps back to the first image. what is the best place to start?

    simple image selection

    in JavaScript

    Posted · Edited by envoy 

    <!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta name="description" content=""> 
        <meta name="author" content=""> 
        <title>New page</title>         
        <link href="css/style.css" rel="stylesheet"> 
    </head>     
    <body> 
        <img id="bannerImage_left" src="01.jpg">
        <img src="01_thumb.jpg" onclick="changeImage('01.jpg')" style="cursor:pointer; margin-left:40px; margin-right:40px">
        <img src="02_thumb.jpg" onclick="changeImage('02.jpg')" style="cursor:pointer; margin-right:40px">
        <img src="03_thumb.jpg" onclick="changeImage('03.jpg')" style="cursor:pointer; margin-right:40px">
        <img id="bannerImage_right" src="01.jpg" "">
        <img src="01_thumb.jpg" onclick="changeImage('01.jpg')" style="cursor:pointer; margin-left:40px; margin-right:40px">
        <img src="02_thumb.jpg" onclick="changeImage('02.jpg')" style="cursor:pointer; margin-right:40px">
        <img src="03_thumb.jpg" onclick="changeImage('03.jpg')" style="cursor:pointer; margin-right:40px">
        <script> 
                 function changeImage(fileName) {let img = document.querySelector("#bannerImage_left");img.setAttribute("src", fileName);}   
                 function changeImage(fileName) {let img = document.querySelector("#bannerImage_right");img.setAttribute("src", fileName);}         
        </script>
    </body>

     

    simple image selection

    in JavaScript

    Posted · Edited by Ingolme
    Removed potential dangerous attachment

    Hello,

    I would like to implement a simple image selection. If I use the function once, the function works. If I use the function in 2 places, it does not work. I have adjusted the id for the two places, but it still does not work.

    Many thanks and best regards

     

    table layout

    in HTML/XHTML

    Posted

    Hello, I would like to implement this table layout, see table_layout.jpg. I have assigned different sizes to the table areas via classes. Unfortunately, it does not work if the column widths are different. How can I assign different widths to the columns?

    Many thanks and best regards

    table_layout.jpg

×
×
  • Create New...