Two Rollovers - question on Javascipt
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!
Thanks in advance!!
Brooke
Cataluña - your Web and Print Connection
02bunced posted this at 18:01 — 15th June 2005.
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 posted this at 04:23 — 16th June 2005.
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 posted this at 22:45 — 20th June 2005.
She has: 840 posts
Joined: Apr 1999
Does this go in the style sheet?
If it does, how to you call it in the a tag....class="function"?
Roo
Brooke posted this at 21:51 — 20th June 2005.
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 posted this at 22:35 — 22nd June 2005.
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 posted this at 12:11 — 23rd June 2005.
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.
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 posted this at 12:30 — 23rd June 2005.
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
a Padded Cell our articles site!
Brooke posted this at 17:52 — 28th June 2005.
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.