[Web4lib] need some free design advice

[Walker, David]

Rather than use Javascript to change the stylesheet, you can use it to directly change the background image of the layer itself.  

Assuming the random image number and array that Graeme had, just replace the last three lines with this:

   document.getElementById('yourLayer').style.background = 'url(' + imgs[r] + ')';

. . . where 'yourLayer' is the name of your layer.  Simpler, and has the advantage of working on all browsers.

--Dave

==================
David Walker
Library Web Services Manager
California State University
http://xerxes.calstate.edu
________________________________________
From: web4lib-bounces at webjunction.org [web4lib-bounces at webjunction.org] On Behalf Of Graeme Williams [carryonwilliams at gmail.com]
Sent: Wednesday, September 30, 2009 5:02 PM
To: web4lib
Subject: Re: [Web4lib] need some free design advice

Sharon,

It *is* possible to edit the style sheet from Javascript, although the code
appears to be browser dependent.

As an example, the following will display a randomly-chosen picture each
time the page is refreshed:

r = Math.floor(Math.random()*4) ; // 0-3
imgs = new Array("images/chess-565x228-text.jpg",
                 "images/library-night-cropped-whiteedge.jpg",
                 "images/opera-565x228-text.jpg",
                 "images/homegrown2009.jpg") ;
 cssRule = "td.main-photo-cell { background-image: url(" + imgs[r] + ") }" ;
 x = document.styleSheets[0] ;
 x.insertRule(cssRule, x.cssRules.length) ;

This (lightly-tested) code only works in Firefox.  To put this into
production, you'd need to add code to detect the user's browser, and add the
code for IE.  IE uses addRule instead of insertRule, and the arguments are
different.

This isn't a full-blown slide show, and no doubt the best long-term approach
is to redo the whole page, but if this approach is sufficient for your
short-term needs and you'd like help with the next steps, let me know.

Graeme Williams
Waltham, MA

On Wed, Sep 30, 2009 at 4:39 PM, Sharon Foster <fostersm1 at gmail.com> wrote:

> Dear Collective Brain,
>
> Here's my library's website:
>
> http://www.ryepubliclibrary.org/
>
> The first large image (it may not be for the art reception by the time
> you see it) was implemented (not by me) as the background image for
> the div titled main-photo-cell. It's defined in the style sheet so
> can't be changed on the fly. The lower left quadrant of the town seal
> is painted over it. I would like to convert from having the image in
> the background to having it in the foreground so that I can make a
> slideshow. I could *try* to incorporate the seal into every promo I
> make, or I could move the seal, or eliminate it from the front page,
> or narrow the image area and fill in the empty space with _?_.
>
> What would you do if you were me?
>
> Thanks,
> Sharon
>
> Sharon M. Foster, JD, MLS
> Technology Librarian
> http://firstgentrekkie.blogspot.com/
> "Have you tried switching it off and on again?"
>
>
> _______________________________________________
> Web4lib mailing list
> Web4lib at webjunction.org
> http://lists.webjunction.org/web4lib/
>
>
_______________________________________________
Web4lib mailing list
Web4lib at webjunction.org
http://lists.webjunction.org/web4lib/