Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

HTML:Text won't change on mouseover function

Posted on 2011-05-03
6
Medium Priority
?
258 Views
Last Modified: 2013-11-19
  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>
0
Comment
Question by:gamblsj
  • 4
  • 2
6 Comments
 
LVL 8

Expert Comment

by:askurat1
ID: 35516154
try taking out the pt next to the number in your javascript:
whichQuestion.style.fontsize="32"

Open in new window

0
 
LVL 8

Expert Comment

by:askurat1
ID: 35516164
Also when using fontsize() it goes from 1 to 7.
0
 

Author Comment

by:gamblsj
ID: 35516181
I removed pt, but still no change. The color changes but the text does not.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 8

Expert Comment

by:askurat1
ID: 35516599
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
 
LVL 8

Accepted Solution

by:
askurat1 earned 2000 total points
ID: 35516611
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
 

Author Closing Comment

by:gamblsj
ID: 35516695
It's always something I should have not missed...Thanks.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question