Menggunakan JavaScript dan grafik

Puritan internet menganggap World Wide Web terutama sebagai sarana untuk menyebarkan informasi. Banyak dari informasi itu dalam bentuk teks, yang dapat dengan mudah ditampilkan oleh browser Web apa pun. Tetapi bahkan dari hari-hari awal Web, grafik telah memainkan peran penting dalam meningkatkan halaman teks dasar. Hari-hari ini, bukanlah hal yang aneh melihat situs Web dengan grafis sembilan puluh persen. Situs-situs ini mungkin tidak sesuai dengan konsep penyebaran informasi yang ketat, tetapi beberapa di antaranya pasti menarik.

Sebagian besar dari kita mengupayakan keseimbangan antara teks dan grafik di halaman Web kita. Grafik berfungsi untuk meningkatkan tampilan dan keterbacaan halaman. Penggunaan umum untuk grafik termasuk spanduk, iklan dari perusahaan sponsor, dan peluru berwarna untuk menyoroti bagian teks yang penting.

Bahasa skrip JavaScript dapat digunakan untuk meningkatkan grafik yang Anda tempatkan pada halaman Web Anda. JavaScript dapat digunakan untuk mengontrol konten grafis halaman secara dinamis. Misalnya, Anda dapat menampilkan satu latar belakang untuk halaman Anda di pagi hari dan satu lagi di sore hari. Dan di malam hari Anda bisa menggunakan latar belakang bidang bintang. Atau, Anda dapat menggunakan JavaScript untuk membuat tampilan jam digital, penghitung klik, grafik batang, dan banyak lagi.

Kolom bulan ini merinci beberapa cara Anda dapat menggunakan JavaScript dan grafik. Tapi satu topik penting hilang dari diskusi ini: menggunakan JavaScript untuk animasi. Subjek itu layak mendapatkan kolomnya sendiri, segera hadir.

Memahami elemen gambar HTML

The elemen adalah tag yang paling umum digunakan untuk mewakili konten grafis dalam dokumen HTML (spesifikasi HTML terbaru menambahkan elemen, tetapi belum didukung oleh Netscape dan kebanyakan browser lainnya). Untuk yang belum tahu, sintaks dari tag dasarnya adalah:

di mana "url" adalah URL yang dibuat dengan benar untuk file gambar. URL bisa absolut atau relatif. Ingatlah bahwa tidak semua browser dilengkapi untuk menampilkan grafik. Oleh karena itu, disarankan untuk menyertakan "teks alternatif" untuk gambar bagi mereka yang kesulitan gambar. Gunakan atribut ALT di dalam tag untuk menentukan teks alternatif. Berikut contohnya:

Gambar yang dibuat dengan tag dianggap "sebaris" karena diperlakukan seperti karakter teks. Itu berarti Anda dapat menyelingi gambar dengan teks, dan browser akan memastikan semuanya mengalir dengan baik.

Namun, sebagian besar gambar lebih tinggi dari teks yang mengelilinginya. Perilaku normal kebanyakan browser adalah menempatkan bagian bawah gambar sejajar dengan bagian bawah teks yang mengelilinginya. Anda dapat mengubah perilaku ini jika Anda menginginkan perataan yang berbeda. Pilihan perataan yang paling umum, dipahami oleh semua browser yang menampilkan gambar, adalah:

  • bottom - Menyejajarkan teks dengan bagian bawah gambar. Ini adalah defaultnya.
  • tengah - Meratakan teks ke tengah gambar.
  • atas - Menyejajarkan teks ke bagian atas gambar.

Anda hanya dapat menggunakan satu perataan dalam satu waktu. Sintaksnya adalah:

