Background changes colour when mouseover on hotspot and text appears
Hi,
This is an existing code I have been working on.
The modification that I would like is that you have a big triangle and originally you roll over one segment of the triangle and a random text appears in the area next to it, no problem there but the head of Art now wants it so that you roll over an area and only ONE sample text appears, I have done this but I want to show that each statement belongs to a specific array, to do that I'd like it to have a pastel corresponding colour background, so for example I roll over a Level 3 question which on the triangle is yellow, the background of that and all Level 3 questions will be in yellow, same as Level 4 text which will have an orange background and so on.
I think that is going to be something to do with DIVS but is beyond me I'm afraid and any help would greatly be appreciated.
Many thanks,
Jay Dog
<html>
<head>
<title>Blooms Taxonomy</title>
<script language="JavaScript">
<!--
function yrandomImage() {
pic = new Array();
pic[0] = "Prepare for and participate in a debate";
pic[1] = "Hold a class trial";
pic[2] = "Evaluate a classmate's work and provide specific improvement points";
pic[3] = "Write a recommendation";
pic[4] = "Decide whether you agree or disagree with ____";
pic[5] = "Participate in a class discussion by providing feedback to classmates";
pic[6] = "Rank items, events, figures, etc. and explain your decision making";
pic[7] = "Evaluate your own work and justify the grade";
pic[8] = "Given opinions, choose the best one";
pic[9] = "Prove something by showing work or finding evidence";
pic[10] = "Defend a person's actions or words";
pic[11] = "Create a score card or work out a grading system";
randomNum = Math.floor(Math.random()*pic.length);
return pic[randomNum];
}
// -->
<!--
function brandomImage() {
pic = new Array();
pic = new Array();
pic[0] = "Rewrite your work from someone else's perspective";
pic[1] = "Create a game based around the concept or subject";
pic[2] = "Invent something new to solve a specific problem";
pic[3] = "Improve your own (or a classmate's) existing essay, project, etc.";
pic[4] = "Create an equation for the provided solution";
pic[5] = "Combine what we've learned into a 10 word summary";
pic[6] = "Conduct an experiment to test ____";
pic[7] = "Build a device to solve the problem at hand";
pic[8] = "Create an original text (i.e. poem, story, article etc.)";
pic[9] = "Create a hypothetical situation and what would happen if...";
pic[10] = "Create a study guide";
pic[11] = "Estimate the answer and explain how you did it";
pic[12] = "Compile everything we've learned on this topic into a 60 second sketch";
randomNum = Math.floor(Math.random()*pic.length);
return pic[randomNum];
}
// -->
<!--
function vrandomImage() {
pic = new Array();
pic[0] = "Revise your work based on what you now know";
pic[1] = "Complete a cumulative project";
pic[2] = "Write interview questions for a character, historical figure etc. Now answer them";
pic[3] = "Examine a text, situation, or equation from a different perspective";
pic[4] = "Solve a puzzle or riddle";
pic[5] = "Solve the problem";
pic[6] = "Draw a map";
pic[7] = "Conduct an experiment";
pic[8] = "Use something from a different subject to help in this one";
pic[9] = "Plan steps to tackle a problem";
pic[10] = "Turn your outline into the finished product (i.e. essay, project, etc.";
randomNum = Math.floor(Math.random()*pic.length);
return pic[randomNum];
}
// -->
<!--
function rrandomImage() {
pic = new Array();
pic[0] = "Summarize the text or new material";
pic[1] = "Make a filmstrip";
pic[2] = "Interpret analogies";
pic[3] = "Write test questions for your classmates";
pic[4] = "Simplify the content for someone who does not understand it";
pic[5] = "Predict what might or could happen next";
pic[6] = "Explain a graph or chart to someone who cannot see it";
pic[7] = "Outline a plan for an essay, experiment, or project";
pic[8] = "Write directions for solving the problem";
pic[9] = "Sort various items words, etc. Into categrioes";
pic[10] = "Write a story or article based on what you just learned";
pic[11] = "Draw a graph";
pic[12] = "Act out or write a sketch";
pic[13] = "Rewrite a text in your own words";
pic[14] = "Explain pictures or other images";
pic[15] = "Find or write the main idea for a text";
randomNum = Math.floor(Math.random()*pic.length);
return pic[randomNum];
}
// -->
<!--
function grandomImage() {
pic = new Array();
pic[0] = "Choose which parts were the most difficult for you";
pic[1] = "Explain why something is persuasive";
pic[2] = "Give a classmate feedback on their work";
pic[3] = "Explain what would happen if ____ changed";
pic[4] = "Determine which pieces of evidence are strongest for an argument";
pic[5] = "Determine the cause/effect relationship of different evenets and occurences";
pic[6] = "Complete a Venn diagram or Y chart for 2+ items";
pic[7] = "Break large pieces of information into categories";
pic[8] = "Determine what is 'most' similar or different about these";
pic[9] = "Reflect on the results; pinpoint strong and weak points of your work";
pic[10] = "Make a plan to teach this to someone who is unfamilar with it";
pic[11] = "Infer something based upon evidence";
randomNum = Math.floor(Math.random()*pic.length);
return pic[randomNum];
}
// -->
<!--
function orandomImage() {
pic = new Array();
pic[0] = "Read an article or section of text and present to the class";
pic[1] = "Match definitions to their words";
pic[2] = "Jigsaw articles or chapters outloud together";
pic[3] = "Draw a picture";
pic[4] = "Write down everything you can remember on the topic for the next 30 seconds";
pic[5] = "Play 20 Questions";
pic[6] = "Label a map or Diagram";
pic[7] = "Recall key facts on exit tickets or quizzes";
pic[8] = "Match people or characters to their features, quotes and accomplishments";
pic[9] = "Rearrange items in sequential order";
pic[10] = "Complete a content specific crossword";
pic[11] = "Write the answers to teachers questions on individual whiteboards";
pic[12] = "Complete a storyboard or plot map";
pic[13] = "Fill out a timeline";
pic[14] = "Play ‘Mastermind’ on this subject for 30 seconds";
randomNum = Math.floor(Math.random()*pic.length);
return pic[randomNum];
}
// -->
<!--
function tools() {
pic = new Array();
pic = new Array();
pic[0] = "Jeff Capes";
randomNum = Math.floor(Math.random()*pic.length);
return pic[randomNum];
}
// -->
</script>
<style type="text/css">
.arial {
font-family: Arial, Helvetica, sans-serif;
}
.arial {
font-family: Arial;
}
body {
background-color: #b42020;
}
</style>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=5)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
</tbody>
<tbody>
<tr>
<td width="45%" height="377" rowspan="4" align="center" valign="middle"><img src="triangle.png" name="myImage0" border="0" usemap="#myImage0Map"></td>
<td height="113" colspan="2" align="left" valign="middle"><img src="actionhead.png"></td>
<td width="44%" align="left" valign="middle"><b><font size="5" color="#FFFFFF">Lesson Activities</font></b></td>
</tr>
<tr>
<td width="1%" align="left" valign="middle"> </td>
<td height="30" colspan="3" align="left" valign="middle"><div id="myText1" onMouseOver="this.innerHTML = yrandomImage();"><strong><font size=5>Evaluation</font></strong></div></td>
</tr>
<tr>
<td height="145" colspan="3" align="left" valign="middle"> </td>
</tr>
<tr>
<td colspan="4" align="left" valign="middle"> </td>
</tr>
</tbody>
<tbody>
</tbody>
</table>
<map name="myImage0Map">
<area shape="poly" coords="278,124,211,8,146,123" href="#" onMouseOver="document.getElementById('myText1').innerHTML = yrandomImage();">
<area shape="poly" coords="317,187,283,128,143,129,109,187" href="#" onMouseOver="document.getElementById('myText1').innerHTML = brandomImage();">
<area shape="poly" coords="350,249,319,193,105,191,71,250" href="#" onMouseOver="document.getElementById('myText1').innerHTML = grandomImage();">
<area shape="poly" coords="389,313,354,256,67,255,36,312" href="#" onMouseOver="document.getElementById('myText1').innerHTML = vrandomImage();">
<area shape="poly" coords="419,371,393,317,32,318,0,371" href="#" onMouseOver="document.getElementById('myText1').innerHTML = rrandomImage();">
</map>
</body>
</html>
CSS Codes
Reply With Quote
Thank you once again!
Bookmarks