Javascript: Rollover Buttons
These javascript tips and tricks will teach you how to make image links that change as you put your mouse over them. It is simple.
First, you need two images. One will be the image when the link is not being touched, the other image is when the link has been activitated.
In this case, I am using these two images:
Second, you need to put this code in between the <head> and the </head> on the page that the rollover link is going to be on:
<SCRIPT LANGUAGE="Javascript">
<!--image1= new Image( );image1.src=
"http://www.blogblog.com/tictac/tictac_orange.gif
";image2= new Image ();image2.src=
"http://www.blogblog.com/tictac/tictac_green.gif";
//--></SCRIPT>
Make sure that you change the two URLs (in italics). The first one is to the image of when the link is not activitated, and the second is to the image when the link is touched.
Finally, you insert this HTML code in the main part of your web page, and you you will get a rollover button that links to another site.
<A HREF="http://htmltips.blogspot.com.html" onmouseover="mybutton.src='
http://www.blogblog.com/tictac/tictac_orange.gif';"
onmouseout="mybutton.src=
'http://www.blogblog.com/tictac/tictac_green.gif
;"> <IMG SRC="http://www.blogblog.com/tictac/tictac_green.gif" name="mybutton"></A>
As usual, make sure that you change the code in italics to match your needs.
The result of these three steps is as follows:
First, you need two images. One will be the image when the link is not being touched, the other image is when the link has been activitated.
In this case, I am using these two images:
Second, you need to put this code in between the <head> and the </head> on the page that the rollover link is going to be on:
<SCRIPT LANGUAGE="Javascript">
<!--image1= new Image( );image1.src=
"http://www.blogblog.com/tictac/tictac_orange.gif
";image2= new Image ();image2.src=
"http://www.blogblog.com/tictac/tictac_green.gif";
//--></SCRIPT>
Make sure that you change the two URLs (in italics). The first one is to the image of when the link is not activitated, and the second is to the image when the link is touched.
Finally, you insert this HTML code in the main part of your web page, and you you will get a rollover button that links to another site.
<A HREF="http://htmltips.blogspot.com.html" onmouseover="mybutton.src='
http://www.blogblog.com/tictac/tictac_orange.gif';"
onmouseout="mybutton.src=
'http://www.blogblog.com/tictac/tictac_green.gif
;"> <IMG SRC="http://www.blogblog.com/tictac/tictac_green.gif" name="mybutton"></A>
As usual, make sure that you change the code in italics to match your needs.
The result of these three steps is as follows:
7 Comments:
How do you make a rolldown menu?
By
Anonymous, at May 17, 2005
This goes in between the <head> and the </head>
<script language="javascript">
function jump(form) { var myindex=form.menu.selectedIndex if (form.menu.options[myindex].value
!= "0") { window.open(form.menu.options[myindex].value, target="TARGET NAME GOES
HERE"); }}//--></script>
Then you put this in the main part of your html (body) to make the dropdown list:
<form name=""> <select name="menu" size="1" onchange="jump(this.form)">
<option value="URL HERE">TEXT</option> <option value="URL HERE">TEXT</option>
<option value="URL HERE">TEXT</option> <option value="URL HERE">TEXT</option>
</select></form>
Change the stuff in capital letters.
I might make an html tip on this later.
By
nilsmo, at May 17, 2005
Great Share.. Thank you..
By
Website Laten Maken, at April 23, 2011
Thank you this article is very helpful for me to optimize my blog
By
imam wahyudi, at October 13, 2012
壯陽藥品犀利士樂威壯樂威壯樂威壯樂威壯樂威壯壯陽藥樂威壯壯陽藥壯陽藥壯陽藥成人藥品性藥品性藥品犀利士犀利士犀利士犀利士威而鋼威而鋼威而鋼壯陽藥威而鋼威而鋼威而鋼威而鋼樂威壯犀利士威而鋼威而鋼威而鋼威而鋼壯陽藥品壯陽藥威而鋼威而鋼犀利士犀利士威而鋼樂威壯壯陽藥威而鋼威而鋼壯陽藥情趣藥品春藥犀利士犀利士壯陽藥情趣藥品春藥情色貼圖犀利士威而鋼
By
銘, at March 04, 2014
The PS2 is 12 years old and kind of outdated, but the one thing it has going for it is that it is very cheap Maplestory M Mesos. There are many titles available and they're a fraction of the cost of newer system games. There are also 10 years of used games in the marketplace for this system.
Regardless of your motive or expertise in gaming, buy MapleStory2 Mesos there is no doubt that you will get unlimited amounts of satisfaction from it. Don't let the tips here go to waste! MapleStory has become a universal activity that provides fun, excitement, and intensity.
By
Selfless, at January 10, 2019
I got Madden NFL Overdrive Coins on the MMOAH website and it feels good. There are a lot of ticket sellers on the Soren website that are also very cheap to sell, but security is not guaranteed. I am on the MMOAH website three times on Buy Madden NFL Overdrive Coins. Has never been blocked, and the customer service is also very enthusiastic and responsible, very satisfied with a game site.
By
smrtsmith, at February 13, 2019
Post a Comment
<< Home