HTML のボタンに画像を埋め込む
この記事では、HTML の <button> 要素に画像を埋め込むいくつかの方法について説明します。これは、HTML ボタン内の画像を修正または設定することを意味します。
<button> タグ内の <img> タグを使用して、HTML ボタンに画像を埋め込む
この <img> タグは、HTML ページに画像を埋め込むために使用されます。画像は文字通りウェブページに配置されません。画像は、指定された経路によって Web ページにリンクされています。このタグは、特定の画像用のスペースを生成します。タグには、src と alt という 2つの必須属性があります。HTML の <button> タグを使用して、クリック可能な HTML ボタンを作成できます。<img> タグを <button> タグ内に配置すると、画像が埋め込まれたクリック可能な HTML ボタンが作成されます。
たとえば、HTML 本文内で、<button> タグを開きます。type を button として指定します。次に、<img> タグを開き、src 属性に画像の URL を指定します。次に、height と width をそれぞれ 80 と 100 に設定します。最後に、次の行で以前に開いたすべてのタグを閉じます。
以下の例では、<button> 要素を作成し、その中に画像を挿入してボタンの中に埋め込みました。URL 短縮サービスを使用して、画像の短い URL を src タグに配置しました。したがって、画像付きのボタンを HTML で作成できます。
サンプルコード：
<body>
<button type="button"> <img src="/img/DelftStack/logo.png" height ="90" width="480" /></button>
</body>
<input type="image"> タグを使用して HTML ボタンに画像を埋め込む
<input> タグは、データを入力できる入力フィールドを指定します。HTML で許可されている多くの入力タイプとコントロールウィジェットがあります。それらのいくつかは、<input type="button">、<input type="color">、<input type="email">、<input type="text"> です。type 属性を image に設定し、src を設定して入力タイプに画像を埋め込むことができます。ボタンとして機能します。
たとえば、HTML 本文内で、<input> タグを開き、type を image に指定します。次に、src 属性に画像の URL を入力します。次に、style 属性を記述し、border を double に設定します。また、height と width を 80 と 170 として追加します。次に、入力タグと以前に開いたすべてのタグを閉じます。
以下の例は、HTML ページに画像を埋め込む方法を示しています。<type="image"> タグは、作品に画像を挿入または使用することを指定します。インライン CSS を使用して、画像の border、height、width を設定しました。これは、画像をボタンのように見せるために行いました。値 double は、画像ボタンの外側で二重の境界線が使用されることを指定します。高さと幅は、画像を一定のサイズにするのに役立ちます。画像の高さと幅を指定しないと、画像の読み込み時にページがちらつくことがあります。このようにして、HTML ボタンに画像を埋め込むことができます。
サンプルコード：
<input type="image" src="/img/DelftStack/logo.png" style="border: double;" height="90" width="480"/>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn