Javacript Question

[DisgruntledOrangatang]

This is related to my previous thread about the map, but it's a specific question about Javascript so I thought I'd make a new one so it's easier to find for other people or w/e.

Anyway I am trying to do my map thing still, using Javascript.

What I am having happen is when you hover over a state abbreviation (text). The hover-over image of the state appears. I can do this all fine in CSS, but I am trying to use Javascript so I don't have to write a function for each state.

I have a feeling I am using "this" incorrectly. But I want to write 1 onMouseOver and onMouseOut code using "this" so I can apply it to all state elements. Same with Javascript, 1 function for each action that all states can use.

So far this is what I have tried:

HTML tag: (text is display:none right now)

<div id="texas"></div> <a id="texasText" onMouseOver="hoverOver(this)" onMouseOut="hoverOut(this)">TX</a>

javascript:

function hoverOver(statename){
	var state = document.getElementById(statename);
	state.style.display = "block";
}

function hoverOut(statename){
	var state = document.getElementById(statename);
	state.style.display = "none";
}

But it doesn't work. I have even tried something super simple like this:

function hoverOver(statename){
        alert(statename);
{

Doesn't work either, I have written that alert function trying it like 5 different ways, but the output is either null, undefined, or a blank box with nothing in it. How can I do this? I have a feeling I am missing some syntax to use "this" to correctly pull some unique information from the tag.

[niteflyx]

You're passing a "this" variable as a parameter, which I'm not sure you can even do. If you wanted to use "this", you'd put it in the function anyway and it'd reference the HTML element.. not it's ID or name (the name of the state). If you named each tag "texasText", "newyorkText" and so forth, just put the state name as a parameter.

Remove the parameter "this"; it's useless here

<div id="texas"></div> <a id="texasText" onMouseOver="hoverOver('texas')" onMouseOut="hoverOut('texas')">TX</a>

function hoverOver(statename){
	var state = document.getElementById(statename);
	state.style.display = "block";
}

function hoverOut(statename){
	var state = document.getElementById(statename);
	state.style.display = "none";
}

I'm sure there's a way to use "this" (in the function, not as a parameter) and grab the ID from your link element and then strip away the "Text" from "texasText" with substrings and then find that element ID, but eh. You already individually named the ID tags, so just put the appropriate ones in the parameter for hoverOver/Out. You can use the same function code, just pass whatever variable you want as a parameter rather than (or in addition to) naming the element's ID.

[DisgruntledOrangatang]

Yeah I know you can do it that way. I was trying to avoid that so I could just copy and paste the onMouseOver onMouseOuts to each tag instead of also having to put the parameter in there as the state name. The weird thing is I have used this in a parameter like that before. For instance in a previous project I have this:

onKeyPress="return submitenter(this,event)"

and the function:

function submitenter(myfield,e)
		{
			var keycode;
			
			if(window.event)
			{
				keycode = window.event.keyCode;
			}
			else if(e)
			{
				keycode = e.which;
			}
			else
			{
				return true;
			}
			
			if(keycode == 13)
		   {
		   	myfield.form.submit();
		   	return false;
		   }
			else
			{
		   	return true;
			}
		}

So that worked with this, which is why I am confused and surpised I can't use it as I did in the OP.

[niteflyx]

Hmm, for that example of "this" that you used, was the onkeypress command inside a div that you were referring to? Because in the OP example, your javascript function gets called within the element, not the

element.

Also, in the OP example, you take "this" and take it as just an element ID..

You have getElementById(statename), where statename is an element, not a string. It should be statename.style.display or whatever, I think.


I've had a few drinks but I hope this is good programming logic

[Elradriendir]

'this' can get confusing really quick, but in this case you're using it correctly (but perhaps in the wrong way?).

From the ECMA Spec:

There is a this value associated with every active execution context. The this value depends on the caller
and the type of code being executed and is determined when control enters the execution context. The
this value associated with an execution context is immutable.

Basically in every situation there is going to be a 'this' value, but it's not always going to be clear what it is. In the OP, 'this' is in the context of the anchor tag. You'll be able to get everything associated with the <a> tag you're hovering over (hovering out, clicking, parent nodes etc.), but it has nothing to do with the DIV.

The quickest way I can see to get this working is to just using naming conventions to solve the problem. If you name your <a> tags in a predictable way, you can avoid hard-coding the parameter:

<div id="texas"></div> <a id="texas_text" onMouseOver="hoverOver(this);" onMouseOut="hoverOut(this);">TX</a>

Then the javascript becomes:

function hoverOut(e) {
                var id = e.id.replace('_text','');
                var div = document.getElementById(id);
                div.style.display = 'none';
}

function hoverOver(e) {
                var id = e.id.replace('_text','');
                var div = document.getElementById(id);
                div.style.display = 'block';
}

[Luthair]

Relevant link, though it may not be useful until we see more HTML 5 support: Adblock Plus and (a little) more: Selecting countries on a map in Firefox 3.5