PDA

View Full Version : [RESOLVED] Need Help Badly!! HTML CSS JS


leagray107
10-23-2010, 01:11 AM
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
} :(
:o
:mad:
:crying:
:confused:

darksidepuffin
10-23-2010, 06:58 AM
Try putting the javascript between <script> tags:



<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:


<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:


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.

leagray107
10-23-2010, 10:45 PM
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!!!

:):cool::P:D:o

darksidepuffin
10-23-2010, 10:52 PM
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!!!

:):cool::P:D:o

...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 ^^;

AA1957
08-30-2011, 04:07 AM
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.

Mandarin
08-30-2011, 10:23 AM
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.