The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> PLEASE HELP! one button OK, two buttons BAD
sagerides
post Oct 4 2006, 09:11 AM
Post #1





Group: Members
Posts: 5
Joined: 4-October 06
Member No.: 328



i am VERY new to HTML, so any help or suggestions would be appreciated.

i have created a button that has three actions: onMouseOver, onMouseOut, & onMouseDown, and links to the correct page.
it works great. it works so well that i would like to add another button. for this i would assume i just repeat the process. i guess not.

as soon as i add the second button, the over, out and down functions stop working. both buttons still link to the correct page, but they don't have any action anymore.

what am i missing?

the code for the pages is listed bellow:
_____________________________________



<html>

<head>
<title>The Ramblin' Souls</title>
</head>
<body bgcolor="#000000">

<center>
<img src="http://img179.imageshack.us/img179/4142/ramblinheader2hb1.gif">

<img src="http://i79.photobucket.com/albums/j122/sagerides/website/reverse-tracks-grey.jpg" border="0" width="500" height="350">


<br/><br/>

<a href="http://www.ramblinsouls.com/main.html"
onMouseOver="document.pic1.src='http://i79.photobucket.com/albums/j122/sagerides/website/ramble-button-hover.gif'" align="absmiddle"

onMouseOut="document.pic1.src='http://i79.photobucket.com/albums/j122/sagerides/website/ramble-button.gif'" align="absmiddle"

onmousedown="document.pic1.src='http://i79.photobucket.com/albums/j122/sagerides/website/ramble-button-click.gif'"align="absmiddle" >

<img src="http://i79.photobucket.com/albums/j122/sagerides/website/ramble-button.gif" align="absmiddle" border="0" width="200" height="100"name="pic1"></a>

<font face="verdana" size="4" color="#FFFFFF">
<big> Or </big>
</font>

<a href="http://www.myspace.com/theramblinsouls"
onMouseOver="document.pic1.src='http://i79.photobucket.com/albums/j122/sagerides/website/myspace-button-hover.gif'" align="absmiddle"

onMouseOut="document.pic1.src='http://i79.photobucket.com/albums/j122/sagerides/website/myspace-botton.gif'" align="absmiddle"

onmousedown="document.pic1.src='http://i79.photobucket.com/albums/j122/sagerides/website/myspace-button-click.gif'" align="absmiddle">

<img src="http://i79.photobucket.com/albums/j122/sagerides/website/myspace-button.gif" align="absmiddle" border="0" width="200" height="100"name="pic1"></a>

</center>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 4 2006, 09:40 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



You've named both your images "pic1" and both sets of event handlers try to manipulate "pic1". You need to use a different name for each image, and the event handlers need to be updated accordingly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 4 2006, 09:40 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You can't have more than one element with the same NAME or ID. In your code all images have the name "pic1". Change each image NAME to anothe and it will work. Or, use this.src, eg:

CODE
onMouseOver="this.src='http://i79.photobucket.com/albums/j122/sagerides/website/ramble-button-hover.gif'" align="absmiddle"


BTW, you don't need Javascript to swap images. You can do that with CSS, see the samples at, for exemple, http://www.meyerweb.com/eric/css/edge/

This post has been edited by Frederiek: Oct 4 2006, 09:41 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sagerides
post Oct 4 2006, 10:03 AM
Post #4





Group: Members
Posts: 5
Joined: 4-October 06
Member No.: 328



ok, so i used both recomendations. seperately and together. i changed all "pic.'s" to be numbered 1-6. that does not solve my problem. i changed them to "this.src" . this did not solve the problem. then i made one button with "this.src" and the other button "pic.1" "pic.2" "pic.3". this did not solve the problem. even when the old script contained the same picture name for all images, one button works properly. as soon as i add a second button, the actions stop working. if i take a button away, it works again.

any other suggestions?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sagerides
post Oct 4 2006, 10:35 AM
Post #5





Group: Members
Posts: 5
Joined: 4-October 06
Member No.: 328



ahhh, ha.

ok, so i guess all the "pic." for the first button are ALL named "pic.1"

then ALL the "pic." for the second button are named "pic.2"

now it works. thanks for the suggestions
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 4 2006, 10:47 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



That's the idea.
Each image needs another NAME (or ID) and each call (onmouse...) matches the NAME of the corresponding image.
Glad you figured it out eventually.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th April 2024 - 08:28 AM