954,600 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Urgent Help: onMouseOver Font size

i need to make a paragraph of text identified by a grow in size when the user moves their mouse if that portion of text. I Guess it needs to use onMouseOver and getElementById but i not sure what else is needed, i have trawled the internet for the best part of an hour trying to solve this problem, but then deided to ask you guys how to solve this issue. This needs to be done using javascript(obviously)

Can you help?

This is the HTML page

<html>
<head>
<title>JavaScript and CSS</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
function fontGrow()
{
	document.getElementById("mainContent").fontSize="24";
}
</script>
<body>
<div id="container">
<div id="banner"></div>
<div id="mainContent" onMouseOver="fontGrow()"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien  quam, rhoncus at placerat ut, scelerisque in risus. Integer metus nibh,  commodo et feugiat mollis, rhoncus in ante. Nam ultrices lorem sed  lectus ultricies gravida. Proin nec libero ac enim varius placerat a ut  lectus. Donec in lorem et est molestie porttitor a eget sem.  Pellentesque sit amet erat id lectus fermentum tristique a vitae erat.  Proin eu augue ac libero euismod tempor gravida sed orci. Nunc egestas  mollis mauris quis ullamcorper. Cum sociis natoque penatibus et magnis  dis parturient montes, nascetur ridiculus mus. Fusce id ante dui,  egestas sagittis leo. Nunc posuere, erat nec facilisis vehicula, erat  tellus condimentum libero, ut condimentum magna ligula ut metus. Donec  rutrum adipiscing aliquam. Curabitur vehicula libero eu felis hendrerit  sollicitudin. </p>
</div>
<div id="footer">

<SCRIPT>
document.write(Date())
</SCRIPT>

</div>
</div>
</body>
</html>


This is the CSS File

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #EBEBEB;
	margin: 0;
	padding: 0;
	text-align: center; 
	color: #000000;
}

#container { 
	width: 100%;
	text-align: left; 
}

#banner {
	width: 100%;
	height:50px;
	background-image:url(../../../Pictures/Wallpapers/World%20of%20Warcraft.jpg);
	background-color:#06F;
}

#mainContent {
	width:100%;
	background-color:#CCC;
	text-align:center;
	font-size:12px;
}

#footer {
	width:100%;
	background-color:#06F;
	height:50px;
	text-align:center;
}
Atomika3000
Light Poster
40 posts since Apr 2009
Reputation Points: 10
Solved Threads: 0
 

Your code looks okay. I think you need to specify the fontSize="24" as a point or pixel or something. Like fontSize="24pt"; I didn't try this, but your code looks fine.

harrierdh
Junior Poster in Training
62 posts since Dec 2009
Reputation Points: 10
Solved Threads: 13
 

I solved it, had to put the onmouseover inside the tag

Atomika3000
Light Poster
40 posts since Apr 2009
Reputation Points: 10
Solved Threads: 0
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: