Results 1 to 4 of 4

Thread: Background changes colour when mouseover on hotspot and text appears

  1. #1
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default 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">&nbsp;</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">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="4" align="left" valign="middle">&nbsp;</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>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
        <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];
        }
    
        function rollover(f,c) {
         var obj=document.getElementById('myText1');
         obj.innerHTML=f();
         obj.style.backgroundColor=c;
       }
        // -->
    
        </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" width="45%" height="377"></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">&nbsp;</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">&nbsp;</td>
        </tr>
        <tr>
        <td colspan="4" align="left" valign="middle">&nbsp;</td>
        </tr>
        </tbody>
        <tbody>
        </tbody>
        </table>
        <map name="myImage0Map">
        <area shape="poly" coords="278,124,211,8,146,123" href="#" onMouseOver="rollover(yrandomImage,'#FFFF66');">
        <area shape="poly" coords="317,187,283,128,143,129,109,187" href="#" onMouseOver="rollover(brandomImage,'#FF9966');">
        <area shape="poly" coords="350,249,319,193,105,191,71,250" href="#" onMouseOver="rollover(grandomImage,'#FF33FF');">
        <area shape="poly" coords="389,313,354,256,67,255,36,312" href="#" onMouseOver="rollover(vrandomImage,'#3333CC');">
        <area shape="poly" coords="419,371,393,317,32,318,0,371" href="#" onMouseOver="rollover(rrandomImage,'#339966');">
        </map>
        </body>
        </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    You Sir, are a STAR!!!

    Thank you very much but there is just one other thing, how can I chnage the size of the font when you rollover the text so that it's all font size=5, I'm experimenting with it now and I guess it's a pretty simple thing to do but only if you know how! Thank you once again!

  4. #4
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    Sorted it... had a play about with it and I realised that all I'd done was put the FONT command inside the DIV bit and not the FONT bit outside it, works prefectly, many thanks!

Similar Threads

  1. On Mouseover help message appears
    By Mozie in forum Looking for such a script or service
    Replies: 2
    Last Post: 04-13-2007, 01:12 PM
  2. Tabs Menu (mouseover) how to include search so on mouseover form appears
    By parthatel in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-11-2006, 05:38 PM
  3. Replies: 0
    Last Post: 11-11-2006, 05:38 PM
  4. Picture appears on text mouseover
    By MTD in forum JavaScript
    Replies: 1
    Last Post: 08-18-2006, 12:58 AM
  5. mouseover image appears in new frame
    By mamarockstar in forum JavaScript
    Replies: 0
    Last Post: 08-24-2005, 04:11 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •