Mouse Over Function Trouble

Ranga · **Mouse Over Function Trouble -** 07-12-2010, 03:48 PM

hi, ive been trying to play around with a mouse over code, but all the tutorials ive followed havnt really given me anything except how to do a single mouse over. i recently read one though to write it in this format. but unfortuently i havnt had any luck. so i was woundering if anyone can tell me whats wrong with my code. thanks

buttons.JS:

Code:

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
playbuttonup = new Image();
playbuttondown = new Image();
homebuttonup = new Image();
homebuttondown = new Image();
forumbuttonup = new Image();
forumbuttondown = new Image();
wikibuttonup = new Image();
wikibuttondown = new Image();
shopsbuttonup = new Image();
shopsbuttondown = new Image();
helpbuttonup = new Image();
helpbuttondown = new Image();
 
playbuttonup.src = "images/";
playbuttondown.src = "images/";
homebuttonup.src = "images/";
homebuttondown.src = "images/";
forumbuttonup.src = "images/";
forumbuttondown.src = "images/";
wikibuttonup.src = "images/";
wikibuttondown.src = "images/";
shopsbuttonup.src = "images/";
shopsbuttondown.src = "images/";
helpbuttonup.src = "images/helpbuttonup.gif";
helpbuttondown.src = "images/helpbuttondown.gif";
}
else
{
playbuttonup = ""
playbuttondown = ""
homebuttonup = ""
homebuttondown = ""
forumbuttonup = ""
forumbuttondown = ""
wikibuttonup = ""
wikibuttondown = ""
shopsbuttonup = ""
shopsbuttondown = ""
helpbuttonup = ""
helpbuttondown = ""
 
document.play =""
document.home =""
document.forum =""
document.wiki =""
document.shops =""
document.help =""
// -->
</script>

i have tried using

Code:

<div class="center">
<?php include("buttons.js"); ?>
</div>

and ive tried using

Code:

<script type="text/javascript" src="Buttons.js"></script>

the other part of the code to call it looks like this:

Code:

<a href="menu/Help.php" onmouseover="document.helpbuttondown.src" onmouseout="document.helpbuttonup.src"> <img src="images/helpbuttonup.gif" width="200px" height="25px" border="0" name="helpbuttonup" alt"helpbuttonup"/><a/>

i do know that i have only got ONE button set up, so im hopping thats not the problem, but i was doing this for testing purposes.
if you need anything else please let me know and il reply as soon as possible.

SpikeyD · 07-12-2010, 08:03 PM

Hi there,

First of all you need two files. Your buttons.js file and an html file we'll call test.html.

test.html can be as simple as this:

Code:

<html>
<head>
<script type="text/javascript" src="buttons.js"></script>
</head> 
<body>
<a href="menu/Help.php" onmouseover="document.helpbutton.src = helpbuttondown.src " onmouseout="document.helpbutton.src = helpbuttonup.src"><img src="images/helpbuttonup.gif" width="200px" height="25px" border="0" name="helpbutton" alt="help button"/></a>
</body>
</html>

Points to note
- The "script" tag call your javascript (.js) file to be used in the html file
- The "a" tag puts an anchor around anything in between it.
- onmouseover and onmouseout are events, the function of which is (normally) written in javascript, which means that...
- "document.helpbutton.src = helpbuttonup.src" is javascript code. What it is saying is that the "src" value of an element called "helpbutton" somewhere in this document should now take the "src" value of something called helpbuttonup
- The "img" tag is placed in between the "a" or anchor tags. The 'name="helpbutton"' bit gives this img tag a name in the document - we have now defined our "helpbutton" element used mentioned in the anchor tags events!

All we need to do now is write some more javascript to finish the puzzle:
- What are "helpbuttonup" and "helpbuttondown"?
- What are their "src" values?

Therefore "buttons.js" can be as simple as:

Code:

helpbuttonup = new Image();
helpbuttondown = new Image();
helpbuttonup.src = "images/helpbuttonup.gif";
helpbuttondown.src = "images/helpbuttondown.gif";

Points to note
- helpbuttonup and helpbuttondown are defined as new images
- the src values for our new images can then take the value of the save locations of your actual images.

All that remains is to save everything in the right place. Keep the html and js file in the same directory and create a sub directory called "images" to store your pictures.

There are many different ways to achieve the same effect, but essentially all you are doing is dynamically changing the "src" attribute of your "img" element depending on an event. Once you understand the basics of what's going on, you can then use javascript even more dynamically to improve the readability and portability of your html code.

Hope this helps!

Ranga · 07-13-2010, 04:16 AM

i have already got everything how you said it should be. its all in the right spots like you stated. yet still it doesnt work. so i think that i might have misunderstood what it was you said exactly.

SpikeyD · 07-13-2010, 11:57 AM

Hi there, I've uploaded the files myself and tested it with my own graphics and it seems to work ok. The link is here:
http://www.idlepod.com/testStuff/test.html

Attached are the files zipped up too, including the graphics. Just unzip them and upload them in the structure they're in and you should be fine. As for why your version has failed, it may be you have used a capital letter where there should be a small letter or it could be that your images have failed to upload correctly - pretty much anything without seeing your code. Compare these files to yours and see if there is anything obvious.

The only difference between the code zipped up and the one I published in the link above is that the anchor ("<a>") tag's href attribute points to nothing on my website, whereas the zipped up version points to "menu/help.php". This is simply because I don't have a file called menu/help.php and so you would see my sites error page if you clicked the link.

Good luck!

Ranga · 07-13-2010, 03:01 PM

ok heres my full code, the buttons.js is already stated up top

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Zombie Virus</title>
<link rel="shortcut icon" href="images/Smiles.jpg"/>
<link rel="stylesheet" type="text/css" href="zombievirus.css" />

<script type="text/javascript" src="Buttons.js"></script>
<br/>
</head>

<body class="settings" >

<div class="center">

</div>

<table width="1232px" height="813px" border="0" >
  <tr>
    <td width="226px" height="807px" valign="top">   <table width="98%" border="0">
      <tr>
        <td height="176px" align="center" valign="top" bgcolor="#000000" >
        
      
<div class="center">
    Login<br/>

<form action="MySQL server">
username:<input name="Username" ><br/>
Password:<input name="Password" ><br/>
<input type="submit" style="font-face: 'Comic Sans MS'; color: black; value="Submit"/>
 </form>

<a href="signup.php"
  onmouseover="buttondown('SignupN')"
  onmouseout="buttonup('SignupP')">
  <img src="images/SignupN.png" name="SignupN" border="0" alt="SignupN" /><a/></div>

</td>
      </tr>
      <tr>

        <td height="643px" align="center" valign="top">
        
Highscores<br/>
 
<div class="center">
</div>       
        
        </td>
      </tr>
    </table></td>
    <td width="990px" align="center" valign="top">
<div class="center">
<table width="100%" border="0">

  <tr>
    <td width="16%" class="center">
    <a href="menu/play.php"> <img src="images/Play.gif" alt="Play"/><a/>
    </td>
    <td width="16%" class="center">
    <a href="menu/Home.php"> <img src="images/Home.gif" alt="home"/><a/>
    </td>
    <td width="16%" class="center">

    <a href="menu/Forum.php"> <img src="images/Forum.gif" alt="forum"/><a/>
    </td>
    <td width="16%" class="center">
    <a href="menu/Wiki.php"> <img src="images/Wiki.gif" alt="wiki"/><a/>
    </td>
    <td width="16%" class="center">
    <a href="menu/Shops.php"> <img src="images/Shops.gif" alt="shops"/><a/>

    </td>
    <td width="16%" class="center">
    <a href="menu/Help.php" onmouseover="document.helpbuttondown.src" onmouseout="document.helpbuttonup.src"> <img src="images/helpbuttonup.gif" width="200px" height="25px" border="0" name="helpbuttonup" alt"helpbuttonup"/><a/>
   </td>
  </tr>
</table></div>

    <div style="height:700px;width:100%;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">
       <div class="center"><br/>

      <br/>
      </div> </div>
    <div class="center"><br />
      This page is copyrighted (c) 2010 - 2020 <br/>
By Ranga Inc      <br/>
      </div> </div>
    </td>

  </tr>
</table>


</body>
</html>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->

one other thing, your code is only working for one button, how do i make it work for multipul, as im trying to make the whole menu work

Bad Karma[CORE] · 07-13-2010, 03:22 PM

what´s the address of your site? I´d like to have a look at your entire code

SpikeyD · 05:13 PM

From your Buttons.js file:
1)Remove these lines:
<script language="JavaScript" type="text/javascript">

