Writing to a different frame:

The combination of frames and javascript on the same page helps to develop some interesting
webpage. Developing a site with lines in one frame and output in another provides easy movement through
complex data.
One popular use of frames and javascript is a color picker. The simple color picker has two frames,
the upper one contains a form which is used for data gathering and the lower one shows the results.
By combining the frames and javascript we can develop a site by providing links in one frame and
output in another frame of the same page which provides an easy movement through complex data. This is
a formed method to use static html pages for a task like this, but combining html and javascript forms a
color picker which has two frames.
The upper frame contains a form which is used for data gathering and the lower frame shows the
result of the color solutions. As the upper frames data color changes the lower frames text also changes
according to the color values of the upper frame.
Rollover Button:
Rollover buttons are buttons which change their look when the user places the mouse pointer over
the button. This technique is used to give visible feedback about the location of the mouse cursor by
changing the images on the page as the mouse over them. This is highly effective technique especially
where images are used as the hyperlinks in a menu.
Rollover buttons has three states normal, over and down states which applies to the button when
we click on the button. Unlike static web buttons, rollover buttons are dynamic in nature allowing us to
change the color or style of the button with the move of the mouse.
Rollover buttons come in different shapes, sizes, colors and styles. Although most rollover buttons
are rectangular in shape, they can be customized to the shape of a circle, star or polygon. Since images can
be converted to rollover buttons, a rollover button can also contains images. A rollover button can be
raised, sunken, flat or animated when a user clicks on it.
Benefits:
Rollover buttons extend the normal functionality of a button. They are not only attractive but are
also dynamic, letting a user know they are clickable. Rollover buttons allow the designer to add sound
effects to them as someone roll on, off or over them. Rollover buttons can be created with image editing
software like Adobe Photoshop, image ready etc. Program
Moving Images:
We can have moving images around the screen to provide a new look up to the webpage. Dynamic
HTML provides a new range of ways to animate a page. DHTML can animate both text and images and
animations can move throughout the browser window instead of being placed in one spot.
The following example flies a logo form the left of screen five times before positioning it in the
center of the screen.
The HTML code creates a division of the page named logo and positioned at pixel 5, 1000 the layer
must be positioned absolutely so that the browser doesn’t mess up the look of the page and must be visible.
The content of the division is an image.
<div id=”logo” style=”top:5;z-index:4;left:1000; visibility:visible;position:absolute;”>
<img scr=”/title.jpg”>
</div>
~1~
 Then for the moving of the images we can use the following code
Var count=0;
function FlyLogo()
{
if(count<5)
{
if(document.layers[“logo”].left==200)
{
count++;
document.layers[“logo”].left=1000;
}
document.layers[“logo”].left=10;
setTimeout(‘flylogo()’,200);
}
else
document.layers[“logo].left=200;
}
When the function is called it checks the counter to make sure that it should run. If the counter is
equal to 5 then the left edge of the logo is placed at pixel 200 and no more processing is performed by this
routine(function).
We can also use gif images for animation of images, but the writing the javascript is easier than
creating a gif, the download is smaller and it is also very flexible. One more advantages is that we can make
the image move in any direction as per our requirement, but it is difficult in the case of gif images.
Multiple pages in a single download:
DHTML has many advantages like saving several pages in a single download. It is useful when most
of the data is text based and where users are going to want to see all of that information and also works well
as a way of splitting a single large document into several screens of data, so that users don’t have to scroll up
and down. It is not useful when web content have too many layers or too many images and also when
visitors unlikely to want to see all of the pages.
Javascript code: In text book
Text-only Menu System:
The most common use of java is the site menu. There are many ways of providing navigation but
developing a global menu to hyperlinks is one of the most popular. By combining the techniques of
rollovers and layers swapping we can develop a effective menu system.
Here a single .js file is used for all the pages under the navigation menu, so it is not necessary to
update all the pages, we just have to update only one javascript library file (.js file).
Eg.
Link 1>> Link 1
Link 2 Link 2>>
Link 3 Link 3
Link 1i s active Link 2 is active

~2~
 In the above we can see shots of how the navigation menu appears at different pages depending on
which links is active. These menus are generated by a single javascript file.
It is possible to create such a menu using cascading style sheets (CSS), by defining a class for the
menus and assigning different properties for links so that we can create the menu just by using a CSS file.
There is an advantage of using javascript here. As we can see in the above shots, the active link has
the “>>” character in the end. This is created only for the active link, therefore it’s created dynamically.
With javascript we can use any character or iconic image that will make the link really look active.

~3~