Web site special effects can help make your site stand out from other sites, entertain visitors and draw attention to specific parts of the page. Discover how to use custom cursors, scroll text and make an image on your site blink. Incorporate these methods into your next site redesign to instantly attract attention and engage your readers in new ways.
Instructions
How to Use Custom Cursors
How to Create Scrolling Text
Instructions
How to Use Custom Cursors
- Log in to your web host using your Internet browser or an FTP program such as Cyberduck (for Macs) or WinFTP (for Windows PCs). Create a new folder on your main hosting drive. Name the folder "cursor."
- Download a custom cursor (see Resources). Rename the file "custom.cur" and upload it to the "cursor" folder on your web host directory.
- Use a standard text editor and open the web page file on which you want to use the custom cursor. Type the following code after the <body> tag if you wish to use the custom cursor on the entire page: <body style="cursor: url('cursor/custom.cur')">. Alternatively, type the following code before a specific paragraph if you wish to use the cursor in only one section of your page: <p style="cursor: url('cursor/custom.cur')">.
- Save the edited page file onto your web hosting drive. Launch your browser and navigate to your site. Your computer's cursor changed to your custom cursor.
How to Create Scrolling Text
- Open the web page in your text editor.
- Type the following code where you wish to see text scrolling: <marquee direction="right">YOURTEXT</marquee>. Edit "YOURTEXT" to the words you want to scroll. Change the direction to "left," "right," "up" or "down" to adjust the direction in which the text scrolls.
- Save the file to your web hosting directory.
- Launch your web browser and navigate to the page you just edited. You now see a little box with scrolling text. This is an eye-catching way to draw attention to an announcement or warning.
- Open the web page in a text editor.
- Type the following code after the <head> tag in your HTML: <script type="text/javascript">function changeImg(){document.getElementById("imgId").src = (document.getElementById("imgId").src.indexOf("PIC1.gif") == -1)?"PIC1.gif":"nopic.gif";}window.onload = function(){var xTimer = window.setInterval("changeImg()",2000);}</script>
- Change "PIC1.gif" to the name of the image in your web page that you want to blink. Save the file to your web hosting directory.
- Launch your browser and view your page. Your image now blinks.
No comments:
Post a Comment