| . |
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:
|
|
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
Image1= new Image(63,96)
Image1.src = "raddrock.gif"
function SwapOut() {
document.imageflip.src = Image1.src;
}
// - stop hiding -->
</SCRIPT>
And this part is the actual tables, with the internal link that "swaps" the second table's image:
<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.
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.
Click here for the conclusion:
| |
| | . | ... |
