Button Issue

Gman121 · 04-May-2007, 09:40 PM #1

When I move my mouse over the gmail icon the picture turns to a red x. How do I include button1over.png in this code!

<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
<table border="0" cellpadding="0" cellspacing="0"><tr><td>
<a href="http://Gmail.com" onmouseover="setOverImg('1','');" onmouseout="setOutImg('1','');" target=""><img src="http://enhskeyclub.editme.com/files/Java/button1over.png" border="0" id="button1" vspace="0" hspace="0"></a><br>
</td></tr></table>

Thanks,

Gman121

Sequal7 · 05-May-2007, 12:40 AM #2

Need to see the menuscript.js file

Gman121 · 05-May-2007, 09:08 AM #3

The Url of the website is [url="http://enhskeyclub.editme.com/java"] Move your mouse over where it says gmail and youll see the issue!

/*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "buttons/";

/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("button1up.png");

overSources = new Array("button1over.png");

//*** NO MORE SETTINGS BEYOND THIS POINT ***//
totalButtons = upSources.length;

//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
for ( x=0; x<totalButtons; x++ ) {
buttonUp = new Image();
buttonUp.src = buttonFolder + upSources[x];
buttonOver = new Image();
buttonOver.src = buttonFolder + overSources[x];
}
}

// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}

//preload();

Sequal7 · 05-May-2007, 12:08 PM #4

I am sorry, but I don't see any reference to that script on your specified page. Is this intended as an external JS file or internal script?

You would want to add a link to the actual .js file in the <head> of your document if its external like this;

Code:

<script language="javascript" src="path/to/yourjsfile.js"></script>

where you rename path/to/yourjsfile.js to the actual location and name of the file on the server relative to the document.

If its internal, you would also add it to the <head> area of the document, but include the opening

Code:

<script type="text/javascript">

and the closing

Code:

</script>

surrounding the script.

Gman121 · 05-May-2007, 12:28 PM #5

All I know is that I downloaded a file to my computer from buttongenerator.com and am trying to put a menu on editme. It requires that I use a file to upload the images. The problem is that it can not find the image. How do I reference to two pictures in the code given on the first posting in this thread?

Sequal7 · 05-May-2007, 02:53 PM #6

All I know is what you tell me so I guess I know less than you on this one....

All I am trying to decipher is your entire page source and any attached java files (internal or external)

Unfortunately, when you provide only parts and pieces it is very hard to understand what your saying, and what your trying to get to....

I understand now that all you want to do is create a mouse over image using these images..

(and you tried to get code from somewhere else but couldn't understand how to incorporate it into your page)

It's easy now that I understand what you want.

Copy and paste this into notepad or even your WYSIWYG editor, then save it as hover.js;

Code:

<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

Now, copy this as the links and paste this just before the page closing head tag (<\head>)

Code:

<script language="javascript" src="hover.js"></script>

Now, place this where you want the image to display on the page;

Code:

<a href="https://www.google.com/accounts/ServiceLogin?service=mail&amp;passive=true&amp;rm=false&amp;continue=http%3A%2F%2Fmail.google.com%2Fmail%2F%3Fui%3Dhtml%26zy%3Dl&amp;ltmpl=default&amp;ltmplcache=2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','http://enhskeyclub.editme.com/files/Java/button1over.png',1)"><img src="http://enhskeyclub.editme.com/files/Java/button1up.png" alt="Click here to go to gmail" name="Image1" width="124" height="25" border="0" id="Image1" /></a>

View it here...

Cheers

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)