3-way image flip help please!

[Falco]

Hey there everyone, hope you're all doing great!

Well, here's what I'm trying to do without the slightest knowledge of JS.

I have a navigation bar made up images that were sliced for each section. There's also a separate area of the page that has "description" images, that describe the section the person has rolled over. I want it so that when someone rolls over any image, that image changes to a different color, and there's also a new image in the "description" area that has an explanation of that section.

I've seen this done a lot, but I've never been good about plugging JS into my pages, though HTML doesn't seem to bother me.

Anyway, if someone can pass along a cross-browser script that is aetiap (as easy to install as possible!), I would really appreciate it. And maybe some instructions on plugging it in.

Thanks so much,
-Falco

[WebKat]

<<< Falco, thought you would have more response in the Client Side Scripting Forum ~ moved from Web Page Design...[/i]WebKat, Community Senior Advisor >>>

[Vincent Puglia]

Hi Falco and welcome to the forum,



Since you say you have little to no experience with javascript, my standard recommendations for newbies:

1) book for beginners: SAM's Javascript in 24 hours
2) the javascript primer: http://www.htmlgoodies.earthweb.com

Insofar as your problem:

There are a number of ways to do what you want. One of them is to create a function that executes both actions (rollover link and desc) and to call that function with an onMouseover event handler.

It can look something like this:

<a href='javascript:void' onMouseover = "swapImages(1)">
<img src="pic1.gif"></a>

function swapImages(imageNum)
{
document.images[imageNum].src = myImages[imageNum];
document.images[ImageNum].src = myDescImages[ImageNum];
}

The above presumes that your image sources are in arrays and that they are set up so that the images for pic1, for instance, are in the same position.

var myImages = new Array();
myImages[0] = 'pic1.gif';
myImages[1] = 'pic2.gif';

var myDescImages = new Array();
myDescImages[0] = 'picDesc1.gif';
myDescImages[1] = 'picDesc2.gif';


You might also want to preload the images so that when the mouseover occurs, it occurs seemingly instaneously.

Hope this hasn't confused you totally When you get something up and buggy ( very little ever works the first time except for simple alerts) , post some code or a url and I/we will be glad to help.

Vinny

[Falco]

Hey Vinny & co. Wasn't trying to ignore your kind reply, just too busy. Just an update to let you all know that I finally got something working. Hooray!!!

http://www.clearquest.net/firestorm/...ndexmouse.html

Now 2 problems that aren't JS related, but I could still use some help as I don't have a ton of time to troubleshoot.

1) The side nav images on the left aren't lining up. I've noticed this in HTML.... all the coding is the same, and it's not gaps in the images, but some of the images have bigger gaps in between them then others. Notice how the bottom three are really close to each other, with hardly any space between them... well the top few have large gaps between them, even though the coding is the same. Not only is it ugly, but it creates some problems with the rollover since if someone tries to roll from one "nav section" to the other, the "welcome" image comes back since it doesn't think the mouse is over any particular image.

Wow, that was long!!! Okay, any ideas how to fix that??? Thanks!

2) In NS, the "description" image isn't aligned to the far right. I've tried to align it right with div's, IMG aligns, and P's, but nothing has worked. How can I get that image on the far right in NS like it is in IE?

Thanks again so much!!!
-Falco

[Vincent Puglia]

Hi Falco,

Glad you got it up.

Re:

Now 2 problems...as I don't have a ton of time to troubleshoot.

Ditto.

Vinny

[Falco]

Got it fixed at another forum Vinny, no prob.