Yesterday was my wife's birthday, and I thought this year I could surprise her by sending her some funny e-cards on her Google Reader, through my blog post, which she ofcourse subscribes to. The cards could appear amongst other posts like a piece of sun dried tomato in a Greek sandwich. Hey, it must be lunch time!
Back from lunch! OK, so back to the post ...
So it should have been easy, right? Choose the cards, embed them in the blog post and submit! Not so fast cowboy! Let me tell you why. Here were my objectives:
- I had multiple flash cards and did not want them to auto-play on page load
- I wanted to show a preview of each card
- When clicked, the preview image should convert into a flash object and auto play
The first step was to choose some nice cards, googled 'flash birthday cards' and reached care2.
So here's the pseudo code ...
div
{
img onclick="PlayCard(...);"
a onclick="PlayCard(...);"
}
When either the image or anchor tag is clicked (onClick event), a call to a javascript method PlayCard is made. At this point, PlayCard replaces the innerHtml of the <div> tag in play here with the actual <embed> code. Simple JavaScript stuff!
Here are the parameters that need to be passed in to the PlayCard method ...- divId: Id of the div in play
- swfUrl: URL of the SWF (flash) file that will be played
- width: Flash object width
- height: Flash object height
- bgcolor: Backgrouond color
Download (787 bytes CardPlayer.js)
Technorati Tags: javascript
0 comments:
Post a Comment