Two Buttons with 2 sub-menus





How to incorporate the code into GPC


  • Add CSS for buttons with this javascript : (write this js in the first editable section of the page)

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/menustyle.css';
cssNode.media = 'screen, print';
cssNode.title = 'supplemental style sheet';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
  • Upload the pictures on GPC
  • At the end of the page (footer), add a script which load the javascript of the buttons
  • It is important to write the script at the end of the page, as the previous script must be executed before the menuscript.js
<script src="menuscript.js" language="javascript" type="text/javascript"></script>

  • Change top and left, adding units (to be compatible between IE and FF) :
// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x+'px';
el.style.top = y+'px';
}


  • Replace name of subfolder by an empty string (we cannot use subfolder in GPC) :
//*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "";


  • For a best display, change timeout :
var delay = 100;


  • Depending on the template in use, add style to the <a> tag, to don't have border or background (link hover) :
style="border: 0px none ;
background-color: rgb(209, 218, 227);"


  • Remove subfolder name of the src, in the <img> tag :
<img src="URL of picture" ...>


  • Remove the comment mark to preload the pictures :
// preload the pictures

preload();


  • Define text and link for the sub-menus, use the third parameter for target="_blank" (to open the link in a new window) :

//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//
subInfo[1][1] =
new Array("name of link 1.1","URL of link 1.1","_blank");
subInfo[1][2] =
new Array"name of link 1.2","URL of link 1.2","_blank");

subInfo[2][1] =
new Array("name of link 2.1","URL of link 2.1","_blank");
subInfo[2][2] =
new Array"name of link 2.2","URL of link 2.2","_blank");

  • Last, add this <table> tag, which define the button in html :
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>

<a href="URL link button 1" target="_blank"
title="title of link" ...>
<img src="URL of button 1 up" ...></a><br>

<a href="URL link button 2" target="_blank"
title="title of link" ...>
<img src="URL of button 2 up" ...></a><br>

</td>
</tr>
</table>
</div>


ButtonGenerator.com



Simple button - Without javascript


  • Use Form and Button

<form action="URL of target"
method="get"
target="_blank">

<input type="submit"
style="cursor:pointer;"
value="Name of target">

</form>




Simple button - With javascript


  • Use Button and javascript

<button type="button"
onClick="javascript: window.open('URL of target')">
Name of target
</button>



  • Adding a picture

<button type="button"
onClick="javascript: window.open('URL of target')">
<img src="URL of picture">
</button>




More Informations





One Day - One Label - One Wine

Add this gadget to Google




Using GPC