HTML 5 Image - HTML 5 Multimedia Design - HTML5多媒體設計之研究

Chapter 3 HTML 5 Multimedia Design

3.4 Image

3.4.1 HTML 5 Image

In HTML 5, the <img> tag defines an image.The <img> tag has two required attributes: src and alt. In HTML 5, we may use the img tag to display images in a web page. These images are then

called by the browser when the web page is loaded. The image is not “embedded” in the page, but is linked to it. Note that the more images yoy have on your page, the longer it will take to load the page, as more requests have to be made by the browser.And most important thing is Browser Support ,The <img> tag is supported in all major browsers like

Mozilla,Chrome,Safari,Opera etc.

How Is the img Tag Used in HTML 5 Documents? Here is a simple example:

The following describes the allowable img tag attributes:

Table 3.6 When Do You Use the img Tag in HTML 5 Attribute Value

Alt text This defines a short description of the image

Height Pixels % This defines how tall the image is. This can either be a number or percent.

ismap ismap This defines the image as a “server side image map” – many links over certain parts of the image

src URL This is the url path to the image

usemap #mapname This defines the image as a client-side image map – use this with map and area tags to define the clickable areas.

width Pixels % This defines how wide the image is. This can be either a number or percent.

The <img> tag defines an image in an HTML page. The images are not technically inserted into an HTML page; images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. The <img> tag has two required attributes: src and alt. The <img> tag also supports the Event Attributes in HTML5^.The <img> tag also supports the Global Attributes in HTML5.

29 3.4.2 Image Demos

Image Demo A: Full Screen Image Slider Demo description:

I create animated full screen background image slideshow .for this I use HTML 5, JavaScript, CSS functions to create simple animated full screen background slideshow. There is having four Backgrounds for options for user to choose any image between them.

Image Demo B: Image Theater Demo description:

I create Image Theater which we can use in browsers & mobile .There is have two options to use this theater we can click number or arrow keys to different images in theater.

Image Demo C: Image slideshow Demo description:

I try to create simple HTML 5 slideshow which we can use on Browsers & Mobile .But this demo only works with some Browsers.

Function:

We can use arrow keys to see next image slides.

30 Image Demo D: Mini Slideshow

Demo description:

I create a simple and beautiful slideshow gallery that can be easily integrated in web site .The idea is to have a container with slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

Function:

The main HTML structure will consist of the main slideshow wrapper that

contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs).

Image Demo E: Photo desk Demo description:

The idea about this demo is to have some photos on a surface that can be dragged and dropped, stacked and deleted. For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. Dropping it results in the picture being

“thrown back” to the table, in a random rotation. Clicking to see the next one then, makes the previous one being thrown back to the surface. When using the shuffle function, the photos get rotated and spread over the desk randomly. The rotation did not work well with Internet Explore.

Image Demo F: Photo stack Demo description:

The idea about this demo is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most images behind the entire stack. I use jQuery and CSS3 properties for the rotated image effect.

31 Image Demo G: Rotating Billboard

Demo description:

I use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea about this demo is to make one set of image slices disappear while another one the other ad appears. I decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.

Function:

HTML 5:

We have quite a lot of markup for the image slices – it has 22 slices for each ad:

Ex:

For these images, 22 slices each slice 35 pixels wide of a 770 pixel wide and 340 pixel high images were made. The billboard will be an absolute positioned div with the billboard image.

Since the image has some transparent spotlights, I want to lay it over the ad container.

To position the element in the center of the page, I set the left value to 50% and the left margin negatively to half of the width of the element.

The container for the ads will have the same style like the billboard, except the background-image. I do that, because need to position the containing elements at the same place like the billboard. I don’t want to place the ads inside of the billboard because we need the billboard to be on top of them. So, I do this trick and create another element with the same positioning:

The slices of the ad images will be 35 pixels wide. The slices of the second ad will have the same width, but initially need to set it to 0. Also need to set the left margin of the second slices to 18 pixels since I want to create the rotating effect

By positioning the elements one more pixel to the left than they are actually wide, I create a little gap between them. Now, the left margin has a value of 18 pixels because it is half of a slice plus

