2

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

<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>

2 件の回答 2

2

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

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

1
  • document.getElementById('textArea').style.borderRadius="50%"と、スタイルでoverflow=”hidden”を追加すると、画像がtextareaより大きい場合は、余分な部分は隠れて丸くなるのですが,textareaの枠より小さいサイズだと、丸形に書き換えた画像ファイルを用意しなければならないですか。難しいですね。
    – user41069
    Commented 2020年7月13日 11:28
1

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

<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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。