MouseOver Image and Collapsible/Expandable List





<html><head><title>Lynne Michaud's MouseOver Image and Collapsible List</title>
<style>
<!--

hr{
color:black;
width:100%;
}

#arrowdown{
position:absolute; right:1px; top:20px;
border-style:inset; border- width:20px; background:orange;

}

#arrowup{
position:absolute; right:1px; top:1500px;
border-style:inset; border- width:20px; background:orange;
}

h1 {
text-align:center;
text-decoration: bold;
font-size:50pt;
font-family: arial;
height: 20pt;
filter:glow(color:#FF6600 strength:20);
}

#sidebar {
width:100%;
float:center;
font-size:14pt;
color:black;
background: orange;
border-style:outset;
border-width:10px;
padding:15px;
text-align:justify;
}
-->
</style>
<script type="text/javascript" language="JavaScript" >
<!-- Code for collapsible list
Nav4=(document.layers)?1:0;
IE4=(document.all)?1:0;
ver4=(Nav4 || IE4)?1:0;

function scrollit(tx) {
if (document.scrollText == null) {
document.scrollText = "";
for (i = 0; i < 75; i++) {
document.scrollText = document.scrollText + " ";
}
document.scrollText = document.scrollText + tx;
document.scrollNum = 0;
document.scrollMsg = "";
document.scrollGo = "1";
}
if (document.scrollText != null && document.scrollGo == "1") {
for (k = document.scrollNum; k < document.scrollText.length; k++) {
document.scrollMsg = document.scrollMsg + document.scrollText.charAt(k);
}
window.status = document.scrollMsg;
document.scrollNum++;
document.scrollMsg = "";
}
if (document.scrollNum == document.scrollText.length) {
document.scrollText = null;
}
ab1 = window.setTimeout("scrollit ('"+ tx +"');", 50);
}

function changeText(whichQuestion) {
if (Nav4) {return}
else {
whichQuestion.style.fontSize="16pt";
whichQuestion.style.color="#9400D3";
}
}

function changeTextBack(whichQuestion) {
if (Nav4) {return}
else {
whichQuestion.style.fontSize="12pt";
whichQuestion.style.color="#000000";
}
}

function reDo(){
window.location.reload()
}

function getIndex(el) {
ind=null;
for (i=0; i<document.layers.length; i++) {
whichEl=document.layers [i];
if (whichEl.id==el) {
ind=i;
break;
}
}
return ind;
}

function arrange() {
nextY=document.layers [firstInd].pageY + document.layers [firstInd].document.height-10;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl=document.layers [i];
if (whichEl.visibility != "hide") {
whichEl.pageY=nextY;
nextY += whichEl.document.height-10;
}
}
}

function initIt(){
if (Nav4) {
for (i=0; i<document.layers.length; i++) {
whichEl=document.layers[i];
if (whichEl.id.indexOf("Desc") != -1) {
whichEl.visibility="hide";
whichEl.isExpanded=false;
}
}
arrange();
}
else {
tempColl=document.all.tags("div");
for (i=0; i<tempColl.length; i++) {
if (tempColl (i).className == "def") {
tempColl (i).style.display="none";
tempColl (i).isExpanded=false;
}
}
}
}

function expandIt(el) {
if (!ver4) return;
if (IE4) {
expandIE(el)
}
else {
expandNav(el)
}
}

function expandIE(el) {
whichEl=eval(el + "Def");
if (whichEl.style.display == "none") {
whichEl.style.display="block";
whichEl.isExpanded=true;
}
else {
whichEl.style.display="none";
whichEl.isExpanded=false;
}
}

function expandNav(el) {
whichEl=eval("document." + el + "Def");
if (whichEl.visibility == "hide") {
whichEl.visibility="show";
whichEl.isExpanded=true;
}
else {
whichEl.visibility="hide";
whichEl.isExpanded=false;
}
arrange();
}

function showAll() {
for (i=firstInd; i<document.layers.length; i++) {
whichEl=document.layers [i];
whichEl.visibility="show";
}
}

if (document.images) {
img1on = new Image();
img1on.src = "Wadleigh Profile.jpg";
img2on = new Image();
img2on.src = "home.gif";
img3on = new Image();
img3on.src = "bulletinboard.gif";
img4on = new Image();
img4on.src = "thumbs up.jpg";

img1off = new Image();
img1off.src = "pawprint.gif";
img2off = new Image();
img2off.src = "homeic.gif";
img3off = new Image();
img3off.src = "mypic.jpg";
img4off = new Image();
img4off.src = "camera.jpg";
}

function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval (imgName + "on.src");
}
}

function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval (imgName + "off.src");
}
}

with (document) {
write("<style TYPE='text/css'>");
if (Nav4) {
write(".term {position: absolute; visibility: hidden; left: 40px; top: 550px}");
write(".def {position: absolute; visibility: hidden; left: 50px; width: 450px}");
write(".rest {position: absolute; visibility: hidden; left: 25px}");
}
else {
write(".term {position: relative; left: 40px}");
write(".def {display: none; position: relative; left: 50px; width: 450px}");
write(".rest {position: relative; left: 25px}");
}
write("</style>");
}

window.onload=initIt;
-->
</script>


</head>

<body onload="scrollit('Learn something new every day!');" bgcolor="palegoldenrod">

<a name="top">

<div align=center>
<h1>WEB I Rulz!!!</h1></div>

<h3><b>
<script language="JavaScript">
<!--Hide From Non-JavaScript Browsers
var today_date= new Date()
var month=today_date.getMonth()+1
var today=today_date.getDate()
var year=today_date.getYear()
document.write("Today's date is: ")
document.write(month+"/"+today+"/"+year)
Stop Hiding-->
</script></div>



