1 / 26

Image Use

Improve your website with rollovers, links using images, background images, and more. Learn about image attributes, rollover effects, JavaScript, and enhancing user experience.

kristinr
Download Presentation

Image Use

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Image Use

  2. 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?

  3. 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

  4. 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.

  5. 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}

  6. 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

  7. 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.

  8. Roll-overs <html> <head> <script type="text/javascript"> (The JavaScript goes here) </script> </head>

  9. Roll-overs • <script type="text/javascript"> • function mouseOver() { • document.getElementById("b1").src ="blue.gif"; • } • function mouseOut() { • document.getElementById("b1").src ="pink.gif"; • } • </script>

  10. Roll-overs <body> <img src="pink.gif" id="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /> </body> </html>

  11. 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:

  12. 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.

  13. 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

  14. 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" />

  15. 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

  16. 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.

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

  18. 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

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

  20. 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

  21. 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; (|)

  22. 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)

  23. 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; }

  24. 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

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

  26. What else?

More Related