</script>

2)After the line document.help ="", you need to put a }

3)All those lines in the Else section need to end with a ;

4)You need to declare what two images you want for your Signup img element, so something like the following needs to be added to your If statement:

Code:

signupup = new Image();
signupdown = new Image();
signupup.src = "/images/SignupN.png";
signupdown.src = "/images/<<replace this with the name of your down button (SignupP.png maybe??)>>";

From your HTML:
1) Change the name of your img tag to Signup so it reads:

Code:

 <img src="/images/SignupN.png" name="Signup" border="0" alt="SignupN" />

2) onmouseover="buttondown('SignupN')" should be:
onmouseover="document.Signup.src = signupdown.src";

3) onmouseout="buttonup('SignupP')" should be:
onmouseout="document.Signup.src = signupup.src";

That should sort you out, but I've not tested it. What's the site address? It'd be good to see it working!

Ranga · 07-14-2010, 04:22 PM

hey guys thanks for the help, i have finally gotten the mouse over to work, im currently uploading my this all to my site as we speak,
the link is

Code:

http://signup.webuda.com/ZombieVirus/Home.php

Bad Karma[CORE] · 07-14-2010, 04:27 PM

Quote:

http://signup.webuda.com/ZombieVirus/Home.php

is a dead link for me, just getting the error page

Ranga · 04:36 PM

Quote:

still uploading, check back in about 5 minutes, i have slow internet at the moment sorry

ok upload is all done, you should now be able to see the website, although it doesnt have any information on it just yet