PDA

View Full Version : Combining moving text, rollovers and other clever little flashy tricks - help needed!



Naomi
Nov 7th, 2005, 01:13 PM
Hi,

I'm an English student, and as such my forays into the world of coding have been limited - I can write HTML and have used a little basic javascript to make rollovers etc, but nothing complicated. Thus, when I had the bright idea of writing a sort of 'cyberpoem' for one of my English assignments, I realised I would need to seek expert help! I asked around and have been told that it could be done in javascript, but I have no idea how to go about it.

Here's the concept:
The screen is blank, except for a single phrase in the centre. For the purpose of example, let's say that this phrase reads, "All the colours of the rainbow". When the pointer is moved over the text, a number of words appear (for example, "red", "yellow", "blue" etc), drifting randomly around the screen. If the user clicks on the phrase "All the colours of the rainbow", all the other words freeze in their movement, and each one is found to be a hyperlink that can be clicked to lead to another page, containing another phrase and more floating words.

Yes, it sounds like a pretty crazy and pointless design for a website, but crazy and pointless is what defines an English course in experimental writing. If it isn't an impossible idea, could anyone give me an idea as to how to go about coding it?

Thanks a lot, and sorry for the randomness of the idea!

-Naomi

Pyth007
Nov 7th, 2005, 05:56 PM
1) Make your randomly floating words as links using <a>s, with the href property pointing to the next page
2) Have those randomly floating word-links in separate <div>s that have the style position: absolute; Also make disply:none; to start. Think of <div>s as rectangles containing the words.
3) Randomly create the position of the <div>s onMouseover of the centered text and make display:block; Position style attributes are top and left which define the top-left corner of the <div>
4) Randomly alter the position of the top and left attributes on some type of a timer system. Use either setTimeout or setInterval methods to accomplish the timer operations.
5) For the center text's onClick, use clearTimeout to stop the "random-moving" function from running on the timer (and as a result, this will stop the words from moving)

Note: as described, a person could click the words while they are moving... If you wanted to prevent that from happening, either:
1) Don't do step #1 above until step #5, where to change each word into a link.
OR
2) (and I like this better, since it gives that crazy artistic feel) have each word-link div "jump" to a new, random position when their onMouseover is triggered...

Not sure how much JS / HTML you know, and this is a rather large project to tackle just now... Hope this gives a starting point for you... ask other qestions if you need more help.

Naomi
Nov 7th, 2005, 09:08 PM
Hi again,

Thanks very much for the response. I'm afraid I really am a newbie at this; I know I need a script contained within <script></script> tags, but I don't know what this script ought to be. I've created by <div>s as you said, and they are as follows:
<div id="red" style="position:absolute; display:none">red</div>

All I've really done with javascript in the past is rollover graphics, and they worked without a <script>, but I'm aware that I need one for this. Sorry for my ignorance!

Naomi