CSS Changer

Please select a style which you would like to apply this page. [selector][markers]

loading...

Style Sheets can provide various "appearance" for an html document.

Alternative style sheets provide switchable styles for you. Some browsers, such as Firefox and Opera support switching style feature.

Style Sheet Changer will provide same functionality as alternative style sheets for Safari and Internet Explorer for Windows as well.

Selected style could be recorded as cookie. Previewing style with small image is also supported.

• Supported browsers
  • Firefox 1.5 or later
  • Safari 2.*
  • Internet Explorer 6.* for Windows
  • Opera 9.*

Sometimes reloading is required to display swicthed style correctly (especially on Safari).

1. Download the archive. The archive contains the following scripts:
   • css_changer.js : main script
   • spica.js : core library
2. Include spica.js and css_changer.js in header. Please make sure "spica.js" first.

   <script type="text/javascript" src="spica.js"></script>
   <script type="text/javascript" src="css_changer.js"></script>

3. Include style sheets in header.

   <link rel="stylesheet" 
   	id="css_def" 
   	title="default" 
   	type="text/css" 
   	href="def.css" 
   	media="screen,tv" />
   <link rel="alternate stylesheet" 
   	id="css_alt" 
   	title="alternate" 
   	type="text/css" 
   	href="alt.css" 
   	media="screen,tv" />

   • "rel" attribute indicates default style (set as "stylesheet") or alternative style (set as "alternate stylesheet").
   • "id" attribute indicates style id which is used for marker and thumbnail images.
   • "title" attribute indicates the title of style. This should be defined.
   • "href" attribute indicates url of style. This must be defined.
   • "media" attribute indicates applied media type of style.

By default, style sheet changer will be apeared at the end of body as <div id="stylechanger"> (if there is no object which has stylechanger as id in the page). The setting of changer can be modified if you want. There is the setting at the end of css_changer.js as follows:

var StyleChanger = new StyleChanger({
  select : true,               // enabling selector
  dir    : './',               // image directory
  imag   : '.jpg',             // thumbnail suffix
  marker : '_marker.gif',      // marker suffix
  offset : 20,                 // offset for popup
  target : 'stylechanger',     // target id for changer
  sel_id : 'changer-selector', // selector id
  popup  : 'changer-popup',    // popup id
  mark   : '\u25A0'            // marker's symbol if it's required
});

• "select" is a flag which selector or markers changer uses. If it's set as "true", selector will be shown as changer, otherwise markers will be shown as changer.
• "dir", "imag", "marker", "offset", and "mark" are settings for markers.
  • "dir" indicates the directory url which contains marker and thumbnail images.
  • "imag" indicates thumbnail suffix. Thumbnail image name will be "id + this suffix" (ids are indicated in <link> elements).
  • "marker" indicates marker suffix. Marker image name will be "id + this suffix" (ids are indicated in <link> elements).
  • "offset" indicates offset position of popup.
  • "mark" indicates the marker's symbol. You can use this character instead of image for each marker. It will be enabled if "marker" is set as null.
• "target" indicates the target element's id which will contain the changer. If the specified element does not exist, it will be generated by the script.
• "sel_id" indicates changer id. If you enable "select", this id will apply selector itself. If you use markers instead of selector, this id works as prefix for each marker.
• "popup" indicates id of popup box which will display tumbnail image.

Download the latest version [ver 0.01]

2006/09/06

[ver 0.01] changed the script to store cookie correctly

2006/08/11

[ver 0.00] the first release