The "OnClick" Headache from HELL Options

[Julie Gleaton]

Help!

I'm in the process of designing my first ever website from scratch. I've done work on the website at work, done some goofin around with my MySpace, but - in short - my job blows and I need a professional looking site to house my graphic design and fine art for another company to even begin to look at me for employment.

My problem:

I'm using image buttons. The rollovers work dandy. My problem is that I want to navigate the click-er to a new URL within the same window. Not a new window (I can get that to work too), the same one.

This is what I'm working with:

<input type="image"
id="about"
src="./graphics/about_button.jpg"
onmouseover="this.src='./graphics/about_hover.jpg'"
onmouseout="this.src='./graphics/about_button.jpg'"
onclick="java script: document.location='about.htm'"
alt="about">
</input>

Now I've tried all sorts of crap with the OnClick:
document.location.href
location.href
removing OnClick and trying a href -
removing the word javascript

I've even added an alert() in the javascript section - that works too.

I've read a ton of forms and tried all of it and have NOT been successful yet. ANY new suggestions would be greatly appreciated.

THANK YOU!!!

This post has been edited by Julie Gleaton: Mar 2 2008, 02:02 PM

[Darin McGrew]

I recommend that you just use normal links. See also Links Want To Be Links.

[hiltonweb]

Hi Julie,
Did you try using a target attribute in your link ?
i had similar issues with a dhtml based navigation menu I built for my site and it seemed to solve the problem when I included target="parent" in the links.
Like this :

<input type="image"
id="about"
src="./graphics/about_button.jpg"
onmouseover="this.src='./graphics/about_hover.jpg'"
onmouseout="this.src='./graphics/about_button.jpg'"
onclick="java script: document.location='about.htm'"
alt="about" target="_parent">
</input>
The target attribute tells the browser where to open a new window for that link. In this case, it is telling the browser to open that link in the current window.
You shouldnt need to include the word javascript in the onClick. That may be causing issues as well.

Oh, one last thing that may be mucking it up..In my limited experience I have found that javascript looks for actions to be written like so : onClick, onSubmit, onFocus, etc, with the second word starting with a capital letter. Theres something about the way javascript is written that it has to have that second halfs' first letter capitalized to distinguish it from the first half of the action.
Hope this helps somewhat...

This post has been edited by hiltonweb: Mar 4 2008, 02:14 PM

[Christian J]

Did you try using a target attribute in your link ?

That shouldn't be necessary. In any case the TARGET attribute is used for e.g. ordinary links or the <FORM> element itself (for form submissions), not INPUT.

You shouldnt need to include the word javascript in the onClick.

I agree it's unnecessary, but it shouldn't cause any problems. The problem with the script might be the use of document.location.href --rather you should use window.location.href or just location.href.

But like Darin wrote, you shouldn't rely on javascript for navigation in the first place. Javascript is not understood by search engines or browsers with javascript disabled, and makes it impossible to right click if the user wants to open the link in a new window. Only use javascript for optional enhancements.

In my limited experience I have found that javascript looks for actions to be written like so : onClick, onSubmit, onFocus, etc, with the second word starting with a capital letter.

That's not necessary for event attributes, since they are part of HTML. But many other things in javascript are case-sensitive, like getElementById or className.