h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

Argh! What's with the moving fish!?!? How'd you do that???

*giggles*

Aren't they funky?

Glad you like it! Or are at least mildly bewildered by it ..

Here's how: http://www.bbc.co.uk/dna/h2g2/plain/TestUserPage205830

My word! Do you *never* put spaces in between the block of code?? I put loads in, and mine's simple!

http://www.bbc.co.uk/dna/h2g2/plain/testuserpage188069

I did have some spaces and other miscellaneous whitespace in, but I took them out just in case..

Whitespace isn't spaces. Don't know what it is For some reason, I only get whitespace error messages inside words, not in between.

Both bewildered and fascinated...
omg, I don't understand a word of that, I'm in way over my head.
Yes, the fact that there is no space between each thing IS SERIOUSLY confusing!! If there wasn't, I might be able to work it out...

The basic idea of it I got from Pastey (U45177), which is to use an HTML style sheet to position stuff anywhere on the page.

So to put a fish in the top left corner of the page you could do:





The style sheet is what is specified in the 'style' attribute on the 'p' tag. The 'position:absolute' means that the position of the item isn't decided by the browser relative to other items on the page, but will be specified exactly. This is what 'left:0; top:0' does - indicating that this paragraph is to be drawn at position (0,0), the top left corner of the page. The 'img' tag just displays the image of a fish.

In order to get the fish swimming across the page, I used marquee tags surrounding the images. For example this is one of the fishes swimming from left to right:







The marquee starts -40 pixels to the left of the top left corner (off the page, in fact) and 6 pixels down from the top, and is 20% bigger than the width of the page. The fish scrolls right by 5 pixels each time. And the 'filter:alpha' bits just add a bit of transparency to the fish so they fade into the background.

The swimming shrimp thing, which you can't see in brunel but can on all the others (looks really clear in plain and alabaster), was a bit more difficult. It is a combination of several marquees inside each other moving it left and right, up and down at different speeds.

The biggest problem with this was that when adding it to the page, it appeared on top of all the other items on the page, so nothing could be clicked on because the marquee got in the way. The solution to that was to use the 'z-index' style to indicate which layer it is on. The shrimp marquee is styled with a z-index of -1, which puts it below everything else on the page that is at a default of z-index:0.

The code for the shrimp is at the bottom of the page. I used tables instead of paragraphs for this in an attempt to stretch it to the full length and width of the page, but it didn't really have the desired affect. I'm going to change the shrimp a bit sometime 'cos it's a bit messy.

Anyway that's pretty much how it's done. Hopefully it made some sense and I didn't ramble on too much!

Huh?

!

*in a Manuel from Fawlty Towers style*
Que?


Don't worry I'm not html literate so I didn't understand most of it. The explaination helped though. I don't think I'll use it on my page anyway.

Ooh, I just dropped by to congratulate you on a marvellous homepage. Reminds me of the good old pre-BBC days when someone (can't remember who ) had a whole host of balloons floating upwards over the top of their page.
It's good to see such things can still be done.

...and what do I find but a nice clear outline of how it is done also - with all due respect to the previous two poster

Have a piece of



Orcus

...and I might even nick a bit of code for mine if you don't mind

Thanks! Glad you like it.

By the way, we appear to be in the same university ..

Another one?

Which department?

OK, question. I have my floating ampersand bouncing about my homepage but now I appear to have half the text and some blobs disappearing off the right hand side of the page
How can I fix this problem?

Maths department, I'm doing final year maths + CS ..

Hmm I dunno .. maybe the ampersand marquee thing is too wide and so it's pushing the right hand side of your page off the edge of the browser? You seem to have taken it off anyway, so ..