   |
Titanic History Tuesday, October 22, 2024 |
| 1886 - 1st class survivor Mr George Achilles Harder was born to Victor Achilles Harder and Minnie Mehl Harder in New York City, New York, USA.
1974 - 2nd class survivor Mrs Antonine Marie Mallet died in Paris, France at the age of 86. 1888 - 3rd class passenger Mr Nils Martin Ödahl was born to Ola Öhdal and Hanna Nilsson. 1887 - 3rd class passenger Mr René Aimé Lievens was born in Heldergem, Belgium. 1926 - Able Seaman and survivor Mr William Henry Lionel Weller died in a shipwreck at the age of 44. |
| Shop at Cafepress |
 |
 |
 |
| more Titanic designs |
MouseOver Buttons
|
The last few articles in this column have involved Photoshop, so I wanted to open your eyes wider in the world of coding. On the Back to Titanic website, we feature a left navigation menu, which includes buttons that convex and concave depending on whether the cursor hovers over the button. This is what's called a mouseOver in JavaScript. Download this template: http://www.back-to-titanic.com/waves/copal/dec00_template.html Open a simple text program (Notepad, Wordpad, or equivalent). Go to "File | Open" and select the template. What you will see is HTML code for a single mouseOver button. Let's break down what this all means. First you are declaring that you are going to be using HTML. The next tag is the beginning of the head of the page. Then the title of the page (what appears at the top of the window when the page is viewed), and then it is declared that script will be used. Everything from 'script language="javascript1.2"' to '/script' is JavaScript. Using /* within JavaScript hides the text unless it's being viewed just as code (similarly to HTML's cloaking techniques). This text is to give credit to the originator of this script. Next you want to explain which images you want to show up. You are declaring that img1 is going to be an image (new Image meaning it has not been loaded previously). Then img1.src is for img1's source or URL. This is the image that appears when the mouse is elsewhere on the page. Do similarly for img2, which is the image for when the cursor is over the button. The script ends there and basic tags of beginning the body of the page and what the background color should be. The A tag appears to indicate where the hyperlink begins. HREF is for hyperlink reference, or the URL of the link. This is standard, but now you need to direct the Javascript when to show one image or the other. The event onMouseOut is the opposite of onMouseOver. After this begins the img tag, which needs a source (src), which should be the image onMouseOut (the cursor is not over the image). There is an end tag to the A tag, and a few line breaks. Then you are declaring that the body is over and so is the HTML coding. Keep the following in mind as you customize it to your own page: - Anything in caps can be changed. - "NAME" should be the same word every time, but it doesn't have to be the file name. It can be anything. - "FILENAME(OFF)" should be the image that you want to be there when the mouse is off the image; therefore "FILENAME(ON)" is self-explanatory. - If you don't want an alt tag just use ALT="" instead of ALT="THE FILE". - Be certain the codes go before or after the tags shown here. To make multiple mouseOver buttons, copy these sections: img1=new Image() img1.src="FILENAME(OFF).gif" img2=new Image() img2.src="FILENAME(ON).gif" Remember to leave a full line between each group to keep track. You will need to change the img numbers (img1 and img2 to img3 and img4). Also copy this code: <a href="INDEX.html" onMouseOut="document.images['NAME'].src=img1.src" onMouseOver="document.images['NAME'].src=img2.src"><img src="FILENAME(OFF).gif" name="NAME" border=0 width=50 height=50 ALIGN=CENTER ALT="THE FILE"> You will need to change the img numbers again to reflect the matching numbers you made above. The NAME for the first button should not be the same as the previous button. It can be anything you choose. Sometimes all of this can seem overwhelming. Anything complex and new can be difficult to learn at first. Of course, you have to work to know how to make excellent websites. For more scripts like this visit: http://www.dynamicdrive.com http://www.jsworld.com |
Making Waves
corey's interviews
history with kelly
copal's queue
site of the month
the flub report
wallpapers/quotes
graphic sets
characters
scenes
downloads
rare pictures
facts
books
columns
Copal's Queue
introduction
thumbnails
seamless bg
frames
webrings
yahoo
graphics pop
graphics pop ii
loading
diamond bg
striped bg
text
transparent gifs
seamless frames
guides
transforming
mouseovers
tables
cleaning up
flyout window
image maps
programs i love
actions
cropping
history with kelly
copal's queue
site of the month
the flub report
wallpapers/quotes
graphic sets
characters
scenes
downloads
rare pictures
facts
books
columns
Copal's Queue
introduction
thumbnails
seamless bg
frames
webrings
yahoo
graphics pop
graphics pop ii
loading
diamond bg
striped bg
text
transparent gifs
seamless frames
guides
transforming
mouseovers
tables
cleaning up
flyout window
image maps
programs i love
actions
cropping
get this countdown
for your website
for your website
random quote:
about back-to-titanic.com | contact us