Korzystanie z JavaScript i grafiki

Puryści internetowi uważają, że World Wide Web jest przede wszystkim środkiem rozpowszechniania informacji. Wiele z tych informacji ma postać tekstową, którą można łatwo wyświetlić w dowolnej przeglądarce internetowej. Ale nawet od początku istnienia sieci grafika odgrywała ważną rolę w ulepszaniu podstawowej strony tekstowej. Obecnie nie jest niczym niezwykłym, że witryny sieci Web składają się w 90% z grafiki. Strony te mogą nie odpowiadać ścisłej koncepcji rozpowszechniania informacji, ale niektóre z nich są z pewnością atrakcyjne.

Większość z nas stara się zachować równowagę między tekstem a grafiką na naszych stronach internetowych. Grafika służy poprawie wyglądu i czytelności strony. Typowe zastosowania grafiki obejmują banery, reklamy firm sponsorujących i kolorowe punktory do podkreślania ważnych fragmentów tekstu.

Język skryptowy JavaScript może służyć do ulepszania grafiki umieszczanej na stronach internetowych. JavaScript może służyć do dynamicznego sterowania zawartością graficzną strony. Na przykład możesz wyświetlić jedno tło strony rano, a drugie po południu. A w nocy możesz użyć tła pola gwiazdy. Lub możesz użyć JavaScript do stworzenia wyświetlacza zegarów cyfrowych, liczników trafień, wykresów słupkowych i nie tylko.

Kolumna z tego miesiąca opisuje kilka sposobów wykorzystania JavaScript i grafiki. W tej dyskusji brakuje jednak jednego ważnego tematu: używania JavaScript do animacji. Temat ten zasługuje na swoją własną kolumnę, która pojawi się wkrótce.

Zrozumienie elementu obrazu HTML

Elementem jest najczęściej używany do reprezentowania tag treści graficznych w dokumencie HTML (najnowsze specyfikacje HTML dodać element, ale to nie jest jeszcze obsługiwany przez Netscape i większości innych przeglądarek). Dla niewtajemniczonych składnia tagu podstawowego to:

gdzie „url” to poprawnie skonstruowany adres URL pliku obrazu. Adres URL może być bezwzględny lub względny. Pamiętaj, że nie wszystkie przeglądarki są przystosowane do wyświetlania grafiki. Dlatego zaleca się dołączenie „tekstu zastępczego” do obrazu dla osób, które mają problemy z obrazem. Użyj atrybutu ALT wewnątrz tagu, aby określić tekst zastępczy. Oto przykład:

Obrazy utworzone za pomocą tagu są traktowane jako „wbudowane”, ponieważ są traktowane jak znaki tekstowe. Oznacza to, że możesz przeplatać obrazy z tekstem, a przeglądarka zadba o to, aby wszystko działało poprawnie.

Jednak większość obrazów jest wyższa niż otaczający je tekst. Normalnym zachowaniem większości przeglądarek jest umieszczenie dołu obrazu równo z dolną częścią otaczającego go tekstu. Możesz zmienić to zachowanie, jeśli chcesz innego wyrównania. Najczęstsze opcje wyrównania, zrozumiałe dla wszystkich przeglądarek wyświetlających obrazy, to:

  • dół - wyrównuje tekst do dołu obrazu. To jest ustawienie domyślne.
  • środek - wyrównuje tekst do środka obrazu.
  • do góry - wyrównuje tekst do góry obrazu.

W danej chwili możesz używać tylko jednego wyrównania. Składnia jest następująca:

Przeglądarki zazwyczaj wyświetlają obrazy w „naturalnym rozmiarze”. Jeśli na przykład obraz ma 100 pikseli na 100 pikseli, to właśnie taki jest duży, gdy jest renderowany na ekranie przeglądarki. Ale w Netscape możesz zmienić rozmiar obrazu, jeśli chcesz, aby był mniejszy lub większy, używając atrybutów WIDTH i HEIGHT. Zaletą tych atrybutów jest to, że gdy są używane, przeglądarka tworzy puste pole dla obrazu, a następnie wypełnia je obrazem, gdy ładuje się cała strona. Informuje to użytkowników, że w tym miejscu oczekuje się grafiki.

  • Określenie samej szerokości lub wysokości powoduje proporcjonalną zmianę rozmiaru obrazu. Na przykład określenie rozmiarów kwadratowego obrazu do wysokości i szerokości 100 pikseli. Jeśli oryginalny obraz nie jest kwadratowy, jego rozmiar jest proporcjonalny. Na przykład, jeśli oryginalny obraz ma 400 pikseli szerokości i 100 pikseli wysokości, zmiana szerokości na 100 pikseli zmniejsza wysokość obrazu do 25 pikseli.

  • Określenie zarówno szerokości, jak i wysokości umożliwia zmianę proporcji obrazu w dowolny sposób. Na przykład możesz przekształcić ten obraz o wymiarach 400 na 100 pikseli na 120 na 120, 75 na 90 lub cokolwiek innego.

