Rollover Button in HTML?

Can I do a mouseover/rollever in HTML?

Page 1 of 1

4 Replies - 1664 Views - Last Post: 25 April 2002 - 08:07 AM

#1 jhsando  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 87
  • Joined: 02-November 01

Rollover Button in HTML?

Posted 23 April 2002 - 12:11 PM

Can I make a rollover/mouseover in HTML if so how?
Is This A Good Question/Topic? 0
  • +

Replies To: Rollover Button in HTML?

#2 fyrestorm  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 10
  • View blog
  • Posts: 3,113
  • Joined: 04-April 02

Re: Rollover Button in HTML?

Posted 23 April 2002 - 12:13 PM

are you doing it by hand coding or in dreamweaver?
Was This Post Helpful? 0
  • +
  • -

#3 jhsando  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 87
  • Joined: 02-November 01

Re: Rollover Button in HTML?

Posted 23 April 2002 - 12:14 PM

"Hand Coding"
Was This Post Helpful? 0
  • +
  • -

#4 gneato  Icon User is offline

  • <title>Untitled Document</title>

Reputation: 0
  • View blog
  • Posts: 1,311
  • Joined: 03-September 01

Re: Rollover Button in HTML?

Posted 23 April 2002 - 12:22 PM

how many? If you're doing more than one, use this code. I wrote it and it's compatible with all broswers I've tested it with, and it's hella fast.


this goes between <head> and </head>
<script type="text/javascript">
loadimg = new MakeArray(12)
       loadimg[1].src = "images/nav_home_on.gif"
       loadimg[2].src = "images/nav_home_off.gif"
       loadimg[3].src = "images/nav_features_on.gif"
       loadimg[4].src = "images/nav_features_off.gif"
       loadimg[5].src = "images/nav_portfolio_on.gif"
       loadimg[6].src = "images/nav_portfolio_off.gif"
       loadimg[7].src = "images/nav_prices_on.gif"
       loadimg[8].src = "images/nav_prices_off.gif"
       loadimg[9].src = "images/nav_contact_on.gif"
      loadimg[10].src = "images/nav_contact_off.gif"

function MakeArray(n)
       {
       this.length = n
       for (var ii = 1; ii<=n; ii++)
               {
               this[ii] = new Image()
               }
       return this
       }

function over(imgname){
document.images[(imgname)].src="images/nav_" + imgname + "_on.gif";
}
function out(imgname){
document.images[(imgname)].src="images/nav_" + imgname + "_off.gif";
}
</script>


In the body of the page, use this...

<a href="first.html" onmouseover="over('first');" onmouseout="out('first');"><img src="images/nav_first_off.gif" border="0" alt="first" name="first"></a><br>
<a href="second.html" onmouseover="over('second');" onmouseout="out('second');"><img src="images/nav_second_off.gif" border="0" alt="second" name="second"></a><br>
<a href="third.html" onmouseover="over('third');" onmouseout="out('third');"><img src="images/nav_third_off.gif" border="0" alt="third" name="third"></a>


of course you'll have to make the needed modifications...

(Edited by gneato at 3:24 pm on April 23, 2002)

Was This Post Helpful? 0
  • +
  • -

#5 skrilla monkey  Icon User is offline

  • goat.face

Reputation: 0
  • View blog
  • Posts: 838
  • Joined: 14-January 02

Re: Rollover Button in HTML?

Posted 25 April 2002 - 08:07 AM

complicated. if its just text, use CSS:
<style>
a {
    color: #777777;
}
a:hover {
    color: #cccccc;
}
</style>

you can obviously use whatever colors you want ;) just slap dem in there. and there are lots of other properties, like text-decoration, etc. if you want those, go ahead and ask ;) otherwise (it seems u are new to CSS/HTML pages etc in general, just an assumption) i'd probably confuzzle you ;) i know I was when i first started CSS :biggrin:

btw: put that in the <head> section of the HTML page :biggrin:

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1