[Web4lib] need some free design advice

Sharon Foster fostersm1 at gmail.com
Wed Sep 30 20:28:16 EDT 2009


Thank you, Graeme! I did think about having one style sheet for each
image and randomly selecting one when the page loads, but this is much
cooler. And, you may have noticed, the page has issues in IE even now.
I'm pretty sure that wasn't caused by anything I touched, but I didn't
save a copy of the old page so I could compare.





On Wed, Sep 30, 2009 at 8:02 PM, Graeme Williams
<carryonwilliams at gmail.com> wrote:
> 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/
>>
>
>




More information about the Web4lib mailing list