JavaScri ?over But ?
< ? cla ? ?eading">Change the image when a mouse mo ? it
Using a java ? ?o change an image when someone moves their mouse ove ? has become ?e po ? ?'ve heard it called many things: "hover but ?&quo ?&quo ?llover&q ?, and &q ?image highlighte ?ot; are a fe ?hat happens is that ? ? ?mage ? link, and a javascript ?ake a clickable image link that is & ?;highlighted&quo ?hen a mo ? ?es o ?it.
To begin, you will need to make you ?f two images of ? ? size, making whatever ces you would like to the second one. Below i ? example whe ? cho ?o make an image ? blue te ?nd one in red te ?The ? ? image i ?at I wan ?ople to ? ? the ? ?heir mou ? ? ?blue-tex ?age.
< ?ign="lef ?
< ?  |
![]() |
OK, tha ? the eas ? ?Now ?ave ?ave a sc ? tha ?ll do all the wo ?or u ?'m going to go ahead and put the whole thing below, and explain ? ? ?n pa ?afte ?d. I got thi ? ? from a free script ?, did some forma ?g fo ?adabilit ?hanged some ?able names, and added a check fo ?e image object. Here is ?code for the HEAD section of you ?ge:
align="left">
<HEAD>
<SCRIPT language="JavaScript">
&l ?-
if (doc ? ?ages)
{
?on= new Image(100,25);
?on.s ? ? ?if";
pic1off= ne ?age(100,25);
pic1off.src="shoes1.gif";
}
function light ?mgName)
{
if (document.image ? {
imgOn=eval(imgName + "on. ?);
doc ? ?gName].s ?imgOn;
}
}
function tu ?f(imgName)
? if (doc ? ?ages)
{
imgOff=eval(imgName + "off.src");
document[imgName]. ? imgOff; }
?/-->
</SCRIPT>
&l ?EAD>
Part 1: B ?er Check
All right, the fir ? ?is to check for a browse ?at s ? ?all ?func ? ?d declarations we will be using. Thi ? done wi ?a href="java25.php">Object Detec ?:
if (doc ? ?ages)
{
sta ?nts (see code above/explanation belo ?
Thi ?ecks to ensu ?he b ?er s ? ? ?image object before it p ?ads ?images. This way, yo ?n avoid java ? ? ? ? older b ?ers.
Part 2: Define and Load Your Images
Now, we get the images involved in ? ?me here: if (document.images)
{ This checks ?nsure the browse ? ? ?he image object.
< ?ign="lef ?pic1on= new Image(100,25);
Thi ?fine ?new image called "pic1on" wi ? wid ?f 100 and a height of 25.
pic1on.src="shoes2.gif"; This gives tource, o ?l of the image. This allows it to load now so users don' ?it for a new image to load when ? pas ?eir mouse over i ? ? Be ? thi ? the url of ? 2 image. This i ?e one yo ?nt people to see when their mouse pa ? ove ?/fon ? ? pic1off= new Image(100,25); Now ?define your defa ? or 1pic1off.src="shoes1.gif"; Give the url of ? default image so it is loaded.
} : End ?e image defining and loading sta ?nts.
Func ? 1: The mouseove ?nction
Now ?et to the function that ? be ?gered by the mou ?oving over the image:
func ? lightup(imgName)
{
Thi ?fine ?func ? named "ligh ?. It is ?ing in a parameter called "imgName". "imgName" i ?ing ?e the name=" ?" at ? ?of the 2nd image from our HTML document. It i ?nt to this f ?ion ? we call it late ? the HTML document ( ?belo ?imgName ? ? ? be "pic1". The "{" begins the g ? of ?emen ?or the f ?ion.
< ?ign="lef ?if (doc ? ?ages)
< ?ign="lef ?font color="#FFFFFF"> Anothe ?eck and beginning of sta ?nts for brow ? with the image object. nt>
imgOn=eval(imgName + "on.src"); This defines the variable "imgOn" as the sum of ? ?able "imgName" and the s ?g "on.src". Remember, the function read in "imgName" as "pic1", ?he s ?nds ? ?ic1on.src", ? defined earlier as ? ?of o ?nd image.
< ?ign="lef ?doc ? ?gName].s ?imgOn; Now, we define imgOn for the doc ? ?o it loads the correct image. By sub ? ?g what we go ? ?gOn a moment ago, and substi ?ng " ?" fo ?gName (which was sen ? the function), ?et this:
< ?ign="lef ?font color="#FFFFFF"> document[pic1].src=pic1on. ?
< ?ign="lef ?font color="#FFFFFF"> This i ? ? need to use thee="pic1" att ? ?n the image ?in o ?TML late ?his make ? ? ?e to an image in the doc ? ? the name of "pic1". The new sou ?(url) fo ?e image is now the value of "pic1on. ?, which ?efined earlier a ?hoes2.gif", our 2 } } : The ?nd the "n3" ?emen ?nd the f ?ion ?emen ?
F ?ion 2: When ?Mouse Leaves the Image
< ?
function t ?ff(imgName)
{
if (document.image ? {
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
//---->
</PT>
&l ?EAD> This function does the same ?g as the las ?e, e ? ?at i ?curs when the mo ?move ?f the image. Thu ? named the f ?ion "turnoff" since it t ? the pre ? ?nction "off" and ret ? to ?1
Finally, ?HTML!
Now, go down into you ?DY section and find out ?e yo ? ?like you ?age ?o. You will ? put in ?following linked image code. You sho ? ?e everything on one line, I have it ? way onl ? ?adabilit ?/fon ?div>
< ?ign="lef ?&l ?HREF="index. ?" onMouseove ?ight ? ?')" onMo ? ? ?off('pic1')"> </A>
Notice how ?all our func ? "lightu ?ith ? ?mete ?ic1' on ?Mouseove ?e then call ?func ? "tu ?f" with ? ?mete ?ic1' on ?Mouseout. The ac ? is all done in our link. Yo ?n link to an ?l yo ? ?ere, and tha ?ll be where ? ? goe ? the ?ick ?image. In the image ? use you ?>fir ?defa ? image a ?e image ?ce. Also, be sure yo ?e the name=" ?" at ? ? as ? as defining you ?ight and wid ?This will make s ? ? ? ?nows the name, heigh ?nd width of ? image and will ? ? ?. The bo ? att ? ? ? to ? I chose zero fo ?ne becau ? wan ? ?image to look like text.
The Final Produc ? Changing, Linked Image
?"index.php" onmo ? ?"lightup('pic1')" onmouseout="tu ?f('pic1')">![]()
< ?ign="lef ?font color="#FFFFFF"> Ye ?here it is. Move you ? ?over it and ? ? ? turn red! You can click it if you want, but you'll end ?ack at the main JavaScri ?age......
< ? cla ?heading">But I Want ?o this for M ? ?Images!
No ?lem. You can use it for as many images a ? ? ?Just be ? to define your othe ?ages along with ? fir ?Remember, yo ?ed t ?mage ? ?ery one ? ? to change. To add e ? ?efine them first back in the script in the HEAD ?ion:
if (document.image ? {
pic1on= new Image(100,25);
pic1on. ?"Images/ ? ?if";
pic2on= new Image(100,25);
pic2on.src="Image ?ory2.gif";
pic1off= new Image(100,25);
pic1off.s ?Images/shoes1.gif";
?off= new Image(100,25);
pic2off.src="Images/sto ?gif";
}
Now, be ? you name it cor ?ly in the HTML in the BODY section. For ?new image he ? ?ill name it "pic2". (For more, j ? ?"pic3", "pic4", and ?n). Then jus ?nk i ? ano ? page: <A HREF="newpage. ?" onMouseove ?ight ? ?')" onMo ? ? ?off('pic2')"> </A>
Now you will ha ? ?hanging images linking to different ?es!
Do this for a ?ny image links a ? ? ?...i ?n add a nice impact ?our ? for tho ?ith newe ?owse ?
Well, that does it now. Let's move on to the ne ?ection,
JS Hover But ? 2: Changing a Diffe ? Image.
< ? &nbs ? ?
| &nbs ? ? | | | 