How about some useful scripts to get you started? This section offers several scripts you can copy into your web pages.
Status Line Messages
This code displays the text "A study of Mozart's operas" when the user puts the cursor over the Mozart link. This is accomplished using the onMouseOver event handler. When the user puts the cursor over the Mozart link, the window.status variable, which controls the contents of the status bar, is set to the string specified in single quotes. The return true; bit is just some magic required to keep the browser from doing its normal job of writing the URL in the status bar. Without it, the user would never see your status bar message, as it would immediately be overwritten by the URL. To use this code on your site, just replace the text between the single quotes (and the URL and content, of course).
Opening a New Window
We already looked at the code for opening a new window earlier in this chapter, so we'll just take a quick look here at the code that needs to be replaced to use this script on your site. The code again:
The code in bold indicates the parts you should alter for your site. Give the new window a name, if you wish, by replacing the text composerwindow. Specify the settings for the window by changing the values of toolbar, status, scrollbars, resize, and menubar from no to yes (or vice versa). Set the width and height appropriately. Remember not to put any spaces or carriage returns in this code.
If you use the frame names toolbar and main, you can use this code as is; just change the URLs you pass to the changePages( ) function. If you change the frame names, for example, to left and right, you need to change the function as follows:
To begin, you need to make two versions of each rollover graphic: one in an "on" state and one in an "off" state. Buttons in the "on" state typically feature brighter colors, a glow, or some other visual indication of being active. You can also swap in a completely different image if that suits your purpose. The only requirement is that the graphics have exactly the same pixel dimensions, or one will be resized and distorted.
In this section, we'll look at two rollover methods. The first is a simple rollover in which passing the mouse over the graphic changes that graphic. The second example uses a single onMouseOver event handler to swap out two images at the same time.
Example creates a simple image swap when the cursor is over each image. We'll begin by listing the script in its entirety; then we'll take a look at the individual components.
(A): This line detects whether the user's browser supports the images object, which is a prerequisite for image rollovers to work. All the functions in this script are contingent on the browser recognizing the images object. If it is not recognized, the browser will not display the rollover effects.
(B): The next four lines handle the "on" graphics for the two images. The code creates an Image object for each graphic and preloads it into memory. To use this code for your own site, you simply need to change the filenames for the images (shown in bold). Don't change any of the other code, though, because the specific variables used here (img1on, img2on) are critical to the operation of this script.
(C): This section handles the "off" graphics for the two images, again by creating an Image object for each one and preloading it into memory. For your own site, just change the filenames for the images (shown in bold), but don't change any of the other code.
(D): The imgOn( ) function is what activates the rollover. When the user moves the mouse over an image, the onMouseOver event handler passes the image name to this function. The function adds the "on" suffix to the name and sources in the appropriate "on" GIF file. None of the code in this function needs to be changed for use on your own site.
(E): The imgOff( ) function returns the graphic to its "off" state. When the mouse passes back out of the image, the onMouseOut event handler sends the image name to this function, which attaches the "off" suffix and sources in the appropriate "off" graphic. Again, you don't need to change anything in this function to use rollovers on your own site.
These need to go within the anchor <a> tag. The only thing you need to change in the <a> tag is the href attribute, to point to the appropriate page for your site.
(G): This line sets up the onMouseOver event handler for this rollover. It says to call the imgOn( ) function when the mouse is over the graphic, passing the image name to that function. Nothing in this line needs to be changed to use this script for your own site.
(H): This line sets up the onMouseOut event handler for this rollover. It says to call the imgOut( ) function when the mouse leaves the area of the graphic, passing the image name to that function. Again, nothing here needs to be changed for use on your own site.
Example: uses two image rollovers. If you need more rollovers for your web page, simply follow the naming scheme for adding more "on" and "off" graphics. Note that the graphics filename does not need to be exactly the same as the image object name, as is done in this example. For example, here's the code you'd need to add in the head of the document for a third button:
Changing two images at once
Most of the code for multiple rollovers is the same as the single rollover example in above Example, but with a few additions to establish and display the additional graphic (in this case, the information graphic). Example shows the multiple rollover code; an explanation of the additions follows the script.
(A): These four lines handle the information graphics for each of the previous "on" and "off" graphics. The code creates an Image object for each graphic and preloads it into memory.
(B): The imgOn( ) function for activating the rollover now includes an additional line that changes the holder graphic to one of the informational graphics.
(C): Similarly, the imgOff( ) function now contains a line that returns the holder graphic back to its "off" state (displaying clear.gif).
(D): This <img> tag named holder is where the information graphics are displayed. It contains a graphic called clear.gif when neither button is activated.
As with the simple rollover script, to use this script for your own site, all you need to change are the graphics filename s and URLs.
Web Designing Related Interview Questions
|HTML Interview Questions||HTML 5 Interview Questions|
|Flash Interview Questions||Graphic Design Interview Questions|
|Illustrator Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||Dreamweaver CS3 Interview Questions|
|CSS Advanced Interview Questions||Web Developer Guide Interview Questions|
|Log Shipping Interview Questions||Spring Boot Interview Questions|
|UI Designer Interview Questions||Bootstrap 4 Interview Questions|
Web Designing Related Practice Tests
|HTML Practice Tests||HTML 5 Practice Tests|
|Flash Practice Tests||Graphic Design Practice Tests|
|Illustrator Practice Tests||Dreamweaver Practice Tests|
|UI Developer Practice Tests||Dreamweaver CS3 Practice Tests|
|Web Developer Guide Practice Tests||Advanced jQuery Practice Tests|
Web Designing Tutorial
Designing For A Variety Of Browsers
Designing For A Variety Of Displays
Web Design Principles For Print Designers
A Beginners Guide To The Server
Printing From The Web
Structural Html Tags
Adding Images And Other Page Elements
Specifying Color In Html
Cascading Style Sheets
Server Side Includes
Designing Graphics With The Web Palette
Audio On The Web
Video On The Web
Flash And Shockwave
Introduction To Smil
Introduction To Dhtml
Introduction To Xml
Wap And Wml
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.