Javascript Rollovers

Coog03 posted this at 20:28 — 30th July 2003.

Joined: Feb 2003

Hello,

A month ago I designed a site for a client. I used the OpenCube dropdown menu for their navigation. now with a redesign on the horizon they don't want to pay $300 for the licensing for it. So I designed another menu in Fireworks that works the same. but I have lost the important features of the navigation.

The site has two frames, header and content the nav is in the header frame as well as the two images to be swapped.

These features lost were:

-Each section of the site has an image that goes in the header frame. When you rollover the navigation the image changes to that sections image and once you are not ontop of any of the nav it defaults back to the sections default image.

when a user selects a menu item the content page loads and this code in the content page reloads the header.

thanks in advance..if you need any clearer explaination then I can provide it to you.
<script language="JavaScript1.2" type="text/javascript">
parent.defImage = "images/services.jpg"
parent.TitleImg = "images/cad.jpg"
parent.Header.location = "header.html"
</script>

this tells the header to load the services image and the image called cad because this is the CAD section under services.

I don't have an online example to show you but the opencube script used a dqm_loader to interpret all of this code and when its menu was rolled over the menu appeared and the section rollover would changew and depending on the section the default image and section image we loaded.

I need to seperate thess image swapping functions from open cube and make them work wiht my fireworks menu.

ShaneS posted this at 14:43 — 4th August 2003.

They have: 93 posts

Joined: Jun 2003

Well if you have ever noticed most of the professionals have gotten away from frames.

They have too many qwuirks and issues when you are trying to get a project done quickly and efficiently. The look great from a pure HTML aspect, I mean what other way can you update one file to change the site right...well I think most other designers will agree server scripts have made frames pretty much un-needed.

That said,your image thing, is rather simple with JS and the DOM

For an image swap, you need some JS actions, and a few functions

OnMouseOver
OnMouseOut
OnClick

(you could use CSS is I am not mistaken, because of the A:link, A:active A:hover, but I will use JS to make sure it works)

Here is an example

(I know the needed tags are missing, just an example)

Cad

Alright lets assume the header load with an image already, that foo.jpg, and I gave it the id of switch.

SwitchImage(image){
default = document.getElementById('switch').src; //might need .value added after src
document.getElementById('switch').src= "new.jpg";
}
DefaultImage(){
document.getElementById('switch').src = default;
}

</script>

[Design Alpha] -Web Services : Design,Hosting,Advertising,Software
Ask about custom pricing on hosting!!
Site Assets: [UltraGaming.com] [Blades of Warcraft]