Na przykład:

Uwaga : w połączeniu z JavaScript należy zawsze podawać atrybuty HEIGHT i WIDTH dla tagów. W przeciwnym razie możesz uzyskać niespójne wyniki i / lub awarię! Ta uwaga dotyczy każdego tagu, który pojawia się w tym samym dokumencie, który zawiera kod JavaScript.

Łączenie obrazów za pomocą JavaScript

JavaScript może służyć do ulepszania obrazów używanych w dokumentach HTML. Na przykład, możesz użyć JavaScript do dynamicznego tworzenia strony przy użyciu obrazów wybranych za pomocą warunkowego wyrażenia testowego, takiego jak pora dnia.

W rzeczywistości aplikacja zegara cyfrowego JavaScript, która używa JavaScript i różnych obrazów GIF, jest jedną z najpopularniejszych w Internecie. Przykład clock.html wykorzystuje JavaScript do wyświetlania aktualnego czasu za pomocą dużych zielonych cyfr LED. Każda cyfra jest pojedynczym plikiem GIF, połączonym razem przez JavaScript w celu utworzenia tarczy zegara cyfrowego.

Użyłem cyfrowych GIF-ów dostarczonych przez Russa Walsha; Russ uprzejmie zezwala na swobodne wykorzystywanie swoich GIF-ów na stronach internetowych, pod warunkiem podania odpowiedniego źródła. Możesz użyć dowolnych cyfr w swoim zegarze, ale musisz dostarczyć oddzielny plik GIF dla każdej cyfry i oddzielne pliki dla każdego z dwukropków i wskaźników AM / PM. Zmień kod clock.html, aby odnosił się do plików z cyframi, których chcesz użyć.

Uwaga : ważne jest, aby podać bezwzględny adres URL używanych obrazów. W przeciwnym razie Netscape nie wyświetli grafiki. W przykładzie clock.html użyto funkcji (pathOnly) do wyodrębnienia bieżącej ścieżki dokumentu. Skrypt oczekuje zatem, że znajdzie obrazy w tej samej ścieżce co dokument. Alternatywnie, możesz na stałe zakodować bezwzględny adres URL, jeśli umieścisz obrazy w innym miejscu, lub możesz użyć znacznika na początku dokumentu, aby wyraźnie poinformować Netscape o podstawowym adresie URL, którego chcesz użyć.

Zegar cyfrowy JavaScript

Zegar cyfrowy JavaScript var Temp; Ustaw zegarek(); function setClock () {var OpenImg = ' ' Temp = "" now = new Date (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); teraz = null; if (CurHour> = 12) {CurHour = CurHour - 12; Ampm = „pm”; } else Ampm = "am"; if (CurMinute == 0) CurMinute = "12" if (CurMinute <10) CurMinute = "0" + CurMinute else CurMinute = "" + CurMinute

CurHour = „” + CurHour; for (Count = 0; Count 'for (Count = 0; Count <CurMinute.length; Count ++) {Temp + = OpenImg + CurMinute.substring (Count, Count + 1) + CloseImg} Temp + = OpenImg + Ampm + CloseImg}

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

Zegar JavaScript

Bieżący czas to: document.write (Temp);

Używanie JavaScript z mapami obrazu po stronie klienta

Jeśli masz szczęście, że masz kontrolę nad serwerem zawierającym opublikowane przez Ciebie strony internetowe, prawdopodobnie zajmowałeś się mapami obrazów po stronie serwera. Są to obrazy, które zostały „podzielone” na mniejsze kawałki; gdy użytkownik klika każdą porcję, serwer odpowiada na inną akcję.

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 ("Spis treści"); }