Hi Maximum Bob, One of the features in the trunk version is that the original_painter now gives all of the event divs (tape, icon, label, highlighting) id's that include the event.id. So your js can change the divs as you describe in your email. See the top of original-painter.js for more on this.
For the main divs associated with the event, you'd just add/change their classes. For the div that contains the icon image: You could swap out the icon img elements (replace old with new) when an event is "highlighted" or unhighlighted. Alternative would be for your js to replace function Timeline.OriginalEventPainter.prototype._paintEventIcon so you could paint the icon in a different way: rather than painting an img in a div, paint the div with a non-repeat background image (the icon) controlled by css. Then you'd just have to change the class name of the icon div to change the image shown. Even better would be to use the "css sprite" technique and just move the background css property using the horizontal offset. See http://www.alistapart.com/articles/sprites/ One issue of this technnique is that Timeline currently invokes the IE 5 - specific alpha image loader software. If you no longer support IE 5 then you could ignore that. (See SimileAjax.Graphics.createTranslucentImage) Regards, Larry ________________________________ From: Maximum Bob <[email protected]> To: SIMILE Widgets <[email protected]> Sent: Wednesday, February 18, 2009 10:56:57 PM Subject: Changing Icons & Classname for Highlighted Events I've got a stylesheet class that controls the look of durations and I have a custom bullet icon for events - when an event is highlighted, I want to swap the icon with a different colored icon (lighter in color) and I'd like to change the stylesheet class for the duration events. How would I do that? Basically, I want to change the icon and classname for an event when it gets highlighted. I'm assuming that Timeline.OriginalEventPainter.prototype._createHighlightDiv function in original-painter.js is probably where the code would go... but how do I reference the icon and classname for the event that I'm highlighting? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en -~----------~----~----~----~------~----~------~--~---
