Announcement

Collapse
No announcement yet.

[RESOLVED] Need Help Badly!! HTML CSS JS

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [RESOLVED] 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&#244;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&#233;licieux";
    french[4]="Quel jour va-t-elle arriver?";
    french[5]="Nous avons onze minutes avant le d&#233;part du train!";
    french[6]="Habiter dans un pays &#233;tranger est une bonne exp&#233;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
    }





  • #2
    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
    "It's the bucket o' nothing, for only 99,99,99!"

    Comment


    • #3
      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!!!

      Comment


      • #4
        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
        "It's the bucket o' nothing, for only 99,99,99!"

        Comment


        • #5
          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.

          Comment


          • #6
            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.

            Comment

            Working...
            X