image use. agenda ordinary display of image: height, width, alt rollovers images as links (remove...
TRANSCRIPT
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
<img src="giraffe.jpg" height="320" width="240" alt="A giraffe at the zoo">
• 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
<html><head><script type="text/javascript">
(The JavaScript goes here)
</script></head>
Roll-overs
• <script type="text/javascript">• function mouseOver() {• document.getElementById("b1").src ="blue.gif";
• }• function mouseOut() {• document.getElementById("b1").src ="pink.gif";
• }• </script>
Roll-overs
<body>
<img src="pink.gif" id="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" />
</body>
</html>
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 <script> section of the <head>
• 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:
<img src="red.gif" style="display:none" />
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>
<a href="contact_us.htm">
<img src="smile.gif" width="100" height="100" alt="A link to the contact page">
</a>
</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: #000000}
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?