Dynamic CSS

[sijomon]

Hi (again),

I am trying to implement an Operation that will allow a user to toggle image display on or off in author mode.

We have image tags of the following form:

Code: Select all

<graphic gid="002"><caption>Image Caption</caption></graphic>

where the gid attribute is a unique id into our image library website. These images are displayed in author mode my associating the document with a framework and defining a CSS that includes the following:

Code: Select all

graphic {

    display:block;

    /*

      use the 'athenaws://' URL used to open this file, and remove everything but the host and port

      then add http:// to the front and '/imageservice/' to the end to create a http URL pointing

      at the athena image service, then append the image elements filename, and finally convert 

      the new string into a URL to display in author mode

     */

    content:url(concat('http://' replace(replace(document-url() 'athenaws://' '' true) '/.*' '', true) '/imageservice/' attr(filename) '_thumb.jpg'));

}

The net effect is to use the URL that the document was loaded from (custom athenaws:// protocol), rewritting it to create a http:// URL pointing at the correct thumbnail image file.

This works fine, but now the users want to be able to toggle image display on and off. My first thought was to dynamically remove the CSS rule from the current document.

My question is; is this approach sensible and if so can you point me in the right direction for programatically modifying the CSS rules applied to the current document, and if this is not a sensible approach, can you suggest a different one?

Many thanks,

Simon.

[sorin_ristache]

Hello,

We have image tags of the following form:

Code: Select all

<graphic gid="002"><caption>Image Caption</caption></graphic>

where the gid attribute is a unique id into our image library website. These images are displayed in author mode my associating the document with a framework and defining a CSS that includes the following:

Code: Select all

graphic {

    display:block;

    /*

      use the 'athenaws://' URL used to open this file, and remove everything but the host and port

      then add http:// to the front and '/imageservice/' to the end to create a http URL pointing

      at the athena image service, then append the image elements filename, and finally convert 

      the new string into a URL to display in author mode

     */

    content:url(concat('http://' replace(replace(document-url() 'athenaws://' '' true) '/.*' '', true) '/imageservice/' attr(filename) '_thumb.jpg'));

}

There is no filename attribute in your example of graphic element. If you use this CSS rule with graphic elements that have a filename attribute that is OK.

This works fine, but now the users want to be able to toggle image display on and off.

You have to add an alternate CSS stylesheet that has a different content property in the graphic rule, that is a property that does not display an image from your athena image service. The toolbar Author CSS Alternatives will display all the CSSs of the framework and the user can switch between the main CSS and the alternate CSS in the combo box of the toolbar Author CSS Alternatives for switching between the show image CSS and the hide image CSS. The new Author mode rendering based on the new CSS selection is instant.


Regards,
Sorin

[sijomon]

Thanks for the advice, I suppose I was too focussed on a programatic solution I missed the alertnative CSS route.