68532


下記のコードは、ボタンを押すと、テキストエリアの中央で画像が10秒後に切り替わるものです。  
このように、画像をbackgroundとして使う場合に、テキストボックスの中央で画像の形状(＊circle1(),  
circle2()内の画像は、ともに"丸形”)も変えるには、どのように書けばいいのか分かりません。  
分かる方は、教えていただけませんでしょうか。

[code]

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    
    function circle1(){
    document.getElementById('textArea').style.backgroundImage="url(https://〇〇〇.jpg)";
    document.getElementById('textArea').style.backgroundRepeat="no-repeat";
    document.getElementById('textArea').style.backgroundSize=80;
    document.getElementById('textArea').style.backgroundPosition="center center";
           setTimeout('circle2()',10000);
    }
    
    function circle2(){
    document.getElementById('textArea').style.backgroundImage="url(https://×××.jpg)";
    document.getElementById('textArea').style.backgroundRepeat="no-repeat";
    document.getElementById('textArea').style.backgroundSize=80;
    document.getElementById('textArea').style.backgroundPosition="center center";
    }
    
      //-->
     </script>
    <center>
    <textarea id="textArea" rows=20 cols=60></textarea>
    <br><br>
    <INPUT TYPE="button"  ONCLICK="circle1();" value="ボタン">
    </center>
    
[/code]


CC BY-SA 4.0
2020-07-12T15:49:18.667
68527
2020-07-22T11:35:08.393
41069
question
javascript css
テキストエリア内の中央で、画像をbackgroundとして使ってそれを丸形で表示させるには


丸形に書き換えた画像ファイルを用意して `backgroundImage` に指定しましょう。それが一番簡単な解決方法です。

別解:  
`clip-path`というCSSプロパティがありますが、`clip-path: circle(50px);`
のように指定するとマッチする要素のものが丸く切り取られて表示されます。ただし、これは背景画像ではなくて要素全体(この場合、`<textarea>`全体)が切り取られますので、`clip-
path`を指定するだけでは目的の動作にはなりません。丸くする背景画像専用の要素を用意して、背景を透明にした`<textarea>`とうまく重ねる工夫が必要です。


CC BY-SA 4.0
2020-07-13T01:08:34.107
68532
2020-07-13T01:08:34.107
3475
68527
answer


"position”と“z-index”と”border-radius”を、下記にコードのように適切なところに設定すれば、  
希望通りにtextareaの中央に丸形の画像が表示されるようになるようです。  
＊画像のサイズによって、それぞれの数値を変えて調節します。

[code]

    <style>
    .absolute {
                       position: absolute;
                       z-index:20;
                       border-radius:50%;
                       width:5%;
                       height:20%;
                       top:20%;
                       left:48%;  
    }
    
    .relative {
               position:relative;
               z-index:10;
    }
    </style>
    
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    
    function circle1(){
    document.getElementById('circle-image').style.backgroundImage="url(https://〇〇〇.jpg)";
    document.getElementById('circle-image').style.backgroundRepeat="no-repeat";
    document.getElementById('circle-image').style.backgroundSize=80;
    document.getElementById('circle-image').style.backgroundPosition="top 30% center";
           setTimeout('circle2()',10000);
    }
    
    function circle2(){
    document.getElementById('circle-image').style.backgroundImage="url(https://×××.jpg)";
    document.getElementById('circle-image').style.backgroundRepeat="no-repeat";
    document.getElementById('circle-image').style.backgroundSize=100;
    document.getElementById('circle-image').style.backgroundPosition="top 50% left 50%";
    }
    
      //-->
     </script>
    
     <center>
       <div style="position:relative; height:auto; width:980px;">
         <textarea class="relative" rows=20 cols=60></textarea>
         <span id="circle-image" class="absolute"></span>
       <br><br>
         <INPUT TYPE="button"  ONCLICK="circle1();" value="ボタン">
       </div>
     </center>
    
[/code]


CC BY-SA 4.0
2020-07-19T10:03:18.677
68729
2020-07-22T11:35:08.393
2020-07-22T11:35:08.393
41069
41069
68527
answer