Brooke — Tue, 28 Jun 2005 17:52:43 +0000

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

JeevesBond — Thu, 23 Jun 2005 12:30:05 +0000

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

JeevesBond — Thu, 23 Jun 2005 12:11:25 +0000

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!

Brooke — Wed, 22 Jun 2005 22:35:35 +0000

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

Roo — Mon, 20 Jun 2005 22:45:39 +0000

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"?

Brooke — Mon, 20 Jun 2005 21:51:20 +0000

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

CptAwesome — Thu, 16 Jun 2005 04:23:42 +0000

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.

02bunced — Wed, 15 Jun 2005 18:01:20 +0000

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