CSS question or two

[Helevitia]

I have LinkA and LinkB

My link tags look like this:

A:link {text-decoration: none; color: #FFFFFF}
A:visited {text-decoration: none; color: #FFFFFF}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: #000000;}

How do I change the colors for LinkB? For instance, LinkA is white and hover is black but I want LinkB to be black and hover to be blue. How do I do this?

Thanks!

[Helevitia]

OK, I figured it out looking around the web. Just in case you are interested:

<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>

[dbdg]

and I arrive two hours too late to answer,

..are you going to show us the site when you have finished?

[Helevitia]

ummm, well, go easy as I just started learning CSS a few days ago. I used CSS to create all "tables". I guess they are called boxes in CSS?

http://www.hilliardhouse.net/indexcss.htm

BTW, it looks a tad better in FireFox. Feel free and give me any pointers as I really have no clue what I am doing.

[Helevitia]

OK, I'm stuck again. Is there a way to do mouseovers with images in CSS or do I need to start learning javascript? I've looked around the web but haven't come up wtih any clear answers. thanks for the help!

Dave

[Jessterw]

There are several ways to do CSS image rollovers; however, it requires a shift in the way one incorporates images into their page design. Basically, if you want to change an actual image element from one image file to another, then, yes, you shall want to invest some time in the learning of the necessary Javascript.

If you're having trouble finding good source material, then I suggest looking through A List Apart and HTML Dog. Specific to your inquiry though, here are a some articles, from ALA, to get you started:

- CSS Design: Mo' Betta Rollovers
- Dynamic Text Replacement
- CSS Sprites: Image Slicing's Kiss of Death
- Night of the Image Map

The first applies specifically to what I think you're on about, the others might give you some more ideas to work with.

[dbdg]

Big Edit.

Two options.

1. Effect current Div.
<div id="name" class="defaultclass" onmouseover="this.className='hoverclassr'; this.style.cursor='pointer'" onclick="location.href='link.htm'" onmouseout="this.className='defaultclass'" title="title>Text</div>

Images/colours borders etc set in the css.

Buttons here created as above.

2. Effect image on page

<a href="link.htm" onmouseover="elementname.className='hoverclass'" onmouseout="elementname.className='defaultclass'" title="title">Text</a>

Images/colours borders etc set in the css.

Region hovers here created as above

[Tom]

...and I thought that this was going to be a Counter Strike Source thread

[Helevitia]

Thanks for the info JW & dbdg. I ended up using a javascrpit that I found on the web, but I'm now stuck again since trying to use the javascript more than once messes things up Do you guys know javascipt at all?

OK, I get the first image and rollover image to work fine. It's when I am trying to do a second image with a rollover image, it causes both images to stop working. Here is the cjavascript I am using:

script language="javascript" type="text/javascript">

normal_image = new Image();
normal_image.src = "http://www.hilliardhouse.net/images/icons/house.gif";

mouseover_image = new Image();
mouseover_image.src = "http://www.hilliardhouse.net/images/icons/house1.gif";

<!-- repeat the 4 lines above for any subsequent images. -->

function swap(){
if (document.images){
for (var x=0;
x<swap.arguments.length;
x+=2) {
document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
}
}
}
</script>

Here is the html code, I am using:

<div id="header1">
<a href="http://www.hilliardhouse.net/" onMouseOver="swap('name_of_img','mouseover_image')" 
onMouseOut="swap('name_of_img','normal_image')">
<img class="icon-position" name="name_of_img" src="http://www.hilliardhouse.net/images/icons/house.gif" border="0"></a></div>

Now, I don't know javascript but I can understand the jist of what it is doing. When I try to repeat the first 4 lines in the javascript, and add the html code for the second image, and of course change all of the links to the appropriate new image, it causes the rollover features to stop working on both images. I can only guess that I need to change the second set of 4 lines to be specific, but how?

Thanks for all the help so far, very much appreciated

[Helevitia]

Here is what one image looks like that is working:

http://www.hilliardhouse.net/indexcss.htm

This is what it looks like with two images failing. I realize the positioning of the second image is off, but I am not worried about that right now. I just wnat to get the rollover effect to work on two images. Look what happens when you rollove the second image, it disappears!

http://www.hilliardhouse.net/indexcss1.htm

[schmosef]

both rollovers work for me in the second example. try clearing your browser cache.

[Umfriend]

Both work for me as well, as does Pacman!

[Helevitia]

When I first read that you guys had no problems with the rollovers, I thought it might just be that it works in IE and not Firefox, but after coming to work and testing it in both IE and Firefox, it DOES work! Sweet. So something is wrong with my browser at home. I'll have to try clearing the cache and see what happens.

And yes, Pacman can be fun I've played it myself several times

[Jessterw]

And that is why I recommended using CSS

[Helevitia]

And that is why I recommended using CSS

I tried to find a simple solution but I either don't understand how to do it, or all of the examples I saw are way overboard. I figured there would be a n easy way to do an image rollover in CSS, but I have yet to see it.