<hr>

<br><br>

<div id="arrowdown">
<a href="#bottom"><img src="ArrowDown.ico"></a></div>


<div id="sidebar">
This is a sample division of text. Although document layout tools for traditional media, such as posters and magazines, allow precise placement of page elements, HTML lacks such tools for Web page design. However, DHTML alows precise positioning of page elements through an extension of cascading style sheets called <b> Cascading Style Sheets Positioning (CSSP)</b>. CSSP allows you to position elements either absolutely, at fixed coordinates on a user's screen, or relatively, based on the psotion of other screen elements. CSSP makes the task easier to code than basic HTML. As you research CSSP, you learn about several features, including columns, overlapping, and scripted effects, that you would like to include in your WEb pages. DHTML style properties allows you to specify an element's dimensions using the height and width properties. You can specify the two dimensions separately by using the same units available for the positioning properties. Additionally, you can size the element relative to its parent by using percentages. If you choose not to specify the height or the width, the browser sizes the element automatically. </div>

<h1>Links that change images</h1>

<a href = "mypets.htm" onMouseOver = "imgOn('img1')" onMouseOut = "imgOff ('img1')" class="linktxt" style="color:green;">
<img name= "img1" border ="3" height ="65" width ="65" src ="pawprint.gif">My Pets</a>

<br />

<a href = "mycamp.htm" onMouseOver = "imgOn('img2')" onMouseOut = "imgOff ('img2')" class="linktxt">
<img name= "img2" border ="3" height ="65" width ="65" src ="home.gif">My Camp</a>

<br />

<a href = "schedule.htm" onMouseOver = "imgOn('img3')" onMouseOut = "imgOff ('img3')" class="linktxt" style="color:#A52A2A">
<img name= "img3" border ="3" height ="65" width ="65" src = "mypic.jpg">Schedule</a>

<br />

<a href = "index.htm" onMouseOver = "imgOn('img4')"onMouseOut = "imgOff ('img4')" class="linktxt" style="color:black">
<img name= "img4" border ="3" height ="65" width = "65" src = "camera.jpg">Flash Applications</a>

<br />

</div>
<br><br>
<hr>
<div id="terms">
<h1>Expandable/Collapsible List</h1>
<br />

<h2>Click the vocabulary terms for our DHTML lesson:</h2>


<div id="oneTerm" class="term">
<P><a href="#" onClick="expandIt('one'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack (this)">DHTML</a></P>
</div>

<div id="oneDef" class="def">
<P>A combination of HTML, style sheets, and scripts that allow Web documents to interact with the user and to be animated or changed in response to user and browser events without needing to access the server.</P>

</div>

<div id="twoTerm" class="term">
<P><a href="#" onClick="expandIt('two'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Static HTML</P></a>
</div>

<div id="twoDef" class="def">
<P>Web page code that provides limited interactivity based on hyperlinks to open other pages or generate new e-mail messages.</P>
</div>

<div id="threeTerm" class="term">
<P><a href="#" onClick="expandIt('three'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Dynamic Content</P></a>
</div>

<div id="threeDef" class="def">
<P>DHTML-based pages in which styles change instantly based on user actions and can allow users to modify a page's content--can be used to generate all or part of the page in response to events.</P>
</div>

<div id="fourTerm" class="term">
<P><a href="#" onClick="expandIt('four'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Data Awareness</P></a>
</div>

<div id="fourDef" class="def">
<P>Condition that allows pages to display data from an outside source and that allows users to manipulate and change linked information directly in the browser window.</P>
</div>

<div id="fiveTerm" class="term">
<P><a href="#" onClick="expandIt('five'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Proprietary Features</a></P>
</div>

<div id="fiveDef" class="def">
<P>Unique elements and attributes that are written for specific browsers; generally supports by only one of the major browsers; most useful in single-browser settings, such as intranets where all users run the same browser.</P>
</div>

<div id="sixTerm" class="term">
<P><a href="#" onClick="expandIt('five'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Data Binding</a></P>
</div>

<div id="sixDef" class="def">
<P>Linking a Web page to an external data file which allows a Web page to load all the records from a database but display only some of them or to access a record instantly and manipulate it without downloading more information to the browser.</P>
</div>

<div id="sevenTerm" class="term">
<P><a href="#" onClick="expandIt('five'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Object Hierarchy</a></P>
</div>

<div id="sevenDef" class="def">
<P>A tree structure that allows designers to access object properties and methods by describing the object path from the topmost object, window, down through the object tree.</P>
</div>

<div id="eightTerm" class="term">
<P><a href="#" onClick="expandIt('five'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Expandable Outlines</a></P>
</div>

<div id="eightDef" class="def">
<P>DHTML feature that allows you to hide and show information based upon user action.</P>
</div>

<div id="nineTerm" class="term">
<P><a href="#" onClick="expandIt('five'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Collapsible List</a></P>
</div>

<div id="nineDef" class="def">
<P>Table of contents created using a combination of CSS and scripting that is designed as an expandable outline in which users can click a main topic to show related subtopics and click again to hide subtopics.</P>
</div>

<div id="tenTerm" class="term">
<P><a href="#" onClick="expandIt('five'); return false" onMouseOver="changeText (this)" onMouseOut="changeTextBack(this)">
Rollover</a></P>
</div>

<div id="tenDef" class="def">
<P>A popular DTHML application that changes the appearance of text or swaps one graphic for another when the user points to the text or image.</P>
</div>

<div id="arrowup">
<a href="#top"><img src="ArrowUp.ico"></a></div>
<a name="bottom">

</body >
</html>