Solved

Rollover code not operating correctly

Posted on 2013-02-03
17
204 Views
Last Modified: 2013-02-23
Going to a webpage I am creating, the rollover buttons - the larger multicolored ones in the middle of the page - are getting stuck on the hover option or not working at all, and the down function is also not working.

The site is here:

http://michaelbehr.com/foundlogic/home6-sliced.html#

Would like to get the hover and down functions to work for all of those buttons if someone can help me with those.
0
Comment
Question by:JaseSt
  • 6
  • 4
  • 3
  • +3
17 Comments
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 167 total points
ID: 38848193
This is due to faulty copy & paste:)
Look carefully for example of the first item:

This is from your code:
<td>
	<a href="#" onmouseover="changeImages('uniform', 'images/uniform-28.gif'); return true;" onmouseout="changeImages('above_video', 'images/above_video.gif', 'images/uniform', 'images/uniform.gif'); return true;" onmousedown="changeImages('above_video', 'images/above_video-24.gif', 'images/uniform', 'images/uniform-27.gif'); return true;" onmouseup="changeImages('above_video', 'images/above_video.gif', 'images/uniform', 'images/uniform-28.gif'); return true;">
		<img name="uniform" src="images/uniform-28.gif" width="170" height="176" border="0" alt="">
	</a>
</td>

Open in new window


And after fixing:
<td>
	<a href="#" onmouseover="changeImages('uniform', 'images/uniform-28.gif'); return true;" onmouseout="changeImages('uniform', 'images/uniform.gif'); return true;" onmousedown="changeImages('uniform', 'images/uniform-27.gif'); return true;" onmouseup="changeImages('uniform',  'images/uniform.gif'); return true;">
		<img name="uniform" src="images/uniform.gif" width="170" height="176" border="0" alt="">
	</a>
</td>

Open in new window

Here even the default image was faulty!!
0
 
LVL 9

Assisted Solution

by:user_n
user_n earned 333 total points
ID: 38848583
function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

Open in new window


Opera shows problem with object
0
 
LVL 9

Accepted Solution

by:
user_n earned 333 total points
ID: 38848589
cannot convert
document[changeImages.arguments[i]]

Open in new window

to object
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38848687
Let's see...
No valid doct type
obsolete and depreciated attributes all over the place
A 20th century layout
clashing local events code inline triggering javascript instead of using CSS

Surprise!... It does not work right.  Might find a hack to fix this, but junk like that will find some other way to break.  Plus, from a marketing standpoint it is worthless because all the SEO negatives are there and none of the positives.  

You might want to consider hiring a professional web developer to write something for you.

Cd&
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38848735
Cd&:

I know that your'e much experienced, and have a much higher seniority here on EE, and yet:

1. It's quite a big debate nowadays, what's the real objective/contribution of the doctype declaration, aside from triggering quirk mode, and as a result, a large number of professorials omit it (myself excluded).
2. Fluid layout is great and versatile, and definitely much usable than the table based one, but this doesn't indicate that table based layout is bad. Depending on the site's nature and characteristics, table based layout can be more than sufficient.
3. CSS and especially CSS3 can do real wonders, and it's the new Moloch to worship, and still, old JavaScript is not bad, and the number of sites that don't enable JavaScript, is no greater than the number of those which don'y support CSS3...
4. Patience and tolerance...
0
 

Author Comment

by:JaseSt
ID: 38848749
Thank you, HagayMandel, the rollover now seems to work, although sometimes it lags sometimes, however the down even isn't working at all.
Any ideas?
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38848774
Image pool-31.gif is missing!!
0
 

Author Comment

by:JaseSt
ID: 38848816
Thanks, it was, but after uploading and add it to the preloadImages() list it still doesn't show on clicking of the button.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38848821
Hagay,  

