RootsWeb Mailing List Archives

RootsWeb.com Mailing Lists

Home

Results for list 'freepages-help'

Sender

Subject

Content

Total: 2/2

1. Re: [FreeHelp] Server Side Includes - Image Mapping & Browser Detection
2. Lorrie Laskey
3. Barry, I would like to know: * clarification regarding how one image with five images can be separated? * are you putting this code with an include? * in the head? * where the final css values end up being served Lorrie On 02/07/11 22:58, Barry Carlson wrote: > Here is a little Server Side Includes (SSI) script that I developed for > another project I'm working on. > >  >  >  >  >  >  >  >  >  >  >  >  >  >  >  > > Essentially the script is detecting the browser and creating some image > positioning to display the logo associated with the browser. If you look at > the source code of the page, you'd have little idea about what was going on, > except that I have displayed the background-image positioning data in the > top lefthand corner of the page. > > Independant of what operating system you are using, e.g. Linux, Windows or > Mac, your browser will let the server know its User Agent code (string), and > that information is being used to position one logo from an image containing > 5 logos of the major browsers. Should the browser you are using not be > either Internet Explorer, Chrome, Firefox, Opera, Mac or Safari, you will > probably be left with just a blank page. > > http://freepages.computers.rootsweb.ancestry.com/~bristowe/xhr/ssi-test.html > > Should anyone be interested in how the script or the image mapping works, > just ask on the list. > > Barry > > > ------------------------------- > To unsubscribe from the list, please send an email to FREEPAGES-HELP-request@rootsweb.com with the word 'unsubscribe' without the quotes in the subject and the body of the message >
02/08/2011 12:46:54
1. Re: [FreeHelp] Server Side Includes - Image Mapping & BrowserDetection
2. Barry Carlson
3. On Wednesday, February 09, 2011 2:46 AM (UTC+13) Lorrie wrote:- > I would like to know: > > * clarification regarding how one image with five images can be > separated? > * are you putting this code with an include? > * in the head? > * where the final css values end up being served ----------------------------- Lorrie, The image being used is at:- <http://freepages.computers.rootsweb.com/~bristowe/xhr/images/browser_logos-128.png> It is 705px x 132px and is being used as a background within a 132px x 132px div. You should be able to see a #aaa border round the div. As all 5 logos are in the image, it is just a matter of positioning the appropriate one to be in view - browser dependant. The Includes are located in the head before the styles. Position data is being echoed into the styles, e.g. background: url('images/browser_logos-128.png') no-repeat ; - and the required logo will be placed in view. The page has been updated with the addition of a few more tags (they do nothing, but I've been getting lazy with HTML5!) The "else" condition has been used to move the image out of view if none of the major browsers are detected. http://freepages.computers.rootsweb.ancestry.com/~bristowe/xhr/ssi-test.html So that it is obvious to all, I'll copy the source code below:- <!doctype html> <html> <head> <meta charset=utf-8> <title>SSI Test UA</title>                 <style> body { background:#ac9; } #logo { margin:150px auto; width:132px; height:132px; border:solid 1px #aaa; background: url('images/browser_logos-128.png') no-repeat ; } #fp_ftr { position:absolute; bottom:0; } </style> </head> <body> <p></p> <div id="logo"></div> </body> </html> As the image is .png, its background will not be transparent in IE6 and earlier. A .gif image could be provided. Barry
02/09/2011 01:42:45