Neverside

Webcomic - Possible in HTML?

Hey guys,
just a quick question. For those whove seen webcomics you know theres a back, last, first and next button right? Well the only ones I've seen are in PHP, is it possible to put it HTML along with the java, instead of php + java?

does anyone know, help is mucho appericated =)

___________________

http://lshs.leesummit.k12.mo.us/sports/gcc/index.htm#pictures

Thats a site I did at school - yes, its crappy, I know. But click the "next" button below the picture, and ignore that the "next" and "previous" button jump. With some fine-tuning you could implement the method I used on this page to make an HTML+CSS only gallery with "next" and "previous" buttons.

Here's what I did: I made a div, lets call it #pictures, I set its height and width to the maximum height or width an image inside of it can be, and made the overflow hidden. Then in #pictures, I loaded it with all the images I wanted to show, put a named above each image, and then a set of "next" and "previous" buttons under each image.

The "next" buttons link to the next named anchor, and the "previous" buttons link to the last named anchor. Get it? Here's what the code might look like:

Code:

#pictures {
width: 500px; /* Max width an image in #pictures can be */
height: 400px; /* Max height an image in #pictures can be, all else will be "cropped" out */
overflow: hidden;
}

. . .

<div id="pictures">
<a name="a1" id="a1"></a>
<img src="picture1.jpg" alt="Picture one!" />
<a href="#a2">Next</a>

<a name="a2" id="a2"></a>
<img src="picture2.jpg" alt="Picture two!" />
<a href="#a1">Previous</a> | <a href="#a3">Next</a>

<!-- And so on... -->
</div>

There are a few problems though. When you tell Opera to set a div's overflow to hidden, that stuff stays hidden. Meaning that it won't take you to the named anchors. So when that happens I'd just bite my lip and give Opera users an overflow: auto;. Also, the positioning of the named anchors can get a little whacky.

This method obviously isn't the best, but it works if you want to stick with HTML only. I'm sure there is a better Javascript method of doing this though.

Good luck!

___________________

Portfolio - Blog | Posts: RSS
Join me in Neverside's Photography Discussion Channel: #photo