PDA

Click to See Complete Forum and Search --> : Rollover Image and Text Swap

MjhLkwd
06-02-2003, 05:58 PM
<HTML>
<Head>
<Script Language="JavaScript">

function SwapImage() {

var swap = event.type;
if (swap == 'mouseover'){swapImg.src="night.gif"
writetolayer('newlayer','Nighttime Skyline')};
if (swap == 'mouseout'){swapImg.src="day.gif"
writetolayer('newlayer','Daytime Skyline')};
}


function writetolayer(lay,txt) {

document.all[lay].innerHTML = txt;

}

</Script>
</Head>

<Body>
<center>
<IMG name="swapImg" src="day.gif" onMouseOver="SwapImage()" onMouseOut="SwapImage()">
<BR>
<SPAN ID="newlayer">Daytime Skyline</SPAN>
</center>
<Body>

</HTML>
MjhLkwd
06-02-2003, 06:01 PM
Attached is the second image, the rollover image.
Dark Dragon
06-02-2003, 06:19 PM
Umm...I don't understand...what are you asking, if anything?
MjhLkwd
06-02-2003, 06:23 PM
THREE DIFFERENT ROLLOVERS.

1. A simple and easily customizable, for multiple page images.

<HTML>
<Head>
<Script Language="JavaScript">

function SwapImage() {

var swap = event.type;
if (swap == 'mouseover'){swapImg.src="HaltBtn2.jpg"}
if (swap == 'mouseout'){swapImg.src="HaltBtn1.jpg"}


}

</Script>
</Head>

<Body>
<IMG name="swapImg" src="HaltBtn1.jpg" onMouseOver="SwapImage()" onMouseOut="SwapImage()">

<Body>

</HTML>

2. Rollover with with a link to JS function.

<HTML>
<Head>
<Script Language="JavaScript">

function SwapImage() {

var swap = event.type;
if (swap == 'mouseover'){swapImg.src="HaltBtn2.jpg"}
if (swap == 'mouseout'){swapImg.src="HaltBtn1.jpg"}


}

function doThis(){

alert('Test');

}

</Script>
</Head>

<Body>
<input type="image" src="HaltBtn1.jpg" name="swapImg" onMouseOver="SwapImage()";
onMouseOut="SwapImage()"; onClick="doThis()">

</Body>

</HTML>

3. Rollover with a "link" image, i.e. it's outlined in blue.

<HTML>
<Head>
<Script Language="JavaScript">

function doThis(){

alert('Test');

}

function SwapImage() {

var swap = event.type;
if (swap == 'mouseover'){swapImg.src="HaltBtn2.jpg"}
if (swap == 'mouseout'){swapImg.src="HaltBtn1.jpg"}


}

</script>
</head>

<Body>
<a href="javascript:doThis()"><img src="HaltBtn1.jpg" name="swapImg"
onMouseover="SwapImage()"; onMouseout="SwapImage()">
</a>


</Body>
</HTML>
MjhLkwd
06-02-2003, 06:24 PM
I'm not asking anything. I'm posting what I believe are helpful solutions.
Dark Dragon
06-02-2003, 06:55 PM
Oh.