HTML:Text won't change on mouseover function

  I want the text to change from 12 to 18 font on mouseover. I have been over this in detai, with no luck:

<html>
<head>
<title>Frequently Asked Questions</title>
<script type="text/javascript" language="JavaScript">
<!--

function init(){
            tempColl=document.all.tags("div");
            for (i=0; i<tempColl.length; i++) {
                  if (tempColl(i).className == "answer") {
                        tempColl(i).style.display="none";
                        tempColl(i).expanded=false;
                  }
            }
      }

function expand(el) {
      theEl=eval(el + "answer");
      if (theEl.style.display == "none") {
            theEl.style.display="block";
            theEl.expanded=true;
      }
      else {
            theEl.style.display="none";
            theEl.expanded=false;
      }
}

with (document) {
      write("<style type='text/css'>");
      write(".question {position: relative; left: 40px}");
      write(".answer {display: none; position: relative; left: 50px; width: 90%}");
      
      write("</style>");
}
            
window.onload=init;

function changeText (whichQuestion) {

        whichQuestion.style.fontsize="32pt";
            whichQuestion.style.color="#0066FF";
}
function changeTextBack (whichQuestion) {

        whichQuestion.style.fontsize="12pt";
            whichQuestion.style.color="#000066";
}            
//-->
</script>

<style type="text/css">
<!--
body {font-family: Arial, sans serif; color: #000066;
}
h1 {font-family: Lucida Calligraphy, serif;
}
h2 {font-family: "times new roman", times, serif; font-size: 14pt; font-style: italic}
h3 {font-family: arial; font-size: 12pt; color: #0066FF; position: relative; left: 20px; top: -10px}
.question {font-family: "times new roman", times, serif; font-size: 12pt; font-weight: bold}
.question a {font-family: arial; font-size: 12pt; font-weight: bold; text-decoration: none; color: black}
.rest {position: absolute; left: 25px}
//-->
</style>

</head>

<body>


<h1>Frequently asked Questions </h1>


<h3>Click any of the questions below to see how Bits and PCs can fill your computer needs.</h3>

<div id="oneQuestion" class="question"><p><a href="#" onClick="expand('one'); return false" onMouseOver="changeText(this);" onMouseOut="changeTextBack(this);">
What is the turnaround time for virus removal?</a></p></div>

<div id="oneanswer" class="answer"><p>Viruses are removed in your home by our technicians within 24 hours.</p></div>

<div id="twoQuestion" class="question"><a href="#" onClick="expand('two'); return false" onMouseOver="changeText(this);" onMouseOut="changeTextBack(this);">
How is Bits and PCs different from other computer repair companies?</p></a></div>

<div id="twoanswer" class="answer"><p>At Bits and PCs the customer is always first. We offer service 24/7 and we are available on all holidays. </p></div>

<div id="threeQuestion" class="question"><a href="#" onClick="expand('three'); return false" onMouseOver="changeText(this);" onMouseOut="changeTextBack(this);">
What services do your technicians provide?</p></a></div>

<div id="threeanswer" class="answer"><p>Our technicians offer wireless LAN setup, software installation, data backup and recovery, and printer service. </p></div>

<div id="fourQuestion" class="question"><a href="#" onClick="expand('four'); return false" onMouseOver="changeText(this);" onMouseOut="changeTextBack(this);">
What types of equipment do you service?</p></a></div>

<div id="fouranswer" class="answer"><p>We service computers and all other office machines.</p></div>

<br /> <br />
<div id="itemRest" class="rest">More questions? Email <a href="mailto:StephenGamble@bitspcs.com">Stephen Gamble</a></div>



</body>
</html>
gamblsjAsked:
Who is Participating?
 
askurat1Commented:
The change I made was to the start of your paragraphs for your questions, you forgot <p> in front of all of them except for the first one.
0
 
askurat1Commented:
try taking out the pt next to the number in your javascript:
whichQuestion.style.fontsize="32"

Open in new window

0
 
askurat1Commented:
Also when using fontsize() it goes from 1 to 7.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
gamblsjAuthor Commented:
I removed pt, but still no change. The color changes but the text does not.
0
 
askurat1Commented:
I found your mistake:
<html>
<head>
<title>Frequently Asked Questions</title>
<script type="text/javascript" language="JavaScript">
<!--

function init(){
            tempColl=document.all.tags("div");
            for (i=0; i<tempColl.length; i++) {
                  if (tempColl(i).className == "answer") {
                        tempColl(i).style.display="none";
                        tempColl(i).expanded=false;
                  }
            }
      }

function expand(el) { 
      theEl=eval(el + "answer");
      if (theEl.style.display == "none") {
            theEl.style.display="block";
            theEl.expanded=true;
      }
      else {
            theEl.style.display="none";
            theEl.expanded=false;
      }
}

with (document) {
      write("<style type='text/css'>");
      write(".question {position: relative; left: 40px}");
      write(".answer {display: none; position: relative; left: 50px; width: 90%}");
      
      write("</style>");
}
            
window.onload=init;

function changeText (whichQuestion) {

        
whichQuestion.style.fontSize="22";
           whichQuestion.style.color="#0066FF";
}
function changeTextBack (whichQuestion) {
whichQuestion.style.fontSize="16";
           whichQuestion.style.color="#000066";
}            
//-->
</script>

<style type="text/css">
<!--
body {font-family: Arial, sans serif; color: #000066;
}
h1 {font-family: Lucida Calligraphy, serif; 
} 
h2 {font-family: "times new roman", times, serif; font-size: 14pt; font-style: italic} 
h3 {font-family: arial; font-size: 12pt; color: #0066FF; position: relative; left: 20px; top: -10px}
.question {font-family: "times new roman", times, serif; font-size: 12pt; font-weight: bold}
.question a {font-family: arial; font-size: 12pt; font-weight: bold; text-decoration: none; color: black}
.rest {position: absolute; left: 25px}
//-->
</style>

</head>

<body>


<h1>Frequently asked Questions </h1>
<p>This is my fabulous text that will change.</p>

<h3>Click any of the questions below to see how Bits and PCs can fill your computer needs.</h3>

<div id="oneQuestion" class="question"><p><a href="#" id="hey" onClick="expand('one'); return false" onMouseover="changeText(this);" onMouseOut="changeTextBack(this);"> What is the turnaround time for virus removal?</a></p></div>
<div id="oneanswer" class="answer"><p>Viruses are removed in your home by our technicians within 24 hours.</p></div>

<div id="twoQuestion" class="question"><p><a href="#" onClick="expand('two'); return false" onMouseOver="changeText(this);" onMouseOut="changeTextBack(this);"> How is Bits and PCs different from other computer repair companies?</p></a></div>
<div id="twoanswer" class="answer"><p>At Bits and PCs the customer is always first. We offer service 24/7 and we are available on all holidays. </p></div>

<div id="threeQuestion" class="question"><p><a href="#" onClick="expand('three'); return false" onMouseOver="changeText(this);" onMouseOut="changeTextBack(this);"> What services do your technicians provide?</p></a></div>
<div id="threeanswer" class="answer"><p>Our technicians offer wireless LAN setup, software installation, data backup and recovery, and printer service. </p></div>

<div id="fourQuestion" class="question"><p><a href="#" onClick="expand('four'); return false" onMouseOver="changeText(this);" onMouseOut="changeTextBack(this);"> What types of equipment do you service?</p></a></div>
<div id="fouranswer" class="answer"><p>We service computers and all other office machines.</p></div>

<br /> <br />
<div id="itemRest" class="rest">More questions? Email <a href="mailto:StephenGamble@bitspcs.com">Stephen Gamble</a></div>



</body>
</html>

Open in new window

0
 
gamblsjAuthor Commented:
It's always something I should have not missed...Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.