IMAGES - HTML5 - page 190

Because navigator.appVersion generates a long description, get only the part of the
results that either shows iPhone or not.
Create a new image object named imageNow .
Initialize a variable named showNow (that you'll use in the function).
Create a function that asks, “Is this an iPhone environment or not?” If it is an iPhone
environment, then use the small graphic; otherwise, use the big graphic. (In an Opera
Mini quirk, JavaScript returns “ (iPhon” as the i rst six characters of navigator.
appVersion ; so, the code has to query whether it found “ (iPhon” or “iPhone” —
this goes to show just how accommodating JavaScript can be.)

Of course, there are a lot more types of mobile devices available, and you'd have to change the
JavaScript code to add more to the list of mobile devices besides iPhone, but the logic is the
same — just a bit more JavaScript.

By the way, if you've never done anything with JavaScript, don't expect to understand the code
in the Web page markup. h is demonstration just shows what can be done with JavaScript.
h e future of the Web needs to include many dif erent kinds of Web-browsing platforms, and
this little demonstration is just a taste of what you can do. (If you're an experienced JavaScript
developer, you can create something a bit more elegant!)

APPLICATION FOR DYNAMIC SVG FILES FROM ADOBE ILLUSTRATOR CS5 FILES
Adobe Illustrator CS5 (AI) has an added feature, Adobe Illustrator CS5 HTML5 Pack,
available at http://labs.adobe.com . It's designed to allow graphic designers using AI to
easily convert their .ai i les to .svg i les containing parts that can be dynamically changed
using HTML5.To give you an idea how it works, the following example begins with a simple
graphic image in AI. It has two layers, and on one of the layers, the designer wants variable
color that can be coded in HTML5. h e layer to be given a variable feature is selected and
viewed in the Appearance panel (as shown in Figure 9-15).

194

Figure 9-15: Fill is set as a variable in Adobe Illustrator CS5.