PDA

Click to See Complete Forum and Search --> : Just alittle help

rurth24
09-24-2003, 12:46 PM
I'm just getting in Javascript and I have a simple question.
I have 4 buttons and I want Javascript to generate some simple text in a blank table on the same page. I'm using an onMouseOver() event. As of now this is what it looks like.
<head>
<script language="JavaScript">
function info(){
document.write("<font face=arial size=5><b>Page1</B></font><BR>")
document.write("Donate")
}
</script>
</head>

<body>
<MAP name="Map">
<AREA shape="circle" coords="144,119,44" href="#" onMouseOver="<info()">
</MAP>
<table>
----I want the information to be displayed here----
</table>
</body>
pyro
09-24-2003, 12:53 PM
There are quite a few errors in that code, you might want to take a look at this one, which make proper use of HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Example</title>
<script type="text/javascript">
function info() {
document.getElementById("mydiv").innerHTML = "<span style=\"font-family: arial, sans-serif; size: 150%; font-weight: bold;\">Page1</span><br>Donate";
}
</script>
</head>
<body>
<p><a href="#" onmouseover="info();">mouseover</a></p>
<div id="mydiv">
----I want the information to be displayed here----
</div>
</body>
</html>Though you will still want to remember that users without javascript will never get the content you mean for them to get, and thus, you should provide an alternate method of accessing the data.
rurth24
09-24-2003, 01:03 PM
Thanks for the help. I'm going to give it a try but I'm working on some flash stuff first. I'll let you know later how it turns out. I noticed that your Icon is Spawn. I'm a huge Spawn collector. Thanks again.
pyro
09-24-2003, 01:06 PM
I have no idea who Spawn is -- I made my avatar...
rurth24
09-24-2003, 01:09 PM
The glowing Green Eyes under your Name are the eyes of SPAWN by Tod McFarlane.
pyro
09-24-2003, 01:28 PM
Interesting...
rurth24
09-24-2003, 02:04 PM
Okay back to the javascript. I plugged in what you gave me but it doesn't seem to be working. Any suggestions?
pyro
09-24-2003, 02:08 PM
I'd have to see how you tried to impliment it. The code I gave you worked fine for me when I tried it (IE6 and Mozilla 1.4)
rurth24
09-24-2003, 02:09 PM
Does it matter that my buttons are in a different table cell?
I have 2 cells

