JAVASCRIPT, CSS - ADDING YOUR PAGE

Both CSS and Javascript can be added to a web page in two ways:

  1. within a HTML tag.
  2. in the <HEAD> of a web page

CSS contained with a HTML tag

An example of CSS in a link is

<a href="someplace" style="text-decoration:none">

The text-decoration:none tells the browser that there will be no underline with this link.

Javascript contained with a HTML tag An example of javascript is in a link would be this mouseover code:

<a href="YOUR LINK" OnMouseOver="mo1.src='on.gif'" OnMouseOut="mo1.src='off.gif'"><img src="off.gif" border="0" name="mo1"></a>

And the actual link would look like this (don't click on it as it goes no where):

If you have code like this to add to your Page Builder page, then you must use the HTML ADDING method. Copy and paste the javascript code in the HTML CODE box in the ADDONS.

CSS STYLE In HEAD SCRIPT

If, for example, you wish to have all the links on your page with no underlines, then you add the following code to your page in the HEAD SCRIPT

<style type="text/css">
a{text-decoration:none}
</style>

Javascript Function In HEAD SCRIPT

Adding a javascript function to your Page Builder page takes a bit more work. Javascript functions normally should be placed in the HEAD SCRIPT under the Advanced Page Properties. Examples of the types of Javascript that would be add in the HEAD are (a) mouseovers, (b) No Right Click codes.

For example, the same mouseover above can be done with the following Javascript Function code which will be put in the HEAD SCRIPT box and the HTML CODE that can be put anyplace on your page. This code is a bit more complicated but many people use it rather than putting the code in the link tag.

--- HEAD SCRIPT BOX ---
<script language="JavaScript">
<!-- Hide from old browsers
var NN3 = false;
image1= new Image();
image1.src = "off.gif";
image1on = new Image();
image1on.src = "on.gif";
function on3(name) {
document[name].src = eval(name + "on.src");
}
function off3(name) {
document[name].src = eval(name + ".src");
}
NN3 = true;
function on(name) {
if (NN3) on3(name);
}
function off(name) {
if (NN3) off3(name);
}
// -->
</script>

--- PAGE CODE ---
<a href="YOUR LINK" onmouseover="on('image1');" onmouseout="off('image1')"> <img src="off.gif" border="0" name="image1"></a>

And the mouseover would look like this:

As you can plainly see, the Javascript Function using a lot more code to accomplish the same task. But this is not always the case and there will be times when the Function is required.