Sematkan gambar dalam elemen <button>


135

Saya mencoba untuk menampilkan gambar png pada <button>elemen dalam HTML. Tombolnya berukuran sama dengan gambar, dan gambar ditampilkan tetapi untuk beberapa alasan tidak di tengah - jadi tidak mungkin untuk melihat semuanya. Dengan kata lain sepertinya sudut kanan atas gambar terletak di tengah-tengah tombol dan bukan di sudut kanan atas tombol.

Ini adalah kode HTML:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

Pembaruan:
Apa yang sebenarnya terjadi, saya pikir, adalah masalah margin. Saya mendapatkan margin dua piksel, sehingga gambar latar belakang keluar dari tombol. Tombol dan gambar adalah ukuran yang sama, yang hanya 20px, sehingga sangat terlihat ... Aku mencoba margin:0, padding:0tapi itu tidak membantu ...


Bagi saya, ini berfungsi dengan baik ... konteks mana yang Anda alami ini? Mungkin memposting beberapa baris kode lagi?

3
Bisakah Anda mereproduksi ini di situs langsung, seperti JS Fiddle agar kami dapat melihat apa yang terjadi?
David mengatakan mengembalikan Monica

Jawaban:


189

Anda dapat menggunakan gambar tipe input.

<input type="image" src="http://example.com/path/to/image.png" />

Ini berfungsi sebagai tombol dan dapat memiliki penangan acara yang melekat padanya.

Sebagai alternatif, Anda dapat menggunakan css untuk menata tombol Anda dengan gambar latar belakang, dan mengatur batas, margin, dan sejenisnya dengan tepat.

<button style="background: url(myimage.png)" ... />

1
... dan tidak perlu JavaScript untuk mengirimkan formulir.
ComFreek

6
-1: " Seharusnya " adalah istilah yang terlalu kuat, karena ini tidak benar-benar <input type="image">dirancang untuk apa. Mengapa Anda tidak menyarankan CSS?
Wesley Murch

Saya lebih suka menggunakan tombol. jika saya tidak menemukan jawaban saya akan melakukannya. terima kasih
Amit Hagin

Kemudian gaya itu, seperti yang tercantum dalam jawaban ini dan lainnya.
Andrew Barber

3
Jangan lupa bahwa kedua tag penutup akhir awal diperlukan untuk elemen tombol, jadi secara teknis <tombol /> tidak valid, itu harus <button> </button>.
Tamas Czinege

66

Jika gambar adalah sepotong data semantik (seperti gambar profil, misalnya), maka gunakan <img>elemen di dalam Anda <button>dan gunakan CSS untuk mengubah ukuran <img>. Jika gambar hanyalah cara untuk membuat tombol menyenangkan secara visual, gunakan CSS background-imageuntuk menata <button>(dan jangan gunakan <img>).

Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

CSS:

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

Keluaran:

masukkan deskripsi gambar di sini


<image>Elemen @ThinkingStiff ? Saya pikir maksud Anda <img>dalam teks Anda;)
ComFreek

terima kasih atas jawaban yang bagus !! tapi masalahnya tetap ... Saya sedikit memperbarui pertanyaan - mungkin ini bisa membantu Anda memahaminya.
Amit Hagin

@AmitHagin saya melihat pembaruan Anda. Ingat tombol memiliki batas, yang termasuk dalam perhitungan ketinggiannya. Jadi agar sesuai dengan 20pxgambar yang tinggi, ketinggian tombol harus 24px.
ThinkingStiff

@AmitHagin Juga, untuk mencegah masalah ruang putih, ubah <img>ke display: block;. Saya memperbarui tautan demo untuk menunjukkan ini.
ThinkingStiff

Apakah ada kekhawatiran tentang aksesibilitas / teks alternatif dengan metode ini? Saya benar-benar berkarat, tetapi apakah menyembunyikan teks dengan mengimbangi beberapa ribu piksel masih merupakan solusi yang diterima?
Rob Drimmie

10

coba ini

   <input type="button" style="background-image:url('your_url')"/>

10

Cara termudah untuk menempatkan gambar ke dalam tombol:

<button onclick="myFunction()"><img src="your image name here.png"></button>

Ini akan secara otomatis mengubah ukuran tombol menjadi ukuran gambar.


4

Mengapa Anda tidak menggunakan gambar dengan onclick atribut?

Sebagai contoh:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>

0

Tambahkan folder baru dengan nama Gambar di proyek Anda. Masukkan beberapa gambar ke folder Gambar. Maka itu akan bekerja dengan baik.

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">

0

Coba seperti format ini dan gunakan atribut "lebar" untuk mengelola ukuran gambar, itu sederhana. JavaScript juga dapat diimplementasikan dalam elemen.

<button><img src=""></button>


-7

Tombol tidak secara langsung mendukung gambar. Selain itu cara yang Anda lakukan adalah untuk tautan ()

Gambar ditambahkan di atas tombol menggunakan properti BACKGROUND-IMAGE dengan penuh gaya

Anda juga dapat menentukan pengulangan dan properti lainnya menggunakan tag

Misalnya: gambar dasar yang ditambahkan ke tombol akan memiliki kode ini:

    <button style="background-image:url(myImage.png)">

Perdamaian


2
Jawaban Anda salah, dokumentasi resmi mengatakan bahwa itu dibolehkan.
biphobe
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.