If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Image swapping multiple elements

I have a page with lots of elements, the images of which are changed by mouseover/mouseout. I'd like to be able to put them into a group, so I can just image swap group A instead of using scripts that get each element with document.getElementById and tell each one to change to the new image, like I have now. All elements on the page are being swapped to the same image. All the page really does is highlight multiple areas when one of them is moused over.

I've looked into document.getElementsByClass, document.getElementsByClassName, and document.getElementsByTag, but then I see that they don't work in particular browsers or need jQuery or what have you, and I'd really like to keep it simple rather than creating a monster of a page just for a simple image swap.

So on mouseover it gets C1p and changes it to the highlight image, gets C1c and changes it, plus all the rest if I had chosen to continue along that path instead of asking for a new method. On mouseout, it changes each element back to the blank image.

but I have no idea if it needs to be in a script, or a function, or somewhere else, or if it needs any other new code in the page to work. "Document ready" was mentioned, but I don't know what that is or how to use it.

So, is there a concise, simple way to accomplish what I'm looking for, or do I have to choose between labeling each element to change one by one on the one hand and making a page that calls other pages and arrays and whatnot on the other?

It's set up as a bunch of tables, and each one has one element from each group. So, I would have table 1, 2, and 3, and table 1 has elements A1, B1, and C1, table 2 has A2, B2, C2, and so on. When I mouse over A1, it highlights the "A group" element in each table: A1, A2, A3, and so on.

Yeah, I don't see how to do that all in CSS, but pretty trivial in JS coding.

But that also doesn't match what you showed in the first post, where you have ID's "C1p" and "C1c".

So are A1, B1, C1, etc., class names??

Sorry, I just used "A1 B1 C1" for a general explanation. Yes, the actual names right now are C1p, C1c, and then more if I have to do it that way (C1h, C1g, etc.). I'd like to be able to just call them all "C1" as they'll all be swapped to an identical image and are always called together, but if multiple elements are given the same ID, document.getElementById swaps the first one it finds and then stops. So I'm looking for something that'll keep going and change all elements with that label.

Users who have thanked Old Pedant for this post:

I had a go at that getElementsByName method, but it didn't seem to work. It displays a table with the varicolored squares, but doesn't change them to anything on mouseover. I changed blue.png to bluesquare.png, red.png to redsquare.png, orang.png to orangesquare.png, and blank.png to whitesquare.png. All the images are the same size. I've uploaded the page to my website so you can investigate if you like.

But, as far as I understand it, the first function gets every element, and does the doMouseOver function on mouseover, and the doMouseOut function on mouseout. The second function gets all the elements that share the same name and changes their image to blank.png (whitesquare.png in the linked page). The last function changes everything back to the original image. Is that about right, or am I missing a key element?

I really appreciate your showing the entire code so I can see where everything needs to go and how it should look; it's a great help.

First step out of the box, using F12 on your page, I get a syntax error on line 37. Which is:

Code:

pic.onmouseout = doMouseOut:

You have a COLON there, where a SEMICOLON is needed.

Fix that one error and it works.

If you haven't learned to use a debugger, it's past time. Just hit the F12 key in your browser (for Chrome or MSIE 8+) and look at the CONSOLE tab to see your errors. After that, you can start to learn all the really powerful features of the various JS debuggers. I prefer Chrome's, but any of them will do.

An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.

First step out of the box, using F12 on your page, I get a syntax error on line 37. Which is:

Code:

pic.onmouseout = doMouseOut:

You have a COLON there, where a SEMICOLON is needed.

Fix that one error and it works.

If you haven't learned to use a debugger, it's past time. Just hit the F12 key in your browser (for Chrome or MSIE 8+) and look at the CONSOLE tab to see your errors. After that, you can start to learn all the really powerful features of the various JS debuggers. I prefer Chrome's, but any of them will do.

Oh. Oops.

My last reply ended up taking nearly a week to get approved for posting, so I went ahead and just did the project the way I originally planned:

I've already gotten a request for a new feature. Someone suggested that I add a way to choose the key of the harmonica, and I thought perhaps I could also swap the other instruments as well. I'm going to use the set content feature in jquery, with .html. However, that would run into the problem of each "document.getElementById" element needing to be both unique and present (if an element isn't there, the function stops - maybe there's a way to get it to ignore failures and continue through the rest of the function, but I don't know it). So this proper way of doing things will come in very handy.

I tried responding a few days ago, but it doesn't seem to have gone through yet. I suppose it'll be allowed through eventually, just like the previous post. And now I'll post this, and it'll show up one day. Is there something I'm supposed to be doing to make my posts show up more quickly?

Anyway, I have an update. I don't quite remember what I put in my last post that hasn't showed up yet, but I've been working on an improvement to the webpage. It uses jQuery and AJAX to replace parts of the code with text from another file when you click the appropriate button. It does that, but creates a new problem: mousing over an element in an AJAX-loaded section doesn't highlight anything. Mousing over an element from the original content (instead of AJAX-loaded content) highlights everything properly, in all the right places, but, on mouseout, the AJAX-loaded stuff doesn't un-highlight and just stays lit up until you refresh the page or get new AJAX content.

It plays all sounds (with the Web Audio API, in Chrome) properly, in both the original content and the AJAX-loaded content.

Is this something to do with the highlighting function somehow not seeing the new tables after they're loaded? Do I need to attach (with attachAll) something else? Or should I reload the highlighting function after each AJAX action?

One more thing: AJAX loading works when I put the page on my website, but not if I test it on my local computer. Is that normal? Or is there something I'm supposed to do to make it work?