Image Use

Agenda Ordinary display of image: height, width, alt Rollovers Images as links (remove blue surround) Background images: stretch, tile, xonly/yonly curved borders Typeface as gifs what else?

Displaying Images as Content Height and width are in pixels. There are about 70 pixels to the inch. If you don't specify height and width, the size is the true pixel size of the image

Displaying Images as Content The "alt" attribute is for people who can't see the image. These may be: –blind –using a browser which doesn't show images –Web crawlers Normally mousing over an image with alt text causes a tool tip to appear, containing the text.

Displaying Images as Content The xhtml can also contain attributes about the border and the alignment of images. Don't Use CSS instead: img { border-style: none}

Roll-overs A Rollover is an image which changes its appearance when you run a mouse over it. It is often used for image links It is done by having one image showing normally. When the mouse runs over it, the image is changed. Rollovers need JavaScript

Roll-overs Javascript is: A computing language which works in web pages. Not really part of this module Allows calculations, interactivity, drag-and- drop, rollovers, dynamic changes to pages without needing to refresh, stuff like that. JavaScript has NOTHING to do with Java.

Roll-overs (The JavaScript goes here)

Roll-overs function mouseOver() { document.getElementById("b1").src ="blue.gif"; } function mouseOut() { document.getElementById("b1").src ="pink.gif"; }

Roll-overs

Roll-overs One minor hiccup in the simple code I've just shown you is that the second image is only downloaded from the server when the mouseover event occurs. This may take time. The answer is to preload the image(s) when the page itself loads See next slide:

Roll-overs pic1= new Image(); pic1.src="pink.gif"; Put this code first in the section of the The name "pic1" is not significant - it just puts the image into the browser's cache for later reuse.

Roll-overs A far easier way: <img src="green.gif" alt="a rollover image" onmouseover="this.src='red.gif'" onmouseout="this.src='green.gif'" /> Note why there are two kinds of quotes

Roll-overs Preloading needn't use JavaScript at all. Below, an image is preloaded as though it is to be displayed, but CSS is used to stop it being seen:

Images as Links There are only two xhtml objects which may be used as links - text and images. Beware: people who can't see images will not understand the link. You must use a caption or an "alt" description. When you use an image as a link, you will get a blue border. Remove the border using CSS.

Images as Links </body.

Images as Links CSS: a img { border-style: none; }

Backgrounds You can set a colour as the background of a page or a div in a page. div.box3 { background-color: rgb(250,0,255); } This might be a good way of finding out where the damn thing is!

Backgrounds You can set an image as a background using the stylesheet: body { background-image: url(stars.gif); background-color: # }

Backgrounds The simple image background on the last slide will cause the image to "tile", ie repeat all over the designated area It may be better to use a background colour. Sometimes the image doesn't load or there are gaps

Backgrounds You can make the background image repeat, or not repeat, or only repeat in a certain direction: image-repeat: repeat; image-repeat: no-repeat; image-repeat: repeat-x; (-) image-repeat: repeat-y; (|)

Backgrounds Remember the problem with stylesheets, that the box is only as big as its contents? This is the problem that makes it difficult for the margin to reach the bottom of the page. Using repeat-y, you can use an image which looks like a margin and take it to the bottom of the page. (see demo)

Backgrounds div.backgrounds { width: 100%; margin: 0px 0px 0px 0px; padding: 0px; background-image: url(beige- edge.jpg); background-position: left; background-repeat: repeat-y; }

Typeface as GIFs Web pages can normally only display typefaces which exist on the client's computer. E.g.: p, a { font-size: 12pt; font-family: "times new roman", serif; }

Typeface as GIFs For example, your company trademark is in a special typeface which the public has learned to associate with your brand. What if you want a distinctive typeface? The solution is to make it into an image and use the image as your text:

What else?