| . |
I'll say this bluntly: I suck at javascript. Despite how much time I've put into teaching myself HTML, I've never quite gotten up enough patience or interest to truly teach myself javascript. I suppose I'll force myself eventually, since I'd like to make some better games, but...
Usually if I absolutely needed to use javascript, I'd find a script in some public domain library and carefully alter it to fit my needs. That's exactly what I did for my comic's viewer. I took an image-flip script from htmlgoodies.com and made a couple of changes to it. First, I changed the link to an internal link separate from the main image (Most image-flip links are meant to change the look of the image within the link, not another picture on the page). Then I changed the script's activation from an OnMouseOver to an OnClick command.
So now, when you clicked an internal link from panel one of a strip, it would both send you to panel two, and simultaneously start up the animated gif within that panel. Surprise, surprise, here's another example: Click here!
|
|
Next Panel
|
Here's the code for the example. This part is in the "head" of the document:
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from non-javascript browsers
function SwapOut() {
document.imageflip.src = "spacer.gif"
document.buffer.src = "spacer.gif"
document.imageflip.src = "raddrock.gif"
document.buffer.src = "raddrock.gif"
}
// - stop hiding -->
</SCRIPT>
And this part is the actual tables, with the internal link that "swaps" the second table's image:
<img width="1" height="1" src="raddrock.gif" name="buffer">
<center>
<table cellspacing="6" cellpadding="6" border="0">
<tr><td width="200" height="100" bgcolor="yellow" valign="middle">
<a name="p1">
<center><img width="63" height="96" src="raddstare.gif"></center>
</td></tr>
<tr><td width="200" height="30" bgcolor="cyan" valign="middle">
<center><a href=#p2 onClick="SwapOut()">Click here!</a></center>
</td></tr></table>
<p><br>
<table cellspacing="6" cellpadding="6" border="0">
<tr><td width="200" height="100" bgcolor="yellow" valign="middle">
<a name="p2">
<center><img name="imageflip" width="63" height="96" src="raddstare.gif"></center>
</td></tr>
<tr><td width="200" height="30" bgcolor="cyan" valign="middle">
<center>Next Panel</center>
</td></tr></table>
</center>
I also usually hide the unseen image (Radd's air guitar, in this case) somewhere in the document, which you can do by making it 1x1 in size. This should be unnecessary, as the above javascript should preload the image, but on some browsers it doesn't seem to work that way. Anyhow, chalk it up to superstition, but a hidden image certainly won't hurt, consider it insurance so that when the reader clicks the link the animation will appear right away.
Edit from Hennuy Guillaume(mars 2011): The code depicted on this page is the new code I used when reworking the code to make Kidradd fully readable again on modern browsers. The old code formerly showed on this page isn't used anymore and thus, isn't depicted here. The javascript and "hidden image" preload had to be given up as MS Internet Explorer simply didn't want to restart the animated gif as long as a single one of the same was still present on the page and, for some reason, also made the animation messy on Firefox.
So instead I used a javascript code that basically remove completly the gif then put it back immediattelly, so it would restart again on IE, and work normally on FF. Here I also used a an hidden image that I named "buffer", as a way to allow the gif to be loaded. as it goes through the sam swapping process than the "official" image holder at the same time, the animation can still restart.
Tough I actually almost never used the "buffer" methode, as in most of the comics, the animation started as soon as you changed of table (as explained on the previous page, I simply put the animated gif on its primary intended emplacement, as it would remain unseen until reaching its level and restarting it anyway. In the end, the "buffer" methode was only used for the Extras, who all only had one table, thus making it impossible to feature the gif to load on its intended place.
Moreover, in the present example, it doesn't matter and the old code would still work fine on this page, but that's only because it's a looping gif that is used. But for non looping gif (wich are the one forwhich the javascript is needed, the change was nescessarry.
Again, I apologize to all the true HTML gurus out there who can write more efficient codes, and oppositely apologize to anyone that I'm just confusing. I again recommend HTML Goodies for tutorials on tables, frames, javascript, you name it, that site got me to this point.
edit from Hennuy Guillaume(mars 2011): I also apologize, I know my knew code is in no way W3C compliant, but I had to trickle with the code alot before finding one that would actually work and reworking the whole Kid Radd comic was no easy task. I also apologize for my shoggy English, I hope I have not been too confusing in my little commentaries.
Click here for the conclusion:
| |
| | . | ... |
