Solved

Javascript Button

Posted on 1998-09-08
3
173 Views
Last Modified: 2010-04-09
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
Comment
Question by:mummi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 1

Expert Comment

by:rcashon
ID: 1837434
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
 
LVL 10

Accepted Solution

by:
MasseyM earned 50 total points
ID: 1837435
This is very simple.  Please see the code below:

0
 
LVL 10

Expert Comment

by:MasseyM
ID: 1837436
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question