Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Unusual Results - help with proofing code

Status
Not open for further replies.
remeng

remeng

Technical User
Jul 27, 2006
519
US
hi all:

I am trying to make some javascript buttons and this the first time I am attempting it. When I make the buttons individually, they work, but when I put the three buttons in the same web page, the first two buttons load the first image correctly, but then only something goes wrong. The home button changes to look like the contact button and the down image stay as the contact image. The product image locks as the product image and doesn't switch to the down image. Finally, when I click the contact image, the home image activates as the down image. What in the world did I mess up on? Here is a section of code that I used.

Code: 
<img
name="jsbutton" src="images/home.jpg" width="230" height="35" border="0"
alt="javascript button"></a> 
              <script language="JavaScript">
upImage = new Image();
upImage.src = "images/home.jpg";
downImage = new Image();
downImage.src = "images/home2.jpg"
normalImage = new Image();
normalImage.src = "images/home.jpg";
function changeImage()
{
  document.images["jsbutton"].src= upImage.src;
  return true;
}
function changeImageBack()
{
   document.images["jsbutton"].src = normalImage.src;
   return true;
}
function handleMDown()
{
 document.images["jsbutton"].src = downImage.src;
 return true;
}
function handleMUp()
{
 changeImage();
 return true;
}
</script>
              <br>
  <a href="products.htm"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="jsbutton" src="images/products.jpg" width="230" height="35" border="0"
alt="javascript button"></a>
<script language="JavaScript">
upImage = new Image();
upImage.src = "images/products.jpg";
downImage = new Image();
downImage.src = "images/products2.jpg"
normalImage = new Image();
normalImage.src = "images/products.jpg";
function changeImage()
{
  document.images["jsbutton"].src= upImage.src;
  return true;
}
function changeImageBack()
{
   document.images["jsbutton"].src = normalImage.src;
   return true;
}
function handleMDown()
{
 document.images["jsbutton"].src = downImage.src;
 return true;
}
function handleMUp()
{
 changeImage();
 return true;
}
</script>
 
<a href="contact.htm"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="jsbutton" src="images/contact.jpg" width="230" height="35" border="0"
alt="javascript button"></a>
<script language="JavaScript">
upImage = new Image();
upImage.src = "images/contact.jpg";
downImage = new Image();
downImage.src = "images/contact2.jpg"
normalImage = new Image();
normalImage.src = "images/contact.jpg";
function changeImage()
{
  document.images["jsbutton"].src= upImage.src;
  return true;
}
function changeImageBack()
{
   document.images["jsbutton"].src = normalImage.src;
   return true;
}
function handleMDown()
{
 document.images["jsbutton"].src = downImage.src;
 return true;
}
function handleMUp()
{
 changeImage();
 return true;
}
</script>
 
Sort by date Sort by votes
Wow! Talk about unnecessarily complex.

1. Creating images for no particular purpose other than to store image paths. Why? Just store the strings and be done with it.

2. Using an excess of functions that do nothing to the images. Your onmouseover sets your images to the same base image so what's the purpose? If you are planning on adding a different mouseover image later on then I would understand.

3. Overwriting your functions for each button. Not only does that produce unnecessary duplication of code, it obviously does not work. There is no difference between changeImage() and the other 2 changeImage() functions. So how does JS know which one to call?

4. Naming all your images the same. How is JS supposed to identify between one and the other 2?

Lets try to make this code a little easier to understand and only 1/3 as lengthy.

HTML: 
<html>
<head>
<script type="text/javascript">
function handleMDown(btnName)
{
document.images["jsbutton" + btnName;].src='images/' + btnName + '2.jpg';
 }
function handleMUp(btnName)
{
 document.images["jsbutton" + btnName].src='images/' + btnName + '.jpg';
}

</script>
</head>
<body>
<a href="home.htm"
onMouseDown="return handleMDown('home')"
onMouseUp="return handleMUp('home')"
><img
name="jsbuttonhome" src="images/home.jpg" width="230" height="35" border="0"
alt="javascript button"></a>

<br>

<a href="products.htm"
onMouseDown="return handleMDown('products')"
onMouseUp="return handleMUp('products')"
><img
name="jsbuttonproducts" src="images/products.jpg" width="230" height="35" border="0"
alt="javascript button"></a>


<br>

<a href="contact.htm"
onMouseDown="return handleMDown('contact')"
onMouseUp="return handleMUp('contact')"
><img
name="jsbuttoncontact" src="images/contact.jpg" width="230" height="35" border="0"
alt="javascript button"></a>

</body>
</html>



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thanks! I totally forgot about the variable name difference on call outs. There is just one problem that isn't quite working and that is the mouse down image change. The Mouse up is the only image that is shown. So all I can see is the mouse up image when the mouse down image should be shown. Any ideas why that is?

By the way, I do see where the code calls out for the #2 to be added to the file name and the images do correspond with that rule.

Thanks!
 
Upvote 0 Downvote
Sorry about that. I have an incorrectly placed semi-colon ";"

Code: 
document.images["jsbutton" + btnName[COLOR=white red];[/color]].src='images/' + btnName + '2.jpg';

Just remove it from that line, and it should work.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Ok so I just started debugging the menu and I noticed something. If you push down on a button and then decide to drag off because you changed your mind, the button doesn't go back to the up position. How would I correct this?
 
Upvote 0 Downvote
In this case an onmouseout call would work.

Code: 
<a href="home.htm"
onMouseDown="return handleMDown('home')"
onMouseUp="return handleMUp('home')"
[red]onMouseOut[/red]="return handleMUp('home')"
><img
name="jsbuttonhome" src="images/home.jpg" width="230" height="35" border="0"
alt="javascript button"></a>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
so I made the change and I tried it on the local site and it works correctly. I then uploaded the sites to the web server and it doesn't work. Could you help check what is going on?

 
Upvote 0 Downvote
There are no home[red]2[/red].jpg, products[red]2[/red].jpg or contact[red]2[/red].jpg images in your image folder.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
281
rogerte
rogerte
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
181
tyutghf
tyutghf
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
104
ggriffit
ggriffit
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
110
Smurfmania
Smurfmania
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
74
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top