Intro for Tips and tricks
In-Tips artinya introduksi Tips, bukan ngintip :P
Kalo suka silakan baca, kalo gak tak perlu komplain lah.
Dah bagus gw mau posting :D
CSS Diagnostic for Image Alternate Text
Last Updated :: Saturday, 16 May 2009 18:43 by Riesurya@MOTW
Tulisan beikut ini terinspirasi oleh artikel yang ditulis oleh Mas Dani Iswara pada Teks Alternatif untuk Atribut ALT. So, saya tidak akan bercerita lebih lanjut tentang mengapa dan bagaimana memasang alternate text pada image. Ringkasnya tulisan ini akan berkisah (baca:dongengBeberapa waktu yang lalu dalam acara reality web show (emang ada?), saya kembali mengunjungi situs salah seorang guru gaib saya (baca: cyber web master), Eric Meyer. Kerena di siana banyak bercerita tentang css (dari situ juga saya tergila-gila pada CSS), maka tips ini akan menggunakan css sebagai alat bantu dalam hal validasi entah dalam hal XHTML ataupun lainnya.
Kali ini saya mengutip bagian tulisan yang ditulis oleh EricMeyer untuk pemeriksaan terhadap alternate text.
Berikut tipsnya (kebanyakan intro ya...)
Pemeriksaan attribut ALT text dan Title pada image
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}Tampilkan semua image untuk dipasang outline (garis) merah besar - lantaran lumayan mencolok mata dan biar gampang ngeceknya.
Kondisi:
- Bila pada image sudah ada attribut alt dan title, maka kita set outline width adalah nol.
- Bila pada image sudah ada attribut alt, set warna outline color menjadi fuchsia. Hal ini dimaksudkan bahwa semua image yang tidak memiliki attribut alt akan tetap ber-outlined merah (5px).
- Bila ternyata masih ada image yang tidak memiliki baik attribut alt dan juga title, maka kita pasang outline-nya double (biar tambah ngejreng gitu) .
- Bila pada image memiliki attribut title tapi tidak attribut alt, atau sebaliknya, maka kita pasang lebar outline sebesar 3px.
- Bila ada image yang attribut alt dan title -nya kosong (beda dengan tanpa sama sekali ya), maka kita pasang outlinenya dotted (berupa titik-titik).
Jakarta, 16Mei2009
(tidak jadi berangkat recharging lantaran bangun kesiangan)
PS: please put source link if you want to embedded this article (or any others in MOTW) in your blog to respect my work and time, Thank you :)
Dont miss it, be the first get the latest article from Myfia On The Web
Bacaan Lainnya (Click 2Open)
Tuesday, 22 June 2010
Thursday, 17 June 2010
Wednesday, 16 June 2010
Wednesday, 16 June 2010
Monday, 17 May 2010
Comments
arsip di tulisan lama blm sempat saya edit lg aturan mainnya..jd di tulisan jadul sama sekali masi perawan..
dan saya masi make fitur web developer-nya fx buat ngecek itu semua (images » display alt attributes) :)