Two Rollovers - question on Javascipt

Brooke's picture

She has: 681 posts

Joined: Feb 1999

I am attempting this for the first time and am having loads of trouble. Please note that I am VERY new at js.

I want two rollovers - when you rollover one graphic that graphic changes and so does another one.

I have searched all over and found a good explanation at: http://www.pageresource.com/jscript/jhover2.htm

However - it is not working for me. You can see what I have done here: http://www.cataluna.com/new/Templates/MR_TEST.HTML

When you look at the code just the indented areas are the javascript that needs to be looked at. I do have quite a few more buttons that you will see in the script that I have not actually added yet to the html. I wanted to get the rollover working on one first.

I need HELP - PLEASE! Sad
Thanks in advance!!

Brooke

Cataluña - your Web and Print Connection

02bunced's picture

He has: 412 posts

Joined: May 2005

http://johnp.co.nz/techstuff/2x_css_rollover_demo.htm

Uses CSS rather than JavaScript, meaning it is simpler and more accessible to people who have Js turned off

CptAwesome's picture

He has: 370 posts

Joined: Dec 2004

You simply have to write a function to change 2

function roll2(oneid,twoid){
oneid.src="imagename.jpg";
twoid.src="imagename2.jpg";
}

etc, you can make a lot more variables in that, and you'd want to do it with ifs to check whether to switch to the rollover one, or back from it.

Roo's picture

She has: 840 posts

Joined: Apr 1999

CptAwesome wrote: You simply have to write a function to change 2

function roll2(oneid,twoid){
oneid.src="imagename.jpg";
twoid.src="imagename2.jpg";
}

Does this go in the style sheet?

If it does, how to you call it in the a tag....class="function"?

Roo

Brooke's picture

She has: 681 posts

Joined: Feb 1999

Thank you both for your help. I have a lot of reworking to do on this new site and that part will be a huge matter for me to fix - so I really appreciate your help!

Brooke

Brooke's picture

She has: 681 posts

Joined: Feb 1999

Hey guys - O2bunced, I have been trying that CSS link that you gave me but am still having difficulty. I do not know that much CSS so I having problems with a couple of things:

1. I do not know how to replace the text links with an image in the CSS code

2. They are using the same bg graphic for the original image - I am not, so I am not sure what to do

Can you help me on this guys?

TIA!

Brooke

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

Oooh, I love that moving one image trick. Beats the heck out of image pre-loaders, all you have to do Brooke is change the background: url(imgfilename.gif). So for instance:

a:link { background: url(image1.gif); }
a:hover { background: url(image2.gif); }

It is better to use one single image and move its position though - eliminating the need for a pre-loader - this will work unless you're using an animated gif, moving the position of something animated really screws some browsers up. Sad

Next job is to lookup something called specificity. LoVeHA is always a good rule to remember as well Link, Visited, Hover, Active. That being the order you should always put the css psuedo-classes into. For example:

a:link {
...properties...
}

a:visited {
...properties...
}

a:hover {
...properties...
}

a:active {
...properties...
}

Hope this helps!

a Padded Cell our articles site!

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

Oh and to replace text with an image see:
http://www.mezzoblue.com/tests/revised-image-replacement/

The techniques here are quite advanced, so if you're unsure about css it's probably not a good idea to dive into them on a live design straight away.

Sorry, didn't read your post properly Roll eyes

a Padded Cell our articles site!

Brooke's picture

She has: 681 posts

Joined: Feb 1999

Thanks! I am going to take a look at all of that and keep your suggestion in mind. I always seem to dive right in and try to figure things out! (guess that's way it takes me so long!)

Thanks again!

Brooke

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.