Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > HTML / XHTML
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 10-23-2010, 12:11 AM
  #1
leagray107
Novice (Level 1)
 
Join Date: Oct 2010
Posts: 2
iTrader: (0)
leagray107 is an unknown quantity at this point
Question Need Help Badly!! HTML CSS JS

Ok, I need to use these files to make the french sentences switch to english on mouse click...I wrote the code for the basic site but cannot figure out how to like them to make the text switches...please help!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<!--
New Perspectives on JavaScript
Tutorial 10
Case Problem 1

French Phrases
Author: Lea Gray
Date: 10/17/10

Filename: french5.htm
Supporting files: engfr.js, french.js, styles.css

-->
<LINK rel="stylesheet" type="text/css" href="styles.css" />
<SCRIPT type="text/javascript" src="engfr.js">
</SCRIPT>
<SCRIPT type="text/javascript" src="french5.js">
</SCRIPT>
</HEAD><BODY>
<DIV id="BabCorner">
</DIV>
<TABLE>
<TBODY>
<TR>
<TD class="left">
<B>French 101</B><BR />MWF: 9:00-9:50<BR />Rm. 402 Linton Hall
</TD>
<TD class="right">
<B>Prof. Eve Granger</B><BR />Office: 810 Linton Hall<BR />Hours: TR: 3:00-4:30
</TD>
</TR>
</TBODY>
</TABLE>
<H1>
Week 5 Phrases:
</H1>
<H2>
Press down your mouse button on each phrase to translate
</H2>
<P number="0">
<SPAN class="pnum">1</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Cet hôtel n'est pas loin de la Tour Eiffel.</SPAN>
</P>
<P number="1">
<SPAN class="pnum">2</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">A quelle heure arrive le train?</SPAN>
</P>
<P number="2">
<SPAN class="pnum">3</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Nous attendons l'autobus depuis une demi-heure.</SPAN>
</P>
<P number="3">
<SPAN class="pnum">4</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Ce repas est délicieux</SPAN>
</P>
<P number="4">
<SPAN class="pnum">5</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Quel jour va-t-elle arriver?</SPAN>
</P>
<P number="5">
<SPAN class="pnum">6</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Nous avons onze minutes avant le départ du train!</SPAN>
</P>
<P number="6">
<SPAN class="pnum">7</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Habiter dans un pays étranger est une bonne expérience.</SPAN>
</P>
<P number="7">
<SPAN class="pnum">8</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Excusez-moi! Je suis en retard!</SPAN>
</P>
<P number="8">
<SPAN class="pnum">9</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Est-ce que ce taxi est libre?</SPAN>
</P>
<P number="9">
<SPAN class="pnum">10</SPAN><SPAN style="FONT-STYLE: italic; COLOR: black" class="phrase">Faites attention quand vous descendez l'escalier.</SPAN>
<script type= text/javascript>
<!--
alert onClick("english[0]="This hotel isn't far from the Eiffel Tower.";")
</script>

</P>
</BODY></HTML>




/*
New Perspectives on JavaScript
Tutorial 10
Case Problem 1

Author: Lea Gray
Date: 10/10/10

Filename: engfr.js
function setUpTranslation()(mEvent)
{
// swapFE
if (onMousClick)
{
;french1.htm
if (mEvent.srcElement)

}
// Netscape and Firefox
else if (mEvent.target)
{
alert(mEvent.target.nodeName);
}
}


Function List:
eventSource(e)
Returns the source of an event in either event model

swapFE(phrase, pnum)
Changes a French phrase to the English version of that phrase.

swapEF(phrase, pnum)
Changes an English phrase ot the Frech version of that phrase.

setUpTranslation()
Insert the current week's french phrases into document and set up
event handlers for the phrases.

*/

function eventSource(e) {
var IE = document.all ? true:false;
var DOM = document.addEventListener ? true: false;
if (IE) return event.srcElement;
else if (DOM) return e.currentTarget;
}

function setUpTranslation () {
var phrases = document.getElementsByTagName ("p");
for (var i = 0; i < phrases.length; i++) {
phrases[i].number = i;
phrases[i].childNodes[1].innerHTML = french[i];
phrases[i].childNodes[1].style.fontStyle = "italic";
phrases[i].childNodes[1].style.color = "black";

phrases[i].onmousedown = function() {
this.childNodes[1].innerHTML = english[this.number];
this.childNodes[1].style.fontStyle = "normal";
this.childNodes[1].style.color = "rgb(155, 102, 102)";
}
phrases[i].onmouseup = function() {
this.childNodes[1].innerHTML = french[this.number];
this.childNodes[1].style.fontStyle = "italic";
this.childNodes[1].style.color = "black";
}
}
}


function swapFE(e) {
var phrase = eventSource(e);
if (IE) phrase.attachEvent("on"+ mousedown, swapFE);
else if (DOM) phrase.addEventListener(onmousedown, swapFE, false);
var phrasenum = parseInt (phrase.innerHTML.previousSibling);
phrase.innerHTML.nodeValue = english[phrasenum - 1];
phrase.style.fontStyle = "normal";
phrase.style.color = "rgb(155, 102, 102)";
}


function swapEF(e) {
var phrase = eventSource(e);
if (IE) phrase.attachEvent("on"+ mouseup, swapEF);
else if (DOM) phrase.addEventListener(onmouseup, swapEF, false);
var phrasenum = parseInt (phrase.innerHTML.previousSibling);
phrase.innerHTML.nodeValue = french [phrasenum - 1];
phrase.style.fontStyle = "italic";
phrase.style.color = "black";
}
/*
New Perspectives on JavaScript
Tutorial 10
Case Problem 1

Filename: french5.js


Variable List:
french
Contains an array of 10 english phrases

english
Contains an array of 10 French translations
*/

var english=new Array();
english[0]="This hotel isn't far from the Eiffel Tower.";
english[1]="What time does the train arrive?";
english[2]="We have been waiting for the bus for one half-hour.";
english[3]="This meal is delicious";
english[4]="What day is she going to arrive?";
english[5]="We have eleven minutes before the train leaves!";
english[6]="Living in a foreign country is a good experience.";
english[7]="Excuse me! I'm late!";
english[8]="Is this taxi free?";
english[9]="Be careful when you go down the steps.";

var french=new Array();
french[0]="Cet hôtel n'est pas loin de la Tour Eiffel.";
french[1]="A quelle heure arrive le train?";
french[2]="Nous attendons l'autobus depuis une demi-heure.";
french[3]="Ce repas est délicieux";
french[4]="Quel jour va-t-elle arriver?";
french[5]="Nous avons onze minutes avant le départ du train!";
french[6]="Habiter dans un pays étranger est une bonne expérience.";
french[7]="Excusez-moi! Je suis en retard!";
french[8]="Est-ce que ce taxi est libre?";
french[9]="Faites attention quand vous descendez l'escalier.";
/* Generated by Developer Tools. This might not be an accurate representation of the original source file */
BODY {
MARGIN: 0px
}
TABLE {
BACKGROUND-COLOR: rgb(155,102,102); WIDTH: 100%; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: white; FONT-SIZE: 11pt
}
TD {
PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px
}
TD.right {
TEXT-ALIGN: right
}
H1 {
PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px
}
H2 {
PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px
}
P {
PADDING-BOTTOM: 0px; MARGIN: 2px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
}
.pnum {
BORDER-BOTTOM: rgb(155,102,102) 1px solid; TEXT-ALIGN: right; BORDER-LEFT: rgb(155,102,102) 1px solid; BACKGROUND-COLOR: rgb(155,102,102); WIDTH: 30px; PADDING-RIGHT: 2px; COLOR: white; BORDER-TOP: rgb(155,102,102) 1px solid; MARGIN-RIGHT: 5px; BORDER-RIGHT: rgb(155,102,102) 1px solid
}
.phrase {
FONT-STYLE: italic; CURSOR: pointer
}
H1 {
MARGIN: 20px 0px 5px; FONT-SIZE: 14pt
}
H2 {
MARGIN: 5px; FONT-SIZE: 10pt; FONT-WEIGHT: normal
}




leagray107 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 10-23-2010, 05:58 AM
  #2
darksidepuffin
Absolutely Irrelephant
 
darksidepuffin's Avatar
 
Join Date: Jan 2001
Location: Nova Scotia, Canada
Posts: 5,623
iTrader: (0)
darksidepuffin is a jewel in the roughdarksidepuffin is a jewel in the roughdarksidepuffin is a jewel in the rough
Try putting the javascript between <script> tags:


Code:
<script type="text/javascript">
/*
New Perspectives on JavaScript
Tutorial 10
Case Problem 1

Author: Lea Gray
Date: 10/10/10

Filename: engfr.js
function setUpTranslation()(mEvent)
{
// swapFE
if (onMousClick)
{
;french1.htm
if (mEvent.srcElement)

}
// Netscape and Firefox
else if (mEvent.target)
{
alert(mEvent.target.nodeName);
}
}


Function List:
eventSource(e)
Returns the source of an event in either event model

swapFE(phrase, pnum)
Changes a French phrase to the English version of that phrase.

swapEF(phrase, pnum)
Changes an English phrase ot the Frech version of that phrase.

setUpTranslation()
Insert the current week's french phrases into document and set up
event handlers for the phrases.

*/

function eventSource(e) {
var IE = document.all ? true:false;
var DOM = document.addEventListener ? true: false;
if (IE) return event.srcElement;
else if (DOM) return e.currentTarget;
}

function setUpTranslation () {
var phrases = document.getElementsByTagName ("p");
for (var i = 0; i < phrases.length; i++) {
phrases[i].number = i;
phrases[i].childNodes[1].innerHTML = french[i];
phrases[i].childNodes[1].style.fontStyle = "italic";
phrases[i].childNodes[1].style.color = "black";

phrases[i].onmousedown = function() {
this.childNodes[1].innerHTML = english[this.number];
this.childNodes[1].style.fontStyle = "normal";
this.childNodes[1].style.color = "rgb(155, 102, 102)";
}
phrases[i].onmouseup = function() {
this.childNodes[1].innerHTML = french[this.number];
this.childNodes[1].style.fontStyle = "italic";
this.childNodes[1].style.color = "black";
}
}
}


function swapFE(e) {
var phrase = eventSource(e);
if (IE) phrase.attachEvent("on"+ mousedown, swapFE);
else if (DOM) phrase.addEventListener(onmousedown, swapFE, false);
var phrasenum = parseInt (phrase.innerHTML.previousSibling);
phrase.innerHTML.nodeValue = english[phrasenum - 1];
phrase.style.fontStyle = "normal";
phrase.style.color = "rgb(155, 102, 102)";
}


function swapEF(e) {
var phrase = eventSource(e);
if (IE) phrase.attachEvent("on"+ mouseup, swapEF);
else if (DOM) phrase.addEventListener(onmouseup, swapEF, false);
var phrasenum = parseInt (phrase.innerHTML.previousSibling);
phrase.innerHTML.nodeValue = french [phrasenum - 1];
phrase.style.fontStyle = "italic";
phrase.style.color = "black";
}/*
New Perspectives on JavaScript
Tutorial 10
Case Problem 1

Filename: french5.js


Variable List:
french
Contains an array of 10 english phrases

english
Contains an array of 10 French translations
*/

var english=new Array();
english[0]="This hotel isn't far from the Eiffel Tower.";
english[1]="What time does the train arrive?";
english[2]="We have been waiting for the bus for one half-hour.";
english[3]="This meal is delicious";
english[4]="What day is she going to arrive?";
english[5]="We have eleven minutes before the train leaves!";
english[6]="Living in a foreign country is a good experience.";
english[7]="Excuse me! I'm late!";
english[8]="Is this taxi free?";
english[9]="Be careful when you go down the steps.";

var french=new Array();
french[0]="Cet hôtel n'est pas loin de la Tour Eiffel.";
french[1]="A quelle heure arrive le train?";
french[2]="Nous attendons l'autobus depuis une demi-heure.";
french[3]="Ce repas est délicieux";
french[4]="Quel jour va-t-elle arriver?";
french[5]="Nous avons onze minutes avant le départ du train!";
french[6]="Habiter dans un pays étranger est une bonne expérience.";
french[7]="Excusez-moi! Je suis en retard!";
french[8]="Est-ce que ce taxi est libre?";
french[9]="Faites attention quand vous descendez l'escalier.";
/* Generated by Developer Tools. This might not be an accurate representation of the original source file */
</script>
and the CSS in style tags:

Code:
<style type="text/css">
BODY { MARGIN: 0px
}
TABLE {
BACKGROUND-COLOR: rgb(155,102,102); WIDTH: 100%; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: white; FONT-SIZE: 11pt
}
TD {
PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px
}
TD.right {
TEXT-ALIGN: right
}
H1 {
PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px
}
H2 {
PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px
}
P {
PADDING-BOTTOM: 0px; MARGIN: 2px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
}
.pnum {
BORDER-BOTTOM: rgb(155,102,102) 1px solid; TEXT-ALIGN: right; BORDER-LEFT: rgb(155,102,102) 1px solid; BACKGROUND-COLOR: rgb(155,102,102); WIDTH: 30px; PADDING-RIGHT: 2px; COLOR: white; BORDER-TOP: rgb(155,102,102) 1px solid; MARGIN-RIGHT: 5px; BORDER-RIGHT: rgb(155,102,102) 1px solid
}
.phrase {
FONT-STYLE: italic; CURSOR: pointer
}
H1 {
MARGIN: 20px 0px 5px; FONT-SIZE: 14pt
}
H2 {
MARGIN: 5px; FONT-SIZE: 10pt; FONT-WEIGHT: normal
}
</style>
You may need to add an onload handler for setUpTranslation, something like:

Code:
window.onload = setUpTranslation;
to the JavaScript section. *

* caveat: I don't really know JavaScript, so I could very well be wrong about this part, but I don't see this defined anywhere else in your code.
__________________
DarksidePuffin, Senior Moderator
Technical Development and Deployment Specialist
Subliminal Development
Current Projects: The Animal Rescue Index|CubedPuffin (blog)
darksidepuffin is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 10-23-2010, 09:45 PM
  #3
leagray107
Novice (Level 1)
 
Join Date: Oct 2010
Posts: 2
iTrader: (0)
leagray107 is an unknown quantity at this point
Thumbs up Thanks!!!

OMG! That works perfectly! I have been trying to figure that out for months and just seemed to have a block there....I'm not good at this anyway so thank you so much!!!

leagray107 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 10-23-2010, 09:52 PM
  #4
darksidepuffin
Absolutely Irrelephant
 
darksidepuffin's Avatar
 
Join Date: Jan 2001
Location: Nova Scotia, Canada
Posts: 5,623
iTrader: (0)
darksidepuffin is a jewel in the roughdarksidepuffin is a jewel in the roughdarksidepuffin is a jewel in the rough
Quote:
Originally Posted by leagray107 View Post
OMG! That works perfectly! I have been trying to figure that out for months and just seemed to have a block there....I'm not good at this anyway so thank you so much!!!

...wow...I've been a web developer for a decade, and I just answered my first JS question (I'm a Server Side Programming guru here, not a Client Side One =p). Glad to help ^^;
__________________
DarksidePuffin, Senior Moderator
Technical Development and Deployment Specialist
Subliminal Development
Current Projects: The Animal Rescue Index|CubedPuffin (blog)
darksidepuffin is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-30-2011, 03:07 AM
  #5
AA1957
Novice (Level 1)
 
Join Date: Aug 2011
Posts: 1
iTrader: (0)
AA1957 is an unknown quantity at this point
Please forgive my silly question, but...
Could you please explain the need for these two lines in the begining of the BODY section?

<DIV id="BabCorner">
</DIV>

Thank you in advance,
A.
AA1957 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-30-2011, 09:23 AM
  #6
Mandarin
Still retired
 
Mandarin's Avatar
 
Join Date: Jul 2009
Location: Michigan
Posts: 1,748
iTrader: (0)
Mandarin has a spectacular aura aboutMandarin has a spectacular aura aboutMandarin has a spectacular aura about
Quote:
Originally Posted by AA1957 View Post
Could you please explain the need for these two lines in the begining of the BODY section?

<DIV id="BabCorner">
</DIV>
That div element doesn't hold any content, it's not styled, and it doesn't seem to be referenced from JavaScript. As far as I can tell it's just an empty, invisible element that's not used for anything. Lea might have removed the corresponding styles or content because it didn't have anything to do with her question, or maybe she had future plans but hadn't implemented them yet. I don't know.

Anyway, don't hold your breath for a response from the original poster – she hasn't been on these boards for ten months.
Mandarin is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 06:16 PM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.