Browser biasanya menampilkan gambar dalam "ukuran aslinya". Jika sebuah gambar berukuran 100 x 100 piksel, misalnya, sebesar itulah ukurannya saat ditampilkan di layar browser. Tetapi dengan Netscape Anda dapat mengubah ukuran gambar jika Anda ingin lebih kecil atau lebih besar dengan menggunakan atribut WIDTH dan HEIGHT. Keuntungan dari atribut ini adalah, saat digunakan, browser membuat kotak kosong untuk gambar, lalu mengisi kotak dengan gambar saat seluruh halaman dimuat. Ini memberi isyarat kepada pengguna bahwa grafik diharapkan ada di tempat itu.

  • Menentukan hanya lebar atau tinggi akan mengubah ukuran gambar secara proporsional. Misalnya, menentukan ukuran gambar persegi dengan tinggi dan lebar 100 piksel. Jika gambar asli tidak persegi, ukurannya relatif proporsional. Misalnya, jika gambar asli memiliki lebar 400 piksel kali tinggi 100 piksel, mengubah lebar menjadi 100 piksel akan mengurangi gambar menjadi tinggi 25 piksel.

  • Menentukan lebar dan tinggi memungkinkan Anda mengubah proporsi gambar sesuka Anda. Misalnya, Anda dapat mengubah gambar 400 kali 100 piksel menjadi 120 x 120, 75 x 90, atau yang lainnya.

Sebagai contoh:

Perhatian : Saat dikombinasikan dengan JavaScript, Anda harus selalu memberikan atribut HEIGHT dan WIDTH untuk tag. Jika tidak, Anda mungkin mendapatkan hasil yang tidak konsisten dan / atau crash! Perhatian ini berlaku untuk semua tag yang muncul di dokumen yang sama yang berisi kode JavaScript.

Menggabungkan gambar dengan JavaScript

JavaScript dapat digunakan untuk meningkatkan gambar yang digunakan dalam dokumen HTML. Misalnya, Anda dapat menggunakan JavaScript untuk membuat halaman secara dinamis menggunakan gambar yang dipilih oleh ekspresi pengujian bersyarat, seperti waktu.

Faktanya, aplikasi jam digital JavaScript, yang menggunakan JavaScript dan bermacam-macam gambar GIF, adalah salah satu yang paling populer di Web. Contoh clock.html menggunakan JavaScript untuk menampilkan waktu saat ini, menggunakan angka LED hijau besar. Setiap digit adalah GIF individu, dirangkai oleh JavaScript untuk membentuk permukaan jam digital.

Saya menggunakan GIF digit yang disediakan oleh Russ Walsh; Russ dengan ramah mengizinkan GIF-nya digunakan secara bebas di halaman Web, selama kredit yang diberikan diberikan. Anda dapat menggunakan digit apa pun yang Anda inginkan untuk jam Anda, tetapi Anda harus menyediakan file GIF terpisah untuk setiap angka dan file terpisah masing-masing untuk tanda titik dua dan indikator am / pm. Ubah kode clock.html untuk merujuk file digit yang ingin Anda gunakan.

Catatan : Anda harus memberikan URL mutlak untuk gambar yang Anda gunakan. Jika tidak, Netscape tidak akan menampilkan grafik. Contoh clock.html menggunakan fungsi (pathOnly) untuk mengekstrak jalur dokumen saat ini. Oleh karena itu, skrip mengharapkan untuk menemukan gambar di jalur yang sama dengan dokumen. Sebagai alternatif, Anda dapat melakukan hard-code pada URL absolut jika Anda menempatkan gambar di tempat lain, atau Anda dapat menggunakan tag di awal dokumen untuk secara eksplisit memberi tahu Netscape URL dasar yang ingin Anda gunakan.

Jam digital JavaScript

