surreal5335
07-02-2008, 06:27 PM
I decided to post this script after spending 3 days of trying one tutorial after another and getting nothing, until someone suggested this one.
This simple JS script will take care of all the rollover needs to changing buttons during mouseover events.
The JS code:
<script language="javascript" type="text/javascript">
<!--hide from old browsers
function rollOn(obj){
obj.src=obj.src.replace(/.png/,'blue.png');
}
function rollOff(obj){
obj.src=obj.src.replace(/blue.png/,'.png');
}
</script>
the "blue" can be changed as long as the file names match. ex:
button 1 off = home.png
button 1 on = homeon.png
with that being the case, the code would look like this:
(/.png/,'on.png');
The html code would like this:
<img src="home.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" id="home" vspace="1" hspace="0">
Thats it. On a side note this code will not work if any other JS code in the <head> tag is not scripted correctly
This simple JS script will take care of all the rollover needs to changing buttons during mouseover events.
The JS code:
<script language="javascript" type="text/javascript">
<!--hide from old browsers
function rollOn(obj){
obj.src=obj.src.replace(/.png/,'blue.png');
}
function rollOff(obj){
obj.src=obj.src.replace(/blue.png/,'.png');
}
</script>
the "blue" can be changed as long as the file names match. ex:
button 1 off = home.png
button 1 on = homeon.png
with that being the case, the code would look like this:
(/.png/,'on.png');
The html code would like this:
<img src="home.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" id="home" vspace="1" hspace="0">
Thats it. On a side note this code will not work if any other JS code in the <head> tag is not scripted correctly