Get those "if" statements right

A common mistake when using else and else if statements is to use s single equal sign ( = ) instead of( == ). Using only one = sign will set the variable to the value e.g. x=3. If you use the syntax: if(x=3) {} the variable x will incorrectly be set x to 3. By using if(x==3){} you are asking, "does the value of x equal 3." Here is an example.

Using if(aVar='x'), we have incorrectly set aVar to 'x'. We did not have a proper comparison of aVar and 'x'. Any use of aVar in a later part of the code will be incorrectly set to 'x'

aVar='x';
if(aVar='y')
{
alert("incorrect result");
}

Using the correct syntax with two equal signs, if(aVar=='x'), we have compared aVar 'x' to 'y'.

avar=='x';
if(aVar=='y')
{
nothing will happen here because the x and y are different.
}
else
{
alert('The if condition compared 'x' to 'y' and the result was correct');
}

Javascript: Rollover Text

Add Rollovers to your website to display content that is hidden from view until it is needed. Rollovers allow you to display information when your visitor moves the cursor over a spefic image or text. Here is an example showing a menu of three items. Put your cursor over any of the menu items and watch how information about the menu item is displayed.

Menu Name 1
Menu Name 2
Menu Name 3




function changeDisplay(id,aview) {
document.getElementById(id).style.display=aview;
}


function delayMenu(select) {
if(select==1)
{
   timer1=setTimeout("changeDisplay('name1','block')", 100);
    }
    else if(select==2)
    {
    timer1=setTimeout("changeDisplay('name2','block')", 300);
    }
    else if(select==3)
    {
   timer1=setTimeout("changeDisplay('name3','block')", 600);
    }
}

function clearTimer() {
clearTimeout(timer1);
changeDisplay('name1','none');
changeDisplay('name2','none');
changeDisplay('name3','none');
}


Javascript: Rollover Images

Another use for a Rollover is to display an expanded image of a thumbnail image. Often, to minimize clutter, we show small pictures on the webpage. Using a Rollover, we can display an expanded version of the thumbnail. For example put your cursor over the image: The thumbnail is initially displayed. But using the "onmouseover()" function we display the larger image, in this case referred to as largeImage.jpg. In our style sheet, we have set a container called "largeImageDiv" to "display:none;". Onmouseover, this is changed to "display:block;" and then the larger picture is displayed.



< style type="text/css">
#largeImage {
display:none;
position:absolute;
top:700px;
left:400px;
}
< /style>

<img src="smallImage.jpg" onmouseover="changeDisplay('largeImage','block');" onmouseout="changeDisplay('largeImage','none');"/>


<div id="largeImage" >
<img src="largeImage.jpg" />
</div>

Use the code shown to the left to create the capability to display a larger version of a thumbnail picture.
  • The code for the larger picture is put inside a container -#largerImage". The CSS style includes "display:none;" to prevent the image from initially being displayed.
  • The code for the thumbnail picture always displays the thumbnail image. The code to display the thumbnail includes a onMouseOver="" command. When the cursor is put over the image (onMouseOver) it changes the largerImage container from display:none; to display:block;. When this occurs the larger picture is displayed.
  • A onMouseOut=() command could also be added to cause the image to disappear when the mouse is moved out.
  • By changing the onMouseOver() to onClick() the large image will only be shown when the thumbnail image is clicked.
  • A CSS style defines the "largeImage" container. Notice there is a position property included in the largeImage container. This allows you to put the the pictures where you want it on the page. In this case, Position:absolute has been used to put the image where it is intended be on the web page. Position:relative may also be used as appropriate for your web page.


Menu Name 1

Describe what the visitor will see when they click on the menu item.

Menu Name 2

Adding an image can be informative. By floating the image, your text flows around the image.

Menu Name 3

This is where your content will go for name2.