Images in HTML Images in the foreground –src loaded separately; relative to home directory –Width & height set aside space in page; do not use this to reduce images! –Alt for web readers Images in the background –Background-image –Background-repeat –Background-position

Image Maps Indicate a map for the image Define the map, with areas for links

Image Sprites Putting multiple images in 1 file reduces download times Create links Use CSS to show 1 at a time #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px; #home{background:url('img_navsprites_hover.gif') 0 0;} #home a:hover{background: url('img_navsprites_hover.gif') px;}

Image Slideshow with CSS Put all your images in a single image Show animation in a div with no overflow #slideshow { overflow: hidden; } Put a div in that, where background is animated #slideshow div { background: url("myshow.jpg") 0 0; height: 200px; width: 1000px; position:absolute; top:0; left:0; animation: myslideshow 60s linear infinite; -webkit-animation: myslideshow 60s linear infinite; -moz-animation: myslideshow 60s linear infinite; }

CSS Slideshow (con't) Define animations –animation-name –animation-duration –animation-timing-function Define myslideshow { 0% {left: 0px;} 100% {left: 200%;} myslideshow { 0% {left: 0px;} 100% {left: 200%;} }

Image Slideshow with jQuery The animate method changes a selector's styles over time (selector).animate({styles},speed,easing,callback) –Property names are "camel-cased" –Speed in milliseconds (400 default) –Easing: swing (default) vs. linear –Callback is executed after animation completes The fade method allows a selector to fade in or out over a specified timeframe (selector).fadeIn(speed,callback) (selector).fadeOut(speed,callback)