With new developments
in web design technology like macromedia flash, 3-D rendering applications,
streaming video, and graphical enhancements, today's webdesigners are faced
with an ever-expanding choice of "content," all of it equally
brain-numbing. (I like to think that "eX-Mania" is an exception
to commercial, lowest-common-denominator fare, but then I recall those subliminal
advertisements for strawberry-scented makeup remover pads that we keep inserting
between arch literary references. OOPS, probably shouldn't have mentioned
that.) So you've come here to learn Image Rollovers have you? Let's dig
in shall we?
First let's
look at the code:
<script
language="Javascript1.1">
function yaImgChange(imgNum,imgSrc) {
document.images[imgNum].src = imgSrc;
}
</script> |
Whats all this
mobo-jumbo?? Basically it calls the language, "Javascript1.1"
, then it declares a function, "yaImgChange", then
it moves onto what should be change, document.images[imgNum].src = imGSrc;
. The last part of that, "src = imgSrc" , basically tells
it to assign src to imgSrc, which will be the image. This code goes in between
the header tags of any given HTML document. (<head></head>)
The next piece
of coding will be the actual link and image coding.
<a
href="javascript:nothingMuch();" onMouseOver="yaImgChange(11,'img1.gif');"
onMouseOut="yaImgChange(11,'img2.gif');"> <img src="img1.gif"></a>
|
Typical
A href link right? Not exactly, we've added a bit more of a functionality.
Basically it calls the language again the assigns a variable to it,: "nothingMuch"
, and ; ends it. Then it has, onMouseOver, which tells the
mouse to flip to the secondary image. Then it gives the function we defined
in the header, yaImgChange, then assigns it a number and image, (11,'img1.gif');,
then it has , onMouseOut, which tells the image to go back to the
first image once the mouse leaves the image, nothing new here except for
the second img tag, instead of img1.gif we have img2.gif.
Then we give the actual image tag and end the link with </a>
. NOTE: Every link needs a unique number, example the first link is 11,
the next link would be 12. Never assign two images the same number!!
Now
let's put it all together:
|
<html>
<head>
<title>Image Rollovers</title>
<script language="Javascript1.1">
function yaImgChange(imgNum,imgSrc) {
document.images[imgNum].src = imgSrc;
}
</script>
</head>
<body>
<a
href="javascript:nothingMuch();" onMouseOver="yaImgChange(11,'img1.gif');"
onMouseOut="yaImgChange(11,'img2.gif');"> <img src="img1.gif"></a>
</body>
</html>
|
Which should produce:
