Back To Programming / Scripting / Coding Forum

a rollover here, an onclick there...

  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Joined: Feb 14, 2004
  • Posts: 971
  • Loc: South Jersey, US
  • Status: Offline

Post February 18th, 2004, 1:42 am

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

Post February 18th, 2004, 1:42 am

  • LazyJim
  • Student
  • Student
  • No Avatar
  • Joined: Feb 15, 2004
  • Posts: 92
  • Status: Offline

Post February 18th, 2004, 7:26 am

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
  • No Avatar
  • Joined: Feb 15, 2004
  • Posts: 92
  • Status: Offline

Post February 18th, 2004, 8:12 am

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. }
  15. /*
  16. // The above functions can be called from the mouseover
  17. // and mouseout events of the IMG elements.
  18. // You will also need to make sure if you have a default DIV
  19. // when first arriving at the page, that the related image 
  20. // in the navigation section has the "_on" source specified.
  21. */
  23. /* ...end LazyJim functions */


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

Post February 18th, 2004, 6:11 pm

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
  • Joined: Feb 14, 2004
  • Posts: 971
  • Loc: South Jersey, US
  • Status: Offline

Post February 19th, 2004, 2:10 am

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
  • No Avatar
  • Joined: Feb 15, 2004
  • Posts: 92
  • Status: Offline

Post February 20th, 2004, 11:31 am

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
  • Joined: Feb 14, 2004
  • Posts: 971
  • Loc: South Jersey, US
  • Status: Offline

Post February 20th, 2004, 11:57 pm

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
  • No Avatar
  • Joined: Feb 15, 2004
  • Posts: 92
  • Status: Offline

Post February 21st, 2004, 3:39 pm

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
  • Joined: Feb 14, 2004
  • Posts: 971
  • Loc: South Jersey, US
  • Status: Offline

Post February 22nd, 2004, 5:45 pm

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
  • Joined: Feb 14, 2004
  • Posts: 971
  • Loc: South Jersey, US
  • Status: Offline

Post February 22nd, 2004, 6:29 pm

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
  • Joined: Feb 14, 2004
  • Posts: 971
  • Loc: South Jersey, US
  • Status: Offline

Post February 22nd, 2004, 9:32 pm

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
  • No Avatar
  • Joined: Feb 15, 2004
  • Posts: 92
  • Status: Offline

Post February 23rd, 2004, 12:44 pm

lol congratulations :)

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

1, 2

Post Information

  • Total Posts in this topic: 27 posts
  • Users browsing this forum: No registered users and 162 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.