Explain Rollover Buttons?
https://www.computersprofessor.com/2016/06/explain-roller-buttons.html
The most common
usage of dynamic
HTML is the image roll over.
.
The technique is
used to give
visual feed back
about the location
of the mouse Cursor by changing
the images on the page
as the mouse
over them.
The
java script code doesn’t
directly manipulate the image. If you need
to change the actual image
then you ought to investigate
Active x, flash or java programming.
java script rollover
is far simpler
because it uses
two image files
which it swaps
between as
the mouse is moved.
one
image is created
for the inactive state when
the mouse is
not over it.
A second image
is created for the
active state when
the mouse cursor is
placed over it.
Program:
< script language = “javascript”
>
var
topon, topoff;
function preLoad ( )
{
topon=new Image (30,40);
topon.src= “c:\sss.jpg”;
topoff= new Image(30,40);
top off.src= “c:\s3 .jpg”;
}
function myMouseOn(n)
{
Imageon = eval(n+ “on.src”);
document.images[0].src =Imageon;
}
function myMouseOff(n)
{
Imageoff =eval(n+ “off.src”);
document . images[0].src=Imageoff;
}
< /script >
< body onLoad= “preLoad( )>
< a onMouseover = “myMouseOn (‘top’)” onMouseOut = “myMouseOff(‘top’)” >
< img src = “c:\ss.jpg” height = “300” width= “400”/>
< /a >
< /body >
|
Explanation:
The on load event
happens when the page
is first loaded
in to the browser.
on mouse over calls a java script function
when the cursor
moves away from the
image.
on mouse out calls a
function when the
cursor moves away
from the image.
preload ( ) makes a new
object for each
image.
These are
all instances of the java script
Image object and you’ll need two for each location.One
for when the mouse is over the
image and one
for when it isn’t.
Each image object holds
the size of
the image and the
location of the actual
image file In
the src parameter.
Two
functions remain : my mouse on
and my mouse off . Both work in
the same way so I’ll just examine mymouseon.
The functions is
called when the
on mouse over event is triggered. The function
receives The name of the image
as a parameter:
On mouse over = “my mouse on
(‘top’)”;
I created two objects called top on and top off the
first part of the
name.
The
following line of code
chooses the object and
then passes its src value (the file name) in to a temporary
variable:
Imageon =eval (n+ “on.src”) ;
Eval :- java script can build
expressions dynamically.
This feature is available to you through eval .
When
your scripts need to
process information which
won’t be available
until run time you can
place that information in
to an expression as it
becomes available.
|