1... there is no debate.  You either support standards compliance or you don't.  The standards call for a doctype.
2... Tables are for tabular data.  Using them for layout management is semantically incorrect and structurally obtuse.  The debate occurred and was settled10 years ago.  The fact that some novice developers still cling to them instead of learning to do layout, is no more significant than the fact there are users who think Netscape 4 was the ultimate browser.
3... Javasrcipt is fantastic for a lot of things but dynamic generation is backward, error prone, and slow.  Effects done with CSS are loaded, parsed, and added to the DOM in less time than it takes to just load jquery, and CSS can be maintained without having to dig through and figure out which script/function is blocking a change because it generates inline styling.
4...Patience and tolerance for bad and obsolete code just encourages more junk; and failing to educate does a disservice to the questioner and just ends up with worthless "solutions" being added to the PAQ database.

Cd&
0
 

Author Comment

by:JaseSt
ID: 38848824
Coboldinasaur.

Can you take my code, or some of it, and show how you'd get it up to your level of coding?

In the meantime, the clickdown even isn't working. Need help one way or the other. Thanks.
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38848859
JaseSt:

The click event as far as I ca see, works.

Cd&:
We can continue discussing these issues (and more), and I do evaluate your point of view:
I'ts not that I'm right and your'e wrong, all I'm indicating is that there are several ways (better & lesser ones) to do things, and what used to be quite OK several years ago, now considered out of date. Not to mention that a huge number of sites, that keep having large traffic, still use those 'obsolete' solutions.
We all had our share of bad coding, erroneous approach, utilizing old methods & technologies, and site by site, we've developed, learned from our mistakes, and found the right paths. I think we should let others do the same.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38848862
JaseSt,

I will not write the code for you but I will give you advice and help you through the learning curve.

You do not need all the images.  al you have are variations on the images that can be done with CSS3 box-shadow.  The triggering does not need mouse event.  They can be fire with :link :hover and :active in CSS rule declarations.

Instead of putting the nav in a table create a nav block with the image elements position in sized blocks that are floated using CSS.

Using CSS to changes the state using class declarations across the complete set of images, means instant response to the mouse; no clash of events, and changes in the look and presentation of them that takes a few seconds.  There is nothing more response to stat changes than CSS rule declarations using classes.

You need to your part by spending some time on learning and understand.  A place to start is http://www.w3schools.com/cssref/default.asp

I guarantee you that it is not difficult to learn, and you will get back the time invested in learning ten-fold in reduced effort and time to develop.


Hagay,

I spend time on this site to help educate.  I don't care who getspoint ; who is offended by what I say or agrees with me or even if the user is happy with what is offered.  I provide a chance to get better.  Some take it; some don't either way I am making the contribution I think needs to be made.

Cd&
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38848958
Cd&:

It's OK by me.
Still I do honestly think that your'e last reply, with the guidelines for proper CSS usage, was much more encouraging and supportive than your first one, and probably will generate better knowledge and better coding :)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38849648
The second type of comment often falls on deaf ears if the questioner has not indicated they recognize the need to make substantive changes.   Plus I need to keep up my image as a mean sob.

Cd&
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38849968
Job well done!
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38850737
For what it's worth, you should always run your site through a validator to check it's validity. You can easily do this for your HTML and your CSS:

http://jigsaw.w3.org/css-validator/
http://validator.w3.org/

An alternative option for your navigation is to use CSS sprites - basically a sprite is one image that contains all of your button states (normal, mouse over, clicked etc). You then use CSS to move a background image around to display only the part that you need to see. It's instantly responsive and uses very simple CSS (2) techniques, so it works in all browsers, across all devices. Have a look here for an intro into CSS sprites:

http://css-tricks.com/css-sprites/

Finally, I'd just like to re-assert what Cobol has already said:

1. Always include a valid DOCTYPE!
2. Table-based layouts are bad for design / search engines / screen readers
3. Validate your documents so you know you're not using bad / deprecated / invalid code.

3 simple steps which will help to distinguish your website between amateurish and professional.
0
 
LVL 7

Expert Comment

by:Alicia St Rose
ID: 38853426
Hi  JaseSt,
Go to Amazon and order this book immediately! Your Web coding life will change for the better:

Head First HTML and CSS by Elisabeth Robson & Eric Freeman

Things are changing fast and this book will give you a jumpstart. Plus it FUN!!!

Cd& is right on. And he may be maintaining an image of being an sob, but he knows his stuff! Hang around here long enough and you'll grow to love him. He's a great barometer to measure how thin or thick your skin is.

LOL!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now