a rollover here, an onclick there...

Hullo folks, this is the first question I'm posting here, and I was torn between posting it to the Web Design board and this one. Hope I made the right choice, apologies if not. Also, I did read through existing topics (here and over in Web Design) to see if my question had already been posed, but didn't encounter anything similar upon first glance; if it has, I'd appreciate a pointer to the original thread.

So. I have an HTML page. It's for school, and I only care about IE6+, NS7+, and Opera7+. At the moment, I also only care about Windows; it's not like this is going into a production environment.

Anyhoo. I have a nav bar, and I have a content div. When one clicks on a link, the image changes (to img_on), and the corresponding div is made visible. The image changes back (to img_off) when one clicks on another link. This all works fabulously (after much, MUCH toil and insomnia on my part).

What I want to happen now is this: I want a regular rollover to work, too. Obviously, I can't just stick a rollover script in there; the onmouseout would defeat the purpose of my onclick img change. Conceptually, I think I have it worked out. In pseudocode, I think I want the following:

if any div's visibility = hidden, the associated image's src = img_on onmouseover, and img_off onmouseout.

Of special relevance is that each div has an id, and the associated image's id is divID + 'Img'. For example, the link to display my 'bio' div has the id 'bioImg'.

If I'm on the right track conceptually, I'd really appreciate some help with the code. Please note that I don't know any JavaScript at *all*. Whatever I've spluttered thus far is knowledge accrued in several hours over the past 4 days or so. I will attempt to follow any explanation, and look up what I don't understand, but please keep my newbieness (hmm... Her Royal Newbieness... I kinda like it) in mind when responding.

For my show/hide layer and onclick stuff, I am using a modified version (I did it myself!) of Dynamic Web's script, which uses the umm... getElementById way of doing things, but allows for the eccentricities of lesser browsers.

Thanks very much for reading. I'm grateful for any assistance, and would be happy to provide any other relevant info necessary.

is what your looking for something similar to:

http://www.kelvinbeats.com/doc.php?inc=hear.php

Near the bottom at the track listings section ???

I can't be certain, to be honest, but I don't think so. It appears to me that on that page, the rollover works whether or not a div is visible. The green +/- sign, ya? What I want is for the rollover to not work if the div is visible. Bah. Perhaps I'm not being clear. My apologies -- it's all so clear in my head!

alright, I think I understand it a little better now.

you just need to wrap the mouseover state handler in a state checking function, or just omit it from one of the cases.

The example I linked you to earlier, just swaps 2 seperate div's properties giving the illusion of an expanding element. You can just omit the mouse handlers to achieve your desired result though

Hth...

Thanks for the response. Might you be able to suggest any pointers for accomplishing such a thing?

http://www.getelementbyid.com/scripts/i ... ?CodeID=34

I think this will work for you, if not, I'll whip something up

Thanks, but that script is for collapsing and expanding menus. That is definitely not what I need.

Appreciate your time, anyway.

no doubt I could help if i understood your goal!

What can I do to clarify?

hmmm, screenshot of site with arrows and stuff drawn on?

Well, it's not a screenshot, but here's the site. It seems to be having problems in IE6/Win, which I'll worry about later. Works fine in Firefox 0.8, Netscape 7.1, and Opera 7.23.

So, what I was saying was that if you click on one of the links, you'll see the img src changes, as does the associated content div. What I want to do is check to see if any div in the document is hidden, and if it is, check its ID, and change the src of image with imgID (which is divID + 'Img') to on onmouseover and off onmouseout.

OK I'm starting to get the idea...
"if you click on one of the links, you'll see the img src changes"
- you have several images, which one?


"What I want to do is check to see if any div in the document is hidden, and if it is, check its ID, and change the src of image with imgID (which is divID + 'Img') to on onmouseover and off onmouseout."

What?
- find if there is a hidden DIV, and remember it's ID in variable $div_id (just using the $ cos this is not real code)...
- find an image with id = $div_id+"Img"
- chage src of that image to... what?

Yay, we're getting somewhere!


Any one. Click on Bio, and the div with id 'bio' appears, and bioImg.src changes from bio_off.jpg to bio_on.jpg. Click on Hi, and the div with id 'hi' appears, and hiImg.src changes from hi_off.jpg to hi_on.jpg.


Yep! don't know how to do that.


Yep, your pseudocode's better'n mine.


onmouseover: $div_id + "Img" + "_on.jpg"
onmouseout: $div_id + "Img" + "_off.jpg"

Thanks for sticking with me through this, appreciate it!

um, why not have the nav images on the left do the mouseover and mouseout ALL the time, and keep the existing functionality where you click one of the nav images and the content DIV is changed?

oh you want the nav image ascociated with the currently displayed DIV to be different to the other images ?