Menu
Community /Pin to ProfileBookmark
Javascript to change font from pulldown menu
I have got this far in the HTML file:
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>P7_1</title>
<script type=”text/javascript” language=”JavaScript” src=”P7.js”>
</script>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”P7.css” />
</head>
<body>
<h4>France, a beautiful and historical country…</h4>
<div id=”france” style=”width:70%; text-align:justify”>
France is the largest country of Western Europe in area. It covers about 213,000 square miles (552,000 square kilometers).
<br /><br />
Paris, the capital and largest city of France, is one of the world’s great cities. A world capital of art and learning. Every year, millions of tourists visit such famous Paris landmarks as the Cathedral of Notre Dame, the Eiffel Tower, and the Louvre – one of the largest art museums in the world.
<br /><br />
There is much more to France than just Paris, however. The snow-capped Alps form the border between France and Italy. Sunny beaches and steep cliffs stretch along the French coast on the Mediterranean Sea. Fishing villages dot the Atlantic coast of northwestern France. The peaceful, wooded Loire Valley has many historic chateaux. Colorful apple orchards, dairy farms, and vineyards lie throughout much of the countryside.
<br /><br />
France has a long and colorful history. Julius Caesar conquered the region. When Rome fell, the Franks and other Germanic tribes invaded the region. France was named for the Franks. By the A.D. 800’s, the mighty Charlemagne, king of the Franks, had built the area into a huge kingdom. In 1792, during the French Revolution, France became one of the first nations to overthrow its king and set up a republic. Napoleon Bonaparte conquered much of Europe before he finally was defeated.
<br /><br />
France is not only a beautiful and historic country, it is also one of the worlds richest and most powerful countries. France has great automobile, chemical, and steel industries.
</div>
<form id=”fontform” action=”someaction.cgi” style=”position:absolute; left:750px; top:50px”>
<!– selection pull down menu –>
<select name=”fontchanger” …>
<option value=”Font”>choose a font</option>
<option value=”Courier”>Courier New</option>
<option value=”Garamond”>Garamond</option>
<option value=”Tahoma”>Tahoma</option>
</select>
<br /><br /><br /><br /><br />
<select name=”choosefont” …>
<option value=”Fontsize”>choose a font size</option>
<option value=”fontsmall”>small</option>
<option value=”fontmedium”>medium</option>
<option value=”fontlarge”>large</option>
</select>
</form>
</body>
</html>
What I have to do is, from the select boxes shown below in the screenshot; one for size and one for font, when a font is chosen from the pulldown menu, the text in the paragraph changes to that respective font/size.
[img]
I think in the javascript file that a case statement may work, and the onchange handler, but I have no idea how to implement it. Also I have to do all the formatting in a CSS file too.
The fonts are courier new, tahoma and garamond. The text sizes are 12, 14 and 16.(small, medium & large).
If anyone knows how I can do the javascript then I would be most grateful – I’m basically useless when it comes to javascript.
Thanks
Rick
Sign in
to post a comment