Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 197
  • Last Modified:

Javascript Button

Hello Expert!!!
---------------
How can i make button ho changes picture when i put mouse over the button. I have seen javascript when i look at the source of the page. Can i use FrontPage98 ?

Help!!!
Thanks...
0
mummi
Asked:
mummi
  • 2
1 Solution
 
rcashonCommented:
mummi,
    A little more information is needed. Are you trying to create a button/image rollover? Ie. change the image of the button when the mouse is over it?

Randall
0
 
MasseyMCommented:
This is very simple.  Please see the code below:

0
 
MasseyMCommented:
roll.js // I have this function in a separate "script" file so that I can use it with all my pages... Below this is a sample page.
-----------------------------------------------------
function imgOn(imgName) {
   if (document.images) {
       document[imgName].src = eval(imgName + "on.src");
        }
}

function imgOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");
        }
}



INDEX.HTML
-----------------------------------------------------
<HTML>
      <HEAD>
            <TITLE>Lathon Wider Community Center</TITLE>
      </HEAD>

<BODY BACKGROUND="Graphics/SideTear.Gif">
      <SCRIPT LANGUAGE="JavaScript">
      img1on = new Image();           // Active images
      img1on.src = "graphics/on.gif";  
      img2on = new Image();
      img2on.src = "graphics/on.gif";  
      img3on = new Image();
      img3on.src = "graphics/on.gif";

      img1off = new Image();          // Inactive images
      img1off.src = "graphics/off.gif";
      img2off = new Image();
      img2off.src = "graphics/off.gif";
      img3off = new Image();
      img3off.src = "graphics/off.gif";

      </SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="roll.js">

</SCRIPT>

      <STYLE>
            A      {
                  text-decoration: none;
                  }
      </STYLE>

<TABLE CELLPADDING=-10 CELLSPACING=-10 WIDTH="100%">
<TR>
      <TH WIDTH="15%"></TH><TH></TH>
</TR>
      <TR>
            <TD>
                  <TABLE CELLSPACING=-10 CELLPADDING=-10>
                        <TR>
                              <TD><IMG SRC="Graphics/CTE_logo.Gif"></TD>
                        </TR>
                  </TABLE>
            </TD>
            <TD VALIGN="TOP">
                  <TABLE CELLSPACING=-10 CELLPADDING=-10 WIDTH=100% BORDER=2>
                        <TR  VALIGN="TOP">
                              <TD VALIGN = "TOP" BGCOLOR="NAVY"><FONT SIZE="+3" COLOR="WHITE"><B>Lathon Wider Community Center</B></FONT></TD>
                        </TR>
                  </TABLE>
                  <TABLE>
                        <TR>
                              <TD><A HREF="toc.asp" onMouseOver = "imgOn('img1');" onMouseOut="imgOff('img1');"><IMG NAME="img1" SRC="graphics/off.gif" BORDER=0><FONT SIZE=+1>1997-1998 Program Guide</FONT></A></TD>
                              </TD>
                        </TR>

                        <TR>
                              <TD><A HREF="about.asp" onMouseOver = "imgOn('img2');" onMouseOut="imgOff('img2');"><IMG NAME="img2" SRC="graphics/off.gif" BORDER=0><FONT SIZE=+1>About Us</FONT></A></TD>
                              </TD>
                        </TR>
                        <TR>
                              <TD><A HREF="about2.asp" onMouseOver = "imgOn('img3');" onMouseOut="imgOff('img3');"><IMG NAME="img3" SRC="graphics/off.gif" BORDER=0><FONT SIZE=+1>About Us</FONT></A></TD>
                              </TD>
                        </TR>


                  </TABLE>
            </TD>
      </TR>
</TABLE>
</BODY>
<ADDRESS>
      <TABLE CELLPADDING=-10 CELLSPACING=-10 WIDTH="100%">
            <TR>
                  <TH WIDTH="15%"></TH><TH></TH>
            </TR>
            <TR>
                  <TD></TD>
                  <TD><HR></TD>
            </TR>
            <TR>
                  <TD></TD>
                  <TD><FONT COLOR="NAVY" SIZE=-1>137 Henry Street</FONT></TD>
            </TR>
            <TR>
                  <TD></TD>
                  <TD><FONT COLOR="NAVY" SIZE=-1>Stamford, Connecticut  06902</FONT></TD>
            </TR>
            <TR>
                  <TD></TD>
                  <TD><FONT COLOR="NAVY" SIZE=-1>(203) 327-3260</FONT></TD>
            </TR>
      </TABLE>
</ADDRESS>
</HTML>
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now