Jam Digital JavaScript var Temp; setClock (); function setClock () {var OpenImg = ' ' Temp = "" sekarang = Tanggal baru (); var CurHour = now.getHours (); var CurMinute = sekarang.getMinutes (); sekarang = null; jika (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } lain Ampm = "am"; if (CurHour == 0) CurHour = "12" if (CurMinute <10) CurMinute = "0" + CurMinute else CurMinute = "" + CurMinute

CurHour = "" + CurHour; untuk (Hitung = 0; Hitung 'untuk (Hitung = 0; Hitung <CurMinute.length; Hitung ++) {Temp + = OpenImg + CurMinute.substring (Hitung, Hitung + 1) + CloseImg} Temp + = OpenImg + Ampm + CloseImg}

function pathOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }

Jam JavaScript

Waktu saat ini adalah: document.write (Temp);

Menggunakan JavaScript dengan peta gambar sisi klien

Jika Anda cukup beruntung memiliki kendali atas server yang berisi halaman Web yang Anda terbitkan, Anda mungkin mencoba-coba dengan peta gambar sisi server. Ini adalah gambar yang telah "dibedah" menjadi potongan yang lebih kecil; saat pengguna mengklik setiap bagian, server merespons tindakan yang berbeda.

The downside to server-side image maps is that you need a CGI program running on the server to handle the click requests. Not everyone has CGI access. Client-side image maps change that: The "intelligence" for dissecting the image and directing the user to the proper link -- based on the area of the image that was clicked -- is built into the browser. Netscape Navigator (version 2.0 and later) is one of many browsers that now support this standard.

Netscape takes the process a step further, however, letting you integrate client-side image maps with JavaScript. In an ordinary client-side image map, you are limited merely to linking to another page. If you wish, you can "link" to a JavaScript function and give your image maps even more intelligence. For instance, you might create a control panel that only lets users successfully click on an image button if some piece of information -- say a user name -- has been provided.

The anatomy of a client-side image map

Two new HTML tags are used to create client-side image maps. They are the tag, which defines the map structure, and one or more tags, which define the clickable areas within the image. To create the image map, define a tag and give the mapping a name. The syntax is:


  

You can use most any name for the map, but it should contain only alphabetical and numeric characters. The exception is the underscore, but avoid using an underscore for the first character. Next, define one or more tags that define the areas of your image. The tag takes the syntax:


  

After the last tag, use the tag to denote the end of the mapping.

The last item is the image you want to use, with a reference to the area map you've previously defined. Use the standard tag, with a new USEMAP attribute. For the USEMAP attribute, provide the name of the map. Here's an example:

This map uses an image named control.gif. The tag references the map name, which is #control (note the hash before the name). Other attributes provided with the tag are no border (BORDER=0), and the width and height of the image. When your users click on the back arrow (which is the first area defined), they are sent to the index.html page. Conversely, if they click on the contents "button" (the second area defined), they are taken to a page called toc.html. And if they click on the forward arrow, they are taken to a page called backpage.html.

Adding JavaScript to image map control

JavaScript can be used to extend the functionality of client-side image maps. For added flexibility provide the name of a JavaScript function for the HREF in the tag. Instead of jumping to some page, your JavaScript code is executed in which you can do anything you want. The trick: Use the JavaScript: protocol for the URL, and follow it with the name of the function you wish to use.

For example, suppose you want users to go back only one page in the history list when they click on the back arrow. You can use the window.history.go(-1) method to jump back one page in the user's history list. You can either provide this entire function after the JavaScript: protocol, or call a user-defined function that contains this instruction. Here are both methods:


  

or ...


  

... and elsewhere in the document:

 function goBack() { window.history.go (-1); }  

Personally, I prefer the latter method, because I often need to provide a number of JavaScript functions that I want performed. But, you can use whatever method you like best and which best fits the situation.

Following is a working example of using client-side image maps with JavaScript. The buttons display an alert box to show you that the JavaScript: URL is indeed working. The forward and back buttons also work -- assuming you have pages forward and backward in your history list. If the history list is empty (you have loaded the document into a new window, for example) then the current page remains.

Client-side image map example

Client Side Image Map Example function goBack() { alert ("Back"); window.history.go (-1); }

function goForward() { alert ("Forward"); window.history.go (1); }

function toc () {alert ("Daftar Isi"); }