 
Home
|
 
JAVA SCRIPT
| One
of the most commonly used features of JavaScript is the ability to
change images on a mouseover. Unfortunately, Microsoft Internet
Explorer 3.0 does not support image replacement. So if you're
using IE 3.0, it might be time to upgrade to IE 4.0 or switch to
Netscape.
Here's a quick and dirty example of a basic image swap.
Let's go through the example step by step.
The first line of interest is
|
<img src="button_r.gif" name="the_image">
| This
is just like a standard <img src= > tag except this
one has been given a name: the_image. This name could be
anything: my_image, a_box, whatever - but it
can't have any spaces in it.
The next line of interest is
|
<a href="#" onMouseOver="document.the_image.src='button_d.gif';">change</a>
| This
is where the image swap happens. It's just like the onMouseOver
you saw before. The active piece of JavaScript, which appears in
the quotes of the onMouseOver is this: |
document.the_image.src='button_d.gif';
| This
statement says, "find the image called 'the_image'
and change its src to button_d.gif." Note
that there are double quotes around the whole statement, and 'button_d.gif'
takes single quotes. Although quotes are interchangable, if you
have one set of quotes inside another set of quotes, the sets have
to be of different kinds. So you could either do "
'something' " or ' "something" ' but not "
'something" ' or " "something" ". Got it?
Just as there was a lot of detail in what makes document.writeln()
work, I'm not telling you exactly how this image swap is working.
You'll learn the details of both when we look at object-oriented
programming and the Document Object Model in the next lesson.
An important caveat about image swapping is that the image
you're switching to should be the same size as the original. If
it's not, it'll get smashed or stretched to fit the original's
size.
|
|
 |
