code problem: Cant get mouse over class to work.

[Owen Brunker]

Hello All,

I have written a Javascript class to handle mouse overs. I cant see
anything wrong with the logic, but it doesn't work. I have included the
class code below. Does anyone have any ideas that can point me in the right
direction. I have confirmed that the event methods are being called. None
of the browsers report any errors. The problem is that the images are not
swapped.

Thanks in advance

Owen Brunker


function MouseOvers() {
this.ImageItems = new Array();
this.IdIndex = new Array();

this.addItem = addElementItem;
this.findIndex = findIndex;
this.takeMouseOver = takeMouseOverEvent;
this.takeMouseOut = takeMouseOutEvent;
this.takeMouseDown = takeMouseDownEvent;
}

function findIndex(id) {
var ReturnValue = null;
var i;

for (i = 0; i < this.IdIndex.length; i++)
if (this.IdIndex == id) {
ReturnValue = i;
break;
}
return ReturnValue;
}

function addElementItem(id, ImgStandard, ImgMouseOver, ImgMouseDown) {
var Itemindex;
Itemindex = this.ImageItems.length;

this.ImageItems[Itemindex] = new Object();
this.IdIndex[Itemindex] = id;
this.ImageItems[Itemindex].ImgStandard = new Image;
this.ImageItems[Itemindex].ImgStandard.src = ImgStandard;
this.ImageItems[Itemindex].ImgMouseOver = new Image;
this.ImageItems[Itemindex].ImgMouseOver.src = ImgMouseOver;
this.ImageItems[Itemindex].ImgMouseDown = new Image;
this.ImageItems[Itemindex].ImgMouseDown.src = ImgMouseDown;
}

function takeMouseOverEvent(id) {
var Itemindex;
var element;
var d = document;
if (Itemindex = this.findIndex(id))
if (document.images)
document.images[id].src = this.ImageItems[Itemindex].ImgMouseOver.src;
// element = d.getElementById(id);
// if (element != null)
// element.src = this.ImageItems[Itemindex].ImgMouseOver.src;
}

function takeMouseOutEvent(id) {
var Itemindex;
var element;
var d = document;

element = d.getElementById(id);
if (element != null)
if (Itemindex = this.findIndex(id))
element.src = this.ImageItems[Itemindex].ImgStandard.src;
}

function takeMouseDownEvent(id) {
var Itemindex;
var element;
var d = document;

element = d.getElementById(id);
if (element != null)
if (Itemindex = this.findIndex(id))
element.src = this.ImageItems[Itemindex].ImgMouseDown.src;
}

 

[Owen Brunker]

Thanks for your reply David,

Unfortunately the test website is behind a fire wall. I haven't been using
Javascript that long. When I look at code written in languages I am
experienced with, I can tell you exactly what will happen and why without
having to run it. I am hoping that someone in this forum has this much
experience with Javascript. I not only want to know what works but why it
works.

I suspect I am experiencing a problem resulting from scoping issues and a
lack of knowlege on how manipulation of the DOM works. But I am willing to
listen at the feet of those who have a better understanding of the language
and the DOM than I do.

Cheers
Owen Brunker

 

[Owen Brunker]

You make a very good point David. When I get the rollovers working, I'll
then add the other functionality.

Cheers
Owen Brunker

 

[RobG]

Hello All,

I have written a Javascript class to handle mouse overs. I cant see
anything wrong with the logic, but it doesn't work. I have included the
class code below. Does anyone have any ideas that can point me in the right
direction. I have confirmed that the event methods are being called. None
of the browsers report any errors. The problem is that the images are not
swapped.

You might be interested in an alternative technique called "sliding
doors". Instead of changing the background image, you create one image
and slide it left/right or up/down.

<URL: http://www.alistapart.com/articles/slidingdoors/ >
<URL: http://www.alistapart.com/articles/slidingdoors2/ >

The sliding effect is instantaneous, you don't actually see the images
slide, they just change.

The best part is that it can be done solely with CSS. If you are really
keen and want to use script, you can just change the class on the
appropriate event to "slide" whatever part of the image suits as the
background.

As David said, it is much more likely that people will help if you post
a "working" example that shows the problem (posting code here is OK
provided it isn't too long). How you instantiate objects and call them
and the related HTML is important.

And please don't top-post, reply below trimmed quotes.


-
Rob
"We shall not cease from exploration, and the end of all our
exploring will be to arrive where we started and know the
place for the first time." -- T. S. Eliot

 

[Richard Cornford]

"Owen Brunker" wrote:

Why not post a link to an example page so others can confirm this?

It is not necessary to post a link to an example page, and may be
counter-productive in some cases. I, for one, read news off-line and
will not re-connect just to look at some referenced web-page, unless I
am really interested in the problem.

An option, and often a very good one, is to create and post a cut-down
'test-case' page that demonstrates the issue in isolation (a page that
is complete in itself but devoid of anything superfluous). This is at
least in part because creating such a 'test-case' page often allows the
individual asking the question to solve their own problem, as the act of
isolating it often exposes its significant features. The FAQ for the
group propos that no more than about 500 lines of code (combined HTML
and scripts) should be posted, but most properly cut-down test cases can
be created (well) within that limit. The FAQ also proposes that such
test-cases should also be made available on-line for the convenience of
those reading on-line.

This attitude differs from some other groups, such as some HTML groups,
but the situation is (or can be) different here. While other contexts
may imply an interest in, say, HTTP headers, actual page structure (and
its imported resources) the same is rarely true of javascript questions.
Granted there are circumstances where a link is the only sensible
option; interactions between multiple pages (framesets), when images are
a significant part of the issue/context (as images just cannot be posted
to the group), etc.

It is unlikely that anybody is going to copy and paste your code to
their server for testing.

If the OP makes it easy enough (provides an example that can be posted
in one chuck as a new HTML document) then it is quite likely that some
will be willing to look at it. Fragments of code that are intended to
interact with an HTML DOM, without any HTML for them to interact with
(or the triggering code) will likely be beyond the effort threshold for
actual testing.

From what I can see, you never call the appropriate functions.
I assume you do this inline somewhere, but without seeing your
page and/or instantiation code, it is just a guess.

<snip>

You see, you looked. And if you had had the HTML as well you may have
known the answer instead of having to guess at it.

Richard.

 

[Owen Brunker]

You might be interested in an alternative technique called "sliding
doors". Instead of changing the background image, you create one image
and slide it left/right or up/down.

<URL: http://www.alistapart.com/articles/slidingdoors/ >
<URL: http://www.alistapart.com/articles/slidingdoors2/ >

The sliding effect is instantaneous, you don't actually see the images
slide, they just change.

Thanks for the link Rob, I like what I see. In this project though, the
image urls are defined by the user and maintained in an SQL database. I
guess it is possible to have PHP merge the images as they are served. I
wont be able to explore these options on this project though.

And please don't top-post, reply below trimmed quotes.

I'll make sure I do this in future. Thanks for the info.

Cheers
Owen Brunker

 

[Owen Brunker]

Right. More appropriately (and I think explained later in the thread), I
wanted him to post the whole thing (or a link to the whole thing.) It is
likely that if a test case was posted that included the HTML and the code
that interacted with the posted object, the solution would have been
apparent.

You are right, I should have given all the information. I was sure though
that the problem was in the class and not in the implementation. I still
haven't got it to work yet, but even with whet you have given me so far, it
has triggered some thought processes. I am going to try out some ideas so
that I can learn a bit more about how the Javascript interpreter works.
This might reveal to me where the issue is. If I still can't get the class
to work, I'll post it to the news group in the way that Richard has
suggested. I do have a working example for Mouse Overs, but it is not in
the form of a re-usable object. It frustrates me terribly when I have to
cut, paste and modify code every time I want to re-use something. I know
that when I do this, I usually forget something or leave something out that
introduces bugs.

Thanks for your help

Cheers
Owen Brunker

 

[Owen Brunker]

An option, and often a very good one, is to create and post a cut-down
'test-case' page that demonstrates the issue in isolation (a page that is
complete in itself but devoid of anything superfluous). This is at least
in part because creating such a 'test-case' page often allows the
individual asking the question to solve their own problem, as the act of
isolating it often exposes its significant features. The FAQ for the group
propos that no more than about 500 lines of code (combined HTML and
scripts) should be posted, but most properly cut-down test cases can be
created (well) within that limit. The FAQ also proposes that such
test-cases should also be made available on-line for the convenience of
those reading on-line.

Thanks for the info Richard. I am going to try out a couple of ideas. If I
have no luck, I'll repost the problem in the way you suggest.

Cheers
Owen Brunker