Menggunakan JavaScript dan grafik

Pembersih internet menganggap World Wide Web terutamanya wahana untuk menyebarkan maklumat. Sebilangan besar maklumat itu dalam bentuk teks, yang dapat dengan mudah diberikan oleh penyemak imbas Web mana pun. Tetapi sejak awal Web, grafik telah memainkan peranan penting dalam meningkatkan halaman teks asas. Pada hari ini, tidak biasa melihat laman web yang mempunyai grafik sembilan puluh peratus. Laman web ini mungkin tidak sesuai dengan konsep penyebaran maklumat yang ketat, tetapi sebahagian daripadanya pasti menarik.

Sebilangan besar daripada kita berusaha untuk keseimbangan antara teks dan grafik di laman Web kami. Grafik berfungsi untuk meningkatkan penampilan dan keterbacaan halaman. Kegunaan khas untuk grafik merangkumi sepanduk, iklan dari syarikat penaja, dan peluru berwarna untuk menyoroti potongan teks penting.

Bahasa skrip JavaScript dapat digunakan untuk meningkatkan grafik yang anda letakkan di halaman Web anda. JavaScript boleh digunakan untuk mengawal kandungan grafik halaman secara dinamik. Contohnya, anda boleh memaparkan satu latar belakang halaman anda pada waktu pagi dan yang lain pada sebelah petang. Dan pada waktu malam anda boleh menggunakan latar padang bintang. Atau, anda boleh menggunakan JavaScript untuk membuat paparan jam digital, hit counter, grafik bar, dan lain-lain.

Lajur bulan ini memperincikan beberapa cara anda boleh menggunakan JavaScript dan grafik. Tetapi satu topik penting hilang dari perbincangan ini: menggunakan JavaScript untuk animasi. Subjek itu pantas mendapat kolumnya sendiri, akan segera hadir.

Memahami elemen gambar HTML

The elemen adalah tag yang paling biasa digunakan untuk mewakili kandungan grafik dalam dokumen HTML (spesifikasi HTML terkini menambah elemen, tetapi ia masih belum disokong oleh Netscape dan pelayar lain). Untuk yang belum tahu, sintaks tag asas adalah:

di mana "url" adalah URL yang dibina dengan betul untuk fail gambar. URL boleh mutlak atau relatif. Ingat bahawa tidak semua penyemak imbas dilengkapi untuk memaparkan grafik. Oleh itu, disarankan untuk memasukkan "teks ganti" untuk gambar bagi mereka yang menghadapi masalah imej. Gunakan atribut ALT di dalam tag untuk menentukan teks alternatif. Inilah contohnya:

Gambar yang dibuat dengan tag dianggap "sebaris" kerana dilayan seperti watak teks. Ini bermakna anda boleh menyilang gambar dengan teks, dan penyemak imbas akan memastikan semuanya mengalir dengan betul.

Walau bagaimanapun, kebanyakan gambar lebih tinggi daripada teks yang mengelilinginya. Tingkah laku normal kebanyakan penyemak imbas adalah meletakkan bahagian bawah gambar dengan bahagian bawah teks yang mengelilinginya. Anda boleh mengubah tingkah laku ini jika anda mahukan penjajaran yang berbeza. Pilihan penjajaran yang paling umum, difahami oleh semua penyemak imbas yang memaparkan gambar, adalah:

  • bawah - Menyelaraskan teks ke bahagian bawah gambar. Ini adalah lalai.
  • tengah - Menyelaraskan teks ke tengah gambar.
  • atas - Menyelaraskan teks ke bahagian atas gambar.

Anda hanya boleh menggunakan satu penjajaran pada satu masa. Sintaksnya adalah:

Penyemak imbas biasanya memaparkan gambar dalam "ukuran semula jadi" mereka. Sekiranya gambar adalah 100 piksel dengan 100 piksel, misalnya, seberapa besar gambar itu apabila diberikan pada skrin penyemak imbas. Tetapi dengan Netscape anda boleh mengubah ukuran gambar jika anda menginginkannya lebih kecil atau lebih besar dengan menggunakan atribut WIDTH dan HEIGHT. Kelebihan atribut ini adalah bahawa, apabila digunakan, penyemak imbas membuat kotak kosong untuk gambar, kemudian mengisi kotak dengan gambar ketika seluruh halaman dimuat. Ini memberi isyarat kepada pengguna bahawa grafik diharapkan di tempat itu.

  • Menentukan hanya lebar atau tinggi akan mengubah ukuran gambar secara berkadar. Sebagai contoh, menentukan ukuran gambar persegi hingga tinggi dan lebar 100 piksel. Sekiranya gambar aslinya tidak berbentuk segi empat sama, ukurannya berkadar relatif. Sebagai contoh, jika gambar asli selebar 400 piksel dengan tinggi 100 piksel, mengubah lebar menjadi 100 piksel akan menurunkan gambar menjadi tinggi 25 piksel.

  • Menentukan lebar dan tinggi membolehkan anda mengubah bahagian gambar dengan cara yang anda suka. Sebagai contoh, anda boleh mengubah gambar 400-dengan-100-piksel itu menjadi 120 hingga 120, 75 hingga 90, atau apa sahaja.

Sebagai contoh:

Perhatian : Apabila digabungkan dengan JavaScript, anda harus selalu memberikan atribut HEIGHT dan WIDTH untuk tag. Jika tidak, anda mungkin mendapat hasil yang tidak konsisten dan / atau terhempas! Perhatian ini berlaku untuk setiap tag yang muncul dalam dokumen yang sama dengan kod JavaScript.

Menggabungkan gambar dengan JavaScript

JavaScript boleh digunakan untuk meningkatkan gambar yang digunakan dalam dokumen HTML. Sebagai contoh, anda dapat menggunakan JavaScript untuk membuat halaman secara dinamis menggunakan gambar yang dipilih oleh ekspresi ujian bersyarat, seperti waktu dalam sehari.

Sebenarnya, aplikasi jam digital JavaScript, yang menggunakan JavaScript dan pelbagai gambar GIF, adalah salah satu yang paling popular di Web. Contoh clock.html menggunakan JavaScript untuk memaparkan waktu semasa, menggunakan digit LED hijau besar. Setiap digit adalah GIF individu, digabungkan dengan JavaScript untuk membentuk wajah jam digital.

Saya menggunakan GIF digit yang disediakan oleh Russ Walsh; Russ dengan baik membiarkan GIFnya digunakan secara bebas di laman Web, asalkan diberikan kredit yang tepat. Anda boleh menggunakan sebarang digit yang anda inginkan untuk jam anda, tetapi anda mesti menyediakan fail GIF yang berasingan untuk setiap angka dan fail yang berasingan masing-masing untuk tanda titik dua dan am / pm. Tukar kod clock.html untuk merujuk fail digit yang ingin anda gunakan.

Catatan : Penting untuk anda memberikan URL mutlak pada gambar yang anda gunakan. Jika tidak Netscape tidak akan memaparkan grafik. Contoh clock.html menggunakan fungsi (pathOnly) untuk mengekstrak jalur semasa dokumen. Oleh itu, skrip berharap dapat mencari gambar di jalan yang sama dengan dokumen. Sebagai alternatif, anda boleh membuat kod URL yang mutlak sekiranya anda meletakkan gambar di tempat lain, atau anda boleh menggunakan teg pada permulaan dokumen untuk memberitahu Netscape secara jelas URL asas yang ingin anda gunakan.

Jam digital JavaScript

Jam Digital JavaScript var Temp; setClock (); fungsi setClock () {var OpenImg = ' ' Temp = "" now = new Date (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); sekarang = batal; 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 (Count = 0; Count 'for (Count = 0; Count <CurMinute.length; Count ++) {Temp + = OpenImg + CurMinute.substring (Count, Count + 1) + CloseImg} Temp + = OpenImg + Ampm + CloseImg}

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

Jam JavaScript

Masa semasa adalah: document.write (Temp);

Menggunakan JavaScript dengan peta gambar sisi pelanggan

Sekiranya anda cukup bernasib baik kerana dapat mengawal pelayan yang mengandungi halaman Web anda yang diterbitkan, anda mungkin telah menggunakan peta gambar sisi pelayan. Ini adalah gambar yang telah "dibedah" menjadi potongan yang lebih kecil; ketika pengguna mengklik setiap bahagian, pelayan bertindak balas terhadap tindakan yang berbeza.

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); }

fungsi toc () {alert ("Jadual kandungan"); }