its gap. I set this because want the slices to appear or disappear from their center and not just from the side. If simply set the width of a slice to 0 pixels the image will not seem to be rotating.

JavaScript:

I now create a function for rotating the slices. The function will make the first ad slices disappear by making their width 0 pixels. To achieve the rotating effect, I add a left margin of 18 pixels.While the first ad slices disappear I make the others appear by removing the left margin of 18 pixels that I initially set in the CSS and giving them a width of 35 pixels.

Image Demo H: Rotating slideshow Demo description:

I use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. Also use with some CSS3.

Function:

HTML 5 :

The main container element is the #slideShowContainer div, which holds the #slideShow div and the previous / next links turned into arrows with CSS. The slides are defined as LI elements inside of an unordered list. The width of the images is set to 100%. This way they will scale according to the width of the #slideShow div.

Figure 3.3 Rotating Slideshow

CSS:

Although the #slideShow div is set to a width of 490px, its full size is actually 510px. This 20px difference scales down the slide images, which are reduced from their normal size of 480px down to 460px. In the next step, I used a jQuery animation to zoom in the slideshow to its full size. This way, even at full zoom, the images are actually at their regular size and there is no loss of quality

JQuery:

Although most modern browsers support CSS3 rotation, it is still rather tedious to work with the various vendor-specific properties. Luckily, there are plugins available that handle the cross-browser for us. I chose the jQuery rotate plugin, as it also integrates perfectly with the animate() and css() methods of the library, which means we can easily animate the rotation of elements. As you will see in a moment, I am using this in custom rotateContainer event, which rotates the #slideShow div.

I am using jQuery’s .support object to test whether the visitor’s browser supports CSS3 transformations. I am only going to display the rotation in browsers with transformation support, like the newer versions of Firefox, Chrome, Safari and Opera, while falling back to a plain fade in/out version of the slideshow in the rest.

Internet Explorer does provide a solution for rotating elements via its proprietary filter syntax, but it can’t handle the technique I am using for this slideshow. So, in effect, you are going to see a working slideshow in any browser, but only enjoy the fancy version in those that have support for it.

showNext and showPrevious are what I am using to control the slideshow. These in turn execute the rotate Container event, and pass the direction and degrees as parameters.

Javascript:

In this case, I also define the same showNext and showPrevious events, but here they just fade in / out the images, without starting a rotation.

The updateZindex() function is important, as otherwise the slides would be displayed in reverse order. This function loops through the elements in the order they currently are, and assigns a z-index property, so they are displayed correctly.

As the images are positioned absolutely, the last image will be shown on top. This is why I force them in the correct order by assigning z-indexes

updateZindex() ;

3.5 Drag And Drop

Drag and Drop is User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

HTML 5 came up with new feature called a Drag and Drop API . HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

3.5.1 Drag And Drop Events

There are number of events which are fired during various stages of the drag and drop operation.

These events are listed below:

Table 3.7 Drag and Drop Events

Events Description

dragstart Fires when the user starts dragging of the

object

dragenter Fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.

dragover This event is fired as the mouse is moved over

an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the drag enter event.

dragleave This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.

drag Fires every time the mouse is moved while the

object is being dragged.

drop The drop event is fired on the element where

the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.

dragend Fires when the user releases the mouse button while dragging an object

Note: Note that only drag events are fired, mouse events such as mousemove are not fired during a drag operation.

36 3.5.2 Drag and Drop Demos

Drag and Drop Demo A: Keep Surrounding Clean

Demo description:

Here comes another cool feature of HTML5, DRAG and DROP. Through this, you can drag any element and drop it to the desired location. And I also create animated background with this drag and drop stuff. If I set this attribute to true, then the element can be dragged.

Function:

HTML 5 :

Here is an HTML 5 function for drag and drop

To make actual use of this feature, Have to learn about certain events Table 3.8 HTML 5 function for drag and drop

ondragstart This event is fired when user starts dragging a draggable object

ondrop Fires on the target object when the mouse button is released during a drag-and-drop operation.

ondragenter Occurs when the user click-drags an object on the page over and into a valid drop target

ondragover This event fires continuously while the user click-drags an object over a valid drop target.

37 Drag and Drop Demo B: Image Vampire Demo description:

I create application for giving some funny touches to an image. I use jQuery and query UI for dragging and resizing little bling elements like mustaches and glasses With PHP the image and the bling elements will get merged and the end result can be viewed.

Function:

HTML 5 :

The markup is pretty simple: I have a main container with the objects sidebar, the main image and the tools area:

</div>

The objects sidebar contains all the drag gable elements and the tools area show a list of all the used elements. In each item I use a slider to allow the rotation of the respective element. I also provide a delete icon to remove the element which is in Red Cross symbol.

Javascript :

The element images that are dropped onto the main image will be stored in the following object:

"images": [ {"id" : "obj_0" ,"src" : "background.png", "width" : "640", "height" : "480"}]]

Every time I drop a new image insert it into the “images” array.The images are resizable and draggable.

The background div, where the main image is inserted is droppable. Each time I drop an element into this container I add it to the data object if it is not there already. The most important parameters added are the width, height, top and left. The last two are calculated based on the difference between the absolute top or left of the container and the drag gable object.

If the element was already in the data object, meaning that the user keeps dragging it around, I just update the new top and left in the data object. I also set a new z-index to the dropped element, so that the last one dropped always stays on top. Besides adding to the object I also add a new element to the tools sidebar, where I will be able to rotate the corresponding image and also delete it from the container. When removing an element from the container, I want to remove it from the sidebar, from the data object and also add it again to the elements list.

PHP :

What I doing here is getting all the info for each image dropped into the main container, and merging it with the background image. If there was a rotation then I need to make sure I recalculate the top and left, since the PHP image rotate function is not that friendly and it scales down the image after rotation

Chapter 4 Simulation & Game Design

4.1 HTML 5 Canvas

The HTML5 <canvas> is another interesting feature. This can be used for rendering graphs, game graphics, or other visual images. The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.The <canvas> tag is supported in all major browsers. Such as Chrome, Opera, Safari, and Mozilla Firefox.

The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. So how to create Canvas Element have to Add a canvas element to the HTML5 page. For this have to Specify the id, width, and height of the element:

HTML 5 canvas tag has some attributes as follows:

Table 4.1 Canvas Attributes

Attribute Value Description

Height Pixels Specifies the height of the canvas

Width Pixels Specifies the width of the canvas

4.2 Physics Simulation

Using HTML5, the developer or designer can now create the Physics simulation using canvas tag. The HTML 5 Canvas element can handle all different types of physics. Such as Gravity, weight distribution, speed and acceleration. Developer can also create 2D a canvas element. User can use these physics simulation on browsers it is very interesting and useful.

40 Physics Simulation Demo A: Shoot Box

Demo description:

This is simple physics shoot box. In this demo I use HTML 5 canvas element. To create small rectangle box and we can shoot that boxes and separate it like simple physics demo.

Function:

Physics Simulation Demo B: Physics Box Demo description:

This demo Idea I take from box2djs by Ando Yasushi, It is little physics simulation engine made to run in JavaScript. The physics demos which can interact with by left clicking with the mouse to add new objects in Demo. They use the popular Box2D physics library to JavaScript using

<canvas> element for the rendering. Using Box2D JavaScript, they created a flatland-sequel 2D world that obeys Newtonian physics . First figure show original demo from box2djs by Ando Yasushi & second demo I created some new or extra stuff in that original demo to make it more usable and intresting. And I also create main background window bigger than original one .

Figure 4.1 Physics Box Part 1

Figure 4.2 Physics Box Part 2

Physics Simulation Demo C: Physics Adventure Demo description:

HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed even in the gaming world! I make game using Box2D and HTML5′s canvas tag. When we play this game we have to use up & down arrow keys on keyboard to reach goal.

Function:

Step 1 - Developing the Game

HTML 5 :

In HTML 5 I use canvas element to show which id it is & how much height & width it is.

在文檔中 HTML5多媒體設計之研究 (頁 26-0)