<td>
----buttons----
</td>
<td>
<table>
----information to be displayed----
</table>
</td>
rurth24
09-24-2003, 02:13 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Joe Torre Safe At Home Foundation</TITLE>
<LINK href="torrestyles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function info() {
document.getElementById("mydiv").innerHTML = "<span style=\"font-family: arial, sans-serif; size: 150%; font-weight: bold;\">Page1</span><br>Donate";
}
</script>
</HEAD>
<BODY text="#000000" link="#FFFFFF" vlink="#999999" alink="#CCCCCC" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10">
<TABLE width="800" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD width="260" height="79"><IMG src="images/image1.gif" width="260" height="79"></TD>
<TD width="307"><IMG src="images/image2.gif" width="307" height="79"></TD>
<TD width="234"><IMG src="images/image3.gif" width="234" height="79"></TD>
</TR>
<TR>
<TD height="15" align="left" valign="top"><IMG src="images/image4.gif" width="260" height="15" border="0"></TD>
<TD colspan="2"></TD>
</TR>
<TR>
<TD width="260" align="left" valign="top"><BR>
<TABLE width="195" height="110" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="195" height="15"><A href="index.html" onMouseOver="document.homebox.src='images/nav_home_over.gif'" onMouseOut="document.homebox.src='images/nav_home.gif'"><IMG src="images/nav_home.gif" name="homebox" width="195" height="15" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="about.html" onMouseOver="document.aboutbox.src='images/nav_about_over.gif'" onMouseOut="document.aboutbox.src='images/nav_about.gif'"><IMG src="images/nav_about.gif" name="aboutbox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="bio.html" onMouseOver="document.biobox.src='images/nav_bio_over.gif'" onMouseOut="document.biobox.src='images/nav_bio.gif'"><IMG src="images/nav_bio.gif" name="biobox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="what.html" onMouseOver="document.dombox.src='images/nav_dom_vio_over.gif'" onMouseOut="document.dombox.src='images/nav_dom_vio.gif'"><IMG src="images/nav_dom_vio.gif" name="dombox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="15"><A href="news.html" onMouseOver="document.newsbox.src='images/nav_news_over.gif'" onMouseOut="document.newsbox.src='images/nav_news.gif'"><IMG src="images/nav_news.gif" name="newsbox" width="195" height="15" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="how.html" onMouseOver="document.howbox.src='images/nav_how_over.gif'" onMouseOut="document.howbox.src='images/nav_how.gif'"><IMG src="images/nav_how.gif" name="howbox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="contactus.html" onMouseOver="document.contactbox.src='images/nav_contact_over.gif'" onMouseOut="document.contactbox.src='images/nav_contact.gif'"><IMG src="images/nav_contact.gif" name="contactbox" width="195" height="16" border="0"></A></TD>
</TR>
</TABLE>
<BR>
<TABLE width="248" height="324" border="1" cellpadding="5" cellspacing="5" class="maintxtblack">
<<div id="mydiv"></div>
<TR>
<TD align="left" valign="top">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD height="339" colspan="2" align="center" valign="top"> <SPAN class="title">Please Help Us By Making A Donation</SPAN><BR>
<SPAN class="title">There are 4 Ways You Can Now Make a Donation</SPAN><BR>
<IMG src="images/howmainimage.jpg" width="523" height="473" border="0" usemap="#Map"> </TD>
</TR>
<TR>
<TD><IMG src="images/image10.jpg" width="260" height="14"></TD>
<TD colspan="2" height="15"><IMG src="images/about3.jpg" width="540" height="15"></TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="10" bgcolor="6699CC" class="maintxt">Current News:</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="20" bgcolor="336699">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="30" bgcolor="003366">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellpadding="0" cellspacing="0" class="maintxt">
<TR>
<TD height="40" align="center" bgcolor="000033"><A href="index.html">Home</A> | <A href="about.html">about us</A> | <A href="bio.html">Joe Torre Bio</A> | <A href="what.html">what is domestic violence</A> | <A href="news.html">news and events</A> | <A href="resources.html">resources and materials</A> | <A href="how.html">how can i help</A><BR>
| <A href="contactus.html">contact us</A> | <A href="sitemap.html">site map</A></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellpadding="0" cellspacing="0" class="maintxt">
<TR>
<TD height="40" align="center" bgcolor="#000000" class="legal">Joe Torre Safe At Home Foundation<BR>
Copyrighted 2003</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<MAP name="Map">
<<AREA shape="circle" coords="144,119,44" href="#" onMouseOver="info();">
<AREA shape="circle" coords="386,118,42" href="#">
<AREA shape="circle" coords="386,365,41" href="#">
<AREA shape="circle" coords="143,365,44" href="#">
<AREA shape="circle" coords="144,119,44" href="#">
</MAP>
</BODY>
</HTML>
pyro
09-24-2003, 02:23 PM
What seems to be not working? Is it the fact that (as far as I can tell) you haven't specified an image for your imagemap?
rurth24
09-24-2003, 02:34 PM
I'm not sure what your talking about? I don't think thats the problem. I'm using the image map just for rollover targets. The information above in the javascript is not showing up in the area. <div id="mydiv"></div>
pyro
09-24-2003, 02:44 PM
The problem is indeed your use of the imagemap. Take a look at this (rollover the link at the top of the page): Important parts are hightlighted in bold

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Joe Torre Safe At Home Foundation</TITLE>
<LINK href="torrestyles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function info() {
document.getElementById("mydiv").innerHTML = "<span style=\"font-family: arial, sans-serif; size: 150%; font-weight: bold;\">Page1</span><br>Donate";
}
</script>
</HEAD>
<BODY text="#000000" link="#FFFFFF" vlink="#999999" alink="#CCCCCC" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10">
<a href="#" onmouseover="info();">info</a>
<TABLE width="800" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD width="260" height="79"><IMG src="images/image1.gif" width="260" height="79"></TD>
<TD width="307"><IMG src="images/image2.gif" width="307" height="79"></TD>
<TD width="234"><IMG src="images/image3.gif" width="234" height="79"></TD>
</TR>
<TR>
<TD height="15" align="left" valign="top"><IMG src="images/image4.gif" width="260" height="15" border="0"></TD>
<TD colspan="2"></TD>
</TR>
<TR>
<TD width="260" align="left" valign="top"><BR>
<TABLE width="195" height="110" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="195" height="15"><A href="index.html" onMouseOver="document.homebox.src='images/nav_home_over.gif'" onMouseOut="document.homebox.src='images/nav_home.gif'"><IMG src="images/nav_home.gif" name="homebox" width="195" height="15" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="about.html" onMouseOver="document.aboutbox.src='images/nav_about_over.gif'" onMouseOut="document.aboutbox.src='images/nav_about.gif'"><IMG src="images/nav_about.gif" name="aboutbox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="bio.html" onMouseOver="document.biobox.src='images/nav_bio_over.gif'" onMouseOut="document.biobox.src='images/nav_bio.gif'"><IMG src="images/nav_bio.gif" name="biobox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="what.html" onMouseOver="document.dombox.src='images/nav_dom_vio_over.gif'" onMouseOut="document.dombox.src='images/nav_dom_vio.gif'"><IMG src="images/nav_dom_vio.gif" name="dombox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="15"><A href="news.html" onMouseOver="document.newsbox.src='images/nav_news_over.gif'" onMouseOut="document.newsbox.src='images/nav_news.gif'"><IMG src="images/nav_news.gif" name="newsbox" width="195" height="15" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="how.html" onMouseOver="document.howbox.src='images/nav_how_over.gif'" onMouseOut="document.howbox.src='images/nav_how.gif'"><IMG src="images/nav_how.gif" name="howbox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="contactus.html" onMouseOver="document.contactbox.src='images/nav_contact_over.gif'" onMouseOut="document.contactbox.src='images/nav_contact.gif'"><IMG src="images/nav_contact.gif" name="contactbox" width="195" height="16" border="0"></A></TD>
</TR>
</TABLE>
<BR>
<TABLE width="248" height="324" border="1" cellpadding="5" cellspacing="5" class="maintxtblack">
<<div id="mydiv"></div>
<TR>
<TD align="left" valign="top"> </TD>
</TR>
</TABLE>
</TD>
<TD height="339" colspan="2" align="center" valign="top"> <SPAN class="title">Please Help Us By Making A Donation</SPAN><BR>
<SPAN class="title">There are 4 Ways You Can Now Make a Donation</SPAN><BR>
<IMG src="images/howmainimage.jpg" width="523" height="473" border="0" usemap="#Map"> </TD>
</TR>
<TR>
<TD><IMG src="images/image10.jpg" width="260" height="14"></TD>
<TD colspan="2" height="15"><IMG src="images/about3.jpg" width="540" height="15"></TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="10" bgcolor="6699CC" class="maintxt">Current News:</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="20" bgcolor="336699"> </TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="30" bgcolor="003366"> </TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellpadding="0" cellspacing="0" class="maintxt">
<TR>
<TD height="40" align="center" bgcolor="000033"><A href="index.html">Home</A> | <A href="about.html">about us</A> | <A href="bio.html">Joe Torre Bio</A> | <A href="what.html">what is domestic violence</A> | <A href="news.html">news and events</A> | <A href="resources.html">resources and materials</A> | <A href="how.html">how can i help</A><BR>
| <A href="contactus.html">contact us</A> | <A href="sitemap.html">site map</A></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellpadding="0" cellspacing="0" class="maintxt">
<TR>
<TD height="40" align="center" bgcolor="#000000" class="legal">Joe Torre Safe At Home Foundation<BR>
Copyrighted 2003</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<MAP name="Map">
<<AREA shape="circle" coords="144,119,44" href="#" onMouseOver="info();">
<AREA shape="circle" coords="386,118,42" href="#">
<AREA shape="circle" coords="386,365,41" href="#">
<AREA shape="circle" coords="143,365,44" href="#">
<AREA shape="circle" coords="144,119,44" href="#">
</MAP>
</BODY>
</HTML>
rurth24
09-24-2003, 02:52 PM
<a href="#" onmouseover="info();">info</a>

I added the above line. When I roll over the link it still doesn't work. Nothing is being generated.
pyro
09-24-2003, 02:59 PM
The code I just posted works fine for me in IE6 and Mozilla 1.4, though you may want to try setting your links color to something visible, so you know when you are mousing over it...
rurth24
09-24-2003, 03:14 PM
Yeah, I did that before. Can't figure it out. This is what I have so far. You think it's the image map right? So how would I correct this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Joe Torre Safe At Home Foundation</TITLE>
<LINK href="torrestyles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function info() {
document.getElementById("mydiv").innerHTML = "<span style=\"font-family: arial, sans-serif; size: 150%; font-weight: bold;\">Page1</span><br>Donate";
}
</script>
</HEAD>
<BODY text="#000000" link="#FFFFFF" vlink="#999999" alink="#CCCCCC" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10">
<a href="#" onmouseover="info();"><FONT color="#FF0000">info</FONT></a>
<TABLE width="800" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD width="260" height="79"><IMG src="images/image1.gif" width="260" height="79"></TD>
<TD width="307"><IMG src="images/image2.gif" width="307" height="79"></TD>
<TD width="234"><IMG src="images/image3.gif" width="234" height="79"></TD>
</TR>
<TR>
<TD height="15" align="left" valign="top"><IMG src="images/image4.gif" width="260" height="15" border="0"></TD>
<TD colspan="2"></TD>
</TR>
<TR>
<TD width="260" align="left" valign="top"><BR>
<TABLE width="195" height="110" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="195" height="15"><A href="index.html" onMouseOver="document.homebox.src='images/nav_home_over.gif'" onMouseOut="document.homebox.src='images/nav_home.gif'"><IMG src="images/nav_home.gif" name="homebox" width="195" height="15" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="about.html" onMouseOver="document.aboutbox.src='images/nav_about_over.gif'" onMouseOut="document.aboutbox.src='images/nav_about.gif'"><IMG src="images/nav_about.gif" name="aboutbox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="bio.html" onMouseOver="document.biobox.src='images/nav_bio_over.gif'" onMouseOut="document.biobox.src='images/nav_bio.gif'"><IMG src="images/nav_bio.gif" name="biobox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="what.html" onMouseOver="document.dombox.src='images/nav_dom_vio_over.gif'" onMouseOut="document.dombox.src='images/nav_dom_vio.gif'"><IMG src="images/nav_dom_vio.gif" name="dombox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="15"><A href="news.html" onMouseOver="document.newsbox.src='images/nav_news_over.gif'" onMouseOut="document.newsbox.src='images/nav_news.gif'"><IMG src="images/nav_news.gif" name="newsbox" width="195" height="15" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="how.html" onMouseOver="document.howbox.src='images/nav_how_over.gif'" onMouseOut="document.howbox.src='images/nav_how.gif'"><IMG src="images/nav_how.gif" name="howbox" width="195" height="16" border="0"></A></TD>
</TR>
<TR>
<TD width="195" height="16"><A href="contactus.html" onMouseOver="document.contactbox.src='images/nav_contact_over.gif'" onMouseOut="document.contactbox.src='images/nav_contact.gif'"><IMG src="images/nav_contact.gif" name="contactbox" width="195" height="16" border="0"></A></TD>
</TR>
</TABLE>
<BR>
<TABLE width="248" height="324" border="1" cellpadding="5" cellspacing="5" class="maintxtblack">
<div id="mydiv"></div>
<TR>
<TD align="left" valign="top">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD height="339" colspan="2" align="center" valign="top"> <SPAN class="title">Please Help Us By Making A Donation</SPAN><BR>
<SPAN class="title">There are 4 Ways You Can Now Make a Donation</SPAN><BR>
<IMG src="images/howmainimage.jpg" width="523" height="473" border="0" usemap="#Map"></TD>
</TR>
<TR>
<TD><IMG src="images/image10.jpg" width="260" height="14"></TD>
<TD colspan="2" height="15"><IMG src="images/about3.jpg" width="540" height="15"></TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="10" bgcolor="6699CC" class="maintxt">Current News:</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="20" bgcolor="336699">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="30" bgcolor="003366">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellpadding="0" cellspacing="0" class="maintxt">
<TR>
<TD height="40" align="center" bgcolor="000033"><A href="index.html">Home</A> | <A href="about.html">about us</A> | <A href="bio.html">Joe Torre Bio</A> | <A href="what.html">what is domestic violence</A> | <A href="news.html">news and events</A> | <A href="resources.html">resources and materials</A> | <A href="how.html">how can i help</A><BR>
| <A href="contactus.html">contact us</A> | <A href="sitemap.html">site map</A></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="800" border="1" cellpadding="0" cellspacing="0" class="maintxt">
<TR>
<TD height="40" align="center" bgcolor="#000000" class="legal">Joe Torre Safe At Home Foundation<BR>
Copyrighted 2003</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<MAP name="Map">
<AREA shape="circle" coords="144,119,44" href="#" onMouseOver="info();">
<AREA shape="circle" coords="386,118,42" href="#">
<AREA shape="circle" coords="386,365,41" href="#">
<AREA shape="circle" coords="143,365,44" href="#">
<AREA shape="circle" coords="144,119,44" href="#">
</MAP>
</BODY>
</HTML>
pyro
09-24-2003, 03:25 PM
Try swapping out the current <div> for this one:

<div id="mydiv">&nbsp;</div>
rurth24
09-24-2003, 03:30 PM
Nothing happened.
It's driving me nuts!!! LOL
pyro
09-24-2003, 04:52 PM
This worked fine for me... Save and rename with a .htm extention...
rurth24
09-25-2003, 10:27 AM
I got it too work. I just re did the script in the page, and it worked. There was probably something amiss in the code. Anyway thanks so much for the help. I really appreciate the time spent helping.
pyro
09-25-2003, 10:32 AM
You are very welcome... :)