a rollover here, an onclick there...

  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

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.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • phpSelectah
  • Student
  • Student
  • User avatar
  • Posts: 97

Post 3+ Months Ago

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 ???

:D
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

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! :oops:
  • phpSelectah
  • Student
  • Student
  • User avatar
  • Posts: 97

Post 3+ Months Ago

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 :D

Hth... :-D
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

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

Thanks for the response. Might you be able to suggest any pointers for accomplishing such a thing?
  • phpSelectah
  • Student
  • Student
  • User avatar
  • Posts: 97

Post 3+ Months Ago

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

I think this will work for you, if not, I'll whip something up
:)
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

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

Appreciate your time, anyway.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

no doubt I could help if i understood your goal! :lol:
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

:cry:

What can I do to clarify?
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

hmmm, screenshot of site with arrows and stuff drawn on?
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

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.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

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?
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

Yay, we're getting somewhere! :mrgreen:

Quote:
Quote:
"if you click on one of the links, you'll see the img src changes"

- you have several images, which one?

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.

Quote:
- 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)...

Yep! don't know how to do that.

Quote:
- find an image with id = $div_id+"Img"

Yep, your pseudocode's better'n mine. :oops:

Quote:
- chage src of that image to... what?

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

Thanks for sticking with me through this, appreciate it! :D
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

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?
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

oh you want the nav image ascociated with the currently displayed DIV to be different to the other images ?
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

Quote:
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?

The navbar images have two states - on and off. The default is off, and that's how the page loads. When a content layer is visible, its associated image is on; the onclick takes care of that. Now if, per your suggestion, I let the navbar do the rollover all the time, then the onmouseout will return the image's state to off, producing an undesired effect. It must remain on as long as its associated div is visible, hence my solution to the problem, which I don't know how to code.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

ok i think i know what u want now!

I'll take a peek at your curret scripts and see if I can come up with an instatn solution ;)
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

OK ...

add this to the end of your <script>:
Code: [ Select ]
/* functions added by LazyJim... */
function imgHover(oImg) {
    if (!oImg || oImg.nodeName != "IMG") return;
    var sSrc = ""+oImg.src;
    sSrc = sSrc.split("_off");
    if (sSrc.length==2) oImg.src = sSrc.join("_hover");
}
function imgUnHover(oImg) {
    if (!oImg || oImg.nodeName != "IMG") return;
    var sSrc = ""+oImg.src;
    sSrc = sSrc.split("_hover");
    if (sSrc.length==2) oImg.src = sSrc.join("_off");
}

/*
// The above functions can be called from the mouseover
// and mouseout events of the IMG elements.
// You will also need to make sure if you have a default DIV
// when first arriving at the page, that the related image 
// in the navigation section has the "_on" source specified.
*/

/* ...end LazyJim functions */
  1. /* functions added by LazyJim... */
  2. function imgHover(oImg) {
  3.     if (!oImg || oImg.nodeName != "IMG") return;
  4.     var sSrc = ""+oImg.src;
  5.     sSrc = sSrc.split("_off");
  6.     if (sSrc.length==2) oImg.src = sSrc.join("_hover");
  7. }
  8. function imgUnHover(oImg) {
  9.     if (!oImg || oImg.nodeName != "IMG") return;
  10.     var sSrc = ""+oImg.src;
  11.     sSrc = sSrc.split("_hover");
  12.     if (sSrc.length==2) oImg.src = sSrc.join("_off");
  13. }
  14. /*
  15. // The above functions can be called from the mouseover
  16. // and mouseout events of the IMG elements.
  17. // You will also need to make sure if you have a default DIV
  18. // when first arriving at the page, that the related image 
  19. // in the navigation section has the "_on" source specified.
  20. */
  21. /* ...end LazyJim functions */


and this to you navigation images' tags:
Code: [ Select ]
onmouseover="imgHover(this);" onmouseout="imgUnHover(this);"
  • phpSelectah
  • Student
  • Student
  • User avatar
  • Posts: 97

Post 3+ Months Ago

I had something similar, but I couldn't get the mouseovers to work in IE,
which is really wierd.

:?: :!: :evil:

I'll post the code I had when I get home, lol. :roll:
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

LazyJim, I appreciate the time and effort you've put into this, but I'm sorry to report that your functions don't do what I want. As near as I can tell - though I don't understand the actual code at all - you've just added a regular rollover. On IE6/Win, it works all the time, even on the nav image associated with the layer visible at the time.

I've got 5 projects and 2 exams to submit this week, but I'm going to try and devote some time to this over the weekend.

Thanks again, for not giving up on me.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

I think the problem is in my instructions for use, not the code...

my script relies on each rollover having 2 images called the same thing apart from the _off and _hover part.

it swaps between _off and _hover
but ignores all other images

perhaps I should have made it clearer.

This image will have mouse-over:
Code: [ Select ]
<img src="image_off.jpg" border="0" onmouseover="imgHover(this);" onmouseout="imgUnHover(this);" >


But this one will not:
Code: [ Select ]
<img src="image.jpg" border="0" onmouseover="imgHover(this);" onmouseout="imgUnHover(this);" >
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

Well, I didn't think it was possible, but I just keep feeling dumberer and dumberer. :oops:

I don't understand -- how can I hard-code the rollover for an image when whether or not it works is supposed to keep changing?
Sorry, LJ...

Well, it could also be that I'm frazzled with all the stuff I've been swamped with this week. Like I said, I'll try 'n' devote some time to it this weekend, and see if some of this doesn't start to make some sort of sense.

As always, thanks for your time!
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

Look, lets say you have one rollover, the normal image for normal-state is called image_off.gif, the image for hover-state is called image_hover.gif, and the image for clicked-state is called image_current.gif. (_current is just an example)

once you have those images in place on the web server (or your hard drive) then you can add the code:
Code: [ Select ]
<img src="image_off.jpg" border="0" onmouseover="imgHover(this);" onmouseout="imgUnHover(this);" >


Then you make sure my script is in place. It will swap the part of the name from _off to _hover and back again.

Your existing script needs to take care of changing it to _current.

Ah wait a minute - "Can you do that for me, pretty please!"

It's not plug&play you have to use your own brain too!

I'm here to help.

I'f you don't like my script, then I'll help you through making a new one.

But if you've not even tried to learn a little bit of JavaScript yourself - I'm NOT doing it for you!
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

I appreciate the explanation, LJ. I'm not asking anyone to do my work for me, I'm just looking for pointers. I just didn't understand what you were saying.
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

Quote:
Look, lets say you have one rollover, the normal image for normal-state is called image_off.gif, the image for hover-state is called image_hover.gif, and the image for clicked-state is called image_current.gif.
There is no third image. image_current = image_on. Would that be why I'm seeing this behavior? Your script works fine, but is functioning as a regular rollover.

Quote:
I'f you don't like my script, then I'll help you through making a new one. But if you've not even tried to learn a little bit of JavaScript yourself - I'm NOT doing it for you!
I'm trying to do so, but I'm starting from scratch; it's not an instantaneous process. I appreciate whatever help I can get on the way.
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

Hey, LJ, I got it to work!! :mrgreen:

Thank you so much for investing time into this, and explaining things to me. I ended up not using the script you so kindly provided, because I just don't know enough to understand it yet. I found another solution that I was able to modify to work for me. I haven't uploaded yet because I need to add the appropriate credits to the page, but will do so shortly.

After over two weeks of tearing my hair out, I'm 'bout ready to dance a jig. :mrgreen:

Thanks again!
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

lol congratulations :)

One of the best things about programming is there's always many ways to do every thing! :lol:

Post Information

  • Total Posts in this topic: 27 posts
  • Users browsing this forum: No registered users and 61 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.