Your browser does not support JavaScript, which is required for this application.
Teacher Tap

Javascript Basics

I want to add some simple interactivity without a lot of coding.
I love what Flash can do, but I don't have time for a full Flash course.
I want to engage learners in information exploration.

Although many developers have shifted to the use of Flash for interactivity, the simplest way to add interactive elements is through the use of Javascripts. Rather than building the code from scratch, use Dreamweaver tools. Or, adapt existing code.

Direct Rollovers and Click to Reveals

Rollovers and click-to-reveal interactivity are an easy way to build interactivity into online lessons. Use these option to:

Direct Replace Rollovers

Rollovers are an easy way to incorporate interactivity into your online materials. In direct replace, when a student rolls over an image, it is replaced by another image.

Try the example below.

bananaRoll over the bananas to see the essential mineral found in this food.

Explore the following examples from Shaping Outcomes:

Create simple, direct rollovers using the following menus and options - Insert>Image Objects>Rollover Image in Dreamweaver. The original and replacement objects need to be the same size.

Direct Replace Click to Reveals

In direct replace when a student clicks an image it is replaced by another image.

Explore the following examples from Shaping Outcomes:

Create simple, click to reveals using the following menus and options - Insert>Image Objects>Rollover Image in Dreamweaver. The original and replacement objects need to be the same size.

Then, open the code and change the work "onmouseover" to "onclick"

CHANGE
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','incorrect.gif',1)">

TO
<a href="#" onmouseout="MM_swapImgRestore()" onclick="MM_swapImage('Image1','','incorrect.gif',1)">

Go to Enhancements: Javascipt: Transparent JavaScript with Dreamweaver from Information Architecture for the Web for step by step instructions.

Indirect Rollovers

Sometimes you want a second image to pop up somewhere else on the screen. Indirect replacement rollovers and mouseclicks work well for this approach.

Indirect Replace Rollovers

Explore the following examples from Shaping Outcomes:

Indirect Replacement Click & Reveal

With indirect replace, when a student clicks an image another image pops up somewhere else on the page. Explore the following examples from Shaping Outcomes:

The coding for this is a little more complicated. There are also a number of approaches. Open the source code on one of the pages above. Copy and adapt the source code. Or adapt the source code below:

This goes in this HEAD.

<script type="text/javascript">

if (document.images) {
image1 = new Image
image2 = new Image
image3 = new Image
image4 = new Image

image1.src = "b8mblank.gif"
image2.src = "b8_m_answer1_12.gif"
image3.src = "b8_m_answer2_12.gif"
image4.src = "b8_m_answer3_03.gif"}

</script>

This goes in the BODY:

<em>Move the cursor over the proposal icons to check your answer.</em>
<p><img src="b8m_proposal1.gif" alt="" width="385" height="44" onmouseover="document.imagename.src=image2.src" onfocus="document.imagename.src=image2.src" onmouseout="document.imagename.src=image1.src" onblur="document.imagename.src=image1.src"/></p>

<p><img src="b8m_proposal2.gif" alt="" width="331" height="28" onmouseover="document.imagename.src=image3.src" onfocus="document.imagename.src=image3.src" onmouseout="document.imagename.src=image1.src" onblur="document.imagename.src=image1.src"/></p>

<p><img src="b8m_proposal3.gif" alt="" width="403" height="43" onmouseover="document.imagename.src=image4.src" onfocus="document.imagename.src=image4.src" onmouseout="document.imagename.src=image1.src" onblur="document.imagename.src=image1.src"/></p>

<p><img src="b8mblank.gif" alt="blank answer box" longdesc="b8m_longdesc.htm" name="imagename" border="0"></p>

Pop-up Windows

Popup windows are a great way to display glossary items, additional help, examples, or other information. Thedis advantage of pop-up windows is that the "pop-up" option must be turned on in most web browsers to take advantage of this feature.

Click the word pop-up for an example.

Explore the following examples from Shaping Outcomes:

You can put the link on text or on an image.

Place the following code in the <HEAD>

<script type="text/javascript">
function openNewWindow(newPageURL)
{
window.open(newPageURL, "_blank","height=500px width=500px " +
"resizable=no scrollbars=no menubar=no location=no status=no");
}
</script>

The following code is used to open a page in a new window:

<a href="javascript:openNewWindow('a8coach.htm');"><img src="../icons/coach.gif" alt="coach" width="85" height="29" border="0" /></a>

<a href="javascript:openNewWindow('b5dig.htm');"><img src="../icons/dig.gif" alt="dig deeper" width="101" height="32" border="0" /></a>

You may wish to set your pop-up windows to a particular size.

#page {
width: 400px;
margin: 20px auto;
background:#FFFFFF;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
}

.feature{
padding: 10px 10px 10px 10px;
}

Button to close a pop-up

Pop-up windows generally contain a button to press that will close the window.

<a href="javascript:window.close()"><img src="../icons/close.gif" alt="close box" width="57" height="22" border="0" /></a>



| eduScapes | IUPUI Online Courses | Activate | 42eXplore | About Us | Contact Us | © 1999-2010 Annette Lamb, Larry Johnson, and William L. Smith