|
|
Mouseover EffectsYour pages can become more interactive by using scripts that activate as your visitors move the mouse around the page. It takes a simple script and some extra HTML, but the effects are worth it! Let's get interactive!
Image RolloverYou see this script on this page, when you pass the mouse over the smoking skull image. The eyes open and move side to side. To accomplish this, we need to load the images in the head of the document, then use the script in the link. This example shows only one image, but the image list can contain as many images as you want (within reason, of course) perhaps a 4-5 button menu with 2 images for each button is very common. You would add them to your list in the HEAD of your page, then use the OnMouseover/onMouseout code in your links.Trick: On this page, the skull does not link to anywhere, but for the image rollover to work, the anchor reference cannot be blank. Use <a href="#"> to name the location. Download Image Rollover Script View Image Rollover Script (Textfile)
Staus Bar MessagesBy adding a phrase to the link information, you can display a text message in the status bar when the mouse is over a link, rather than the actual URL address (http...). The links on most of my pages use this technique. I think it gives a more professional look to your pages and allows you to give more information about the linked item. Here is the code of a normal link:< a href = "index.html" > Index < /a > Here is a staus bar message for the same link: < a href = "index.html" onMouseOver = " self.status = 'My Main Index Page'; return true" onMouseOut = " self.status = ' '; return true" > Index < /a > Two things to be aware of are the onmouseout status 2 single quote marks (') clear the status bar when the mouse moves off the link, and use single quote marks (') around the actual message to be displayed in the status bar area.
Additional Information and a Special NoteGet information about my Toggle Menu System, or see my Tech Eclectic pages for info on javascripted interactive roll-down/roll-up menuing system, popup messages, and more for your website.If you have any questions about using these scripts, just click on the email button below, ask your question, and I'll reply as soon as possible (usually 1-2 days). NOTE: You cannot use any of the script from the crypt if you cannot view, edit, and save the ACTUAL HTML CODE of your webpage. This means, if you use any of the AUTOMATIC PAGE BUILDER PROGRAMS, you will need to use an ADVANCED EDITOR on-line (if one is available from your webhost), or use a text editor (notepad.exe) to add the changes, then FTP (upload) the page to your site server. [ I love the hands-on, close-to-the-code approach to webpage building! ]
|
|
||||||||
| B e s t V i e w e d a t 8 0 0 x 6 0 0 / H i - C o l o r | ||||||||
