mouse over

  • 1
  • Question
  • Updated 9 years ago
  • Answered
hello - i am using the cleanslate template. I want my links to change color when the mouse is over them - is this known as mouse over? Although it does not do it by default i was wondering if there was a peice of code i could add to the links to get them to do it or does the style not contain the necessary head code? please help -
Lee.
http://hexhaminfo.synthasite.com
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
  • always happy

Posted 9 years ago

  • 1
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Lee,

I have a tutorial on my site.
Let me know if you need more help?
http://forsite.synthasite.com/tut-mou...
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Maybe I misunderstood your question, Lee

If you want a text link to change colour, use the following code:

<!--
<style> a:hover{color:red; } </style>
-->

Leave the <!-- and the --> out, and change the colour "red" to whichever
colour you would like. Place the code near the top of your page.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Thanks Boomer!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi Lee,

These may be what you are after. If you want underlines then use the underline code.

Attributes for BODY
TEXT = color expression
ALINK = color expression
LINK = color expression
VLINK= color expression

LINK color of a link before it has been followed
ALINK color of a link while it is being followed (an Active LINK)
VLINK color of a link after it has been followed (a Visited LINK)

Hope it helps.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
thanks everyone, i'll go and play with my new toys now. :)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Lee,

You can also look at using the "text decoration" tag if you want to remove the underline on your links. I'm using it on one of my sites. It applies to the whole page once invoked (if that's the correct word ?) Have a look here for more info on use:
http://www.w3schools.com/Css/pr_text_...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
thanks boomer - i wish i knew that earleir i have just added the text decoration to over a hundred individual links i didnt know you could apply it to the whole page.

What i really wanted to do was change the text color of a link and the border properties around it - see my homepage - i want to make these box's change when moused over, i could redo it and make them inot images but i would rather leave it as it is.



Lee.
http://hexham.info
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Lee,

I must be losing it. I seemed to have deleted the page with non-underlined
links, so I can't retrieve the code I used. I did another search and found
this, which I think is the correct code for removing the underline from the
entire page. I have not tried this, so try it on a test page first:

<!--
<style type="text/css">
a { text-decoration:none }
</style>
-->

There is a simple way of creating mouseover's on images using link opacity.
I'm using this on a new site of mine but have recently discovered that
the mouseover effect is not visible in IE. I don't have time to figure this
out at the moment, but when I do, I will place a tutorial on my site.

For now, I think your best bet is to chop up your top banner into individual pics.
Create a static and a mouseover image for each, and then follow the
tutorial on my site. http://forsite.synthasite.com/tut-mou...

Here is another site of mine where I made extensive use
of mouseover buttons. (Side and Top) http://rfparts.synthasite.com/

Just shout if you need anymore help.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Lee,
Sorry this has taken so long - Had to pop out for a while.
I've got it working - will post soon.

Just a quick question! Must the text be blue and change
to green OR must it be green and change to blue?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I think blue to green - i'll change it later if decide somethings better. thanks
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Have a look here so long. http://hindsite.synthasite.com/
I'm not finished yet - still tweaking it a bit.
Tell me which colour you prefer. Blue or green ??
Take note - It affects all the links (colours) on the page.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
the home button is working great - if its page wide it will be better green to blue, either way.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I thought the green to blue looked better as well.
I seem to be having a problem with the links.
The minute I change them, the colour changes - strange???
Give me a few minutes! OK
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Ok Lee, got it!

It seems to be working fine now.
http://hindsite.synthasite.com/
Here's the code:

<!--
<style type="text/css">
a {text-decoration: none; font-family:Arial; font-size: 12pt;}
a:link {color: rgb(137, 216, 26);}
a:visited {color: rgb(137, 216, 26);}
a:hover {text-decoration: none; color: rgb(0, 0, 255);}
a:active {color: rgb(137, 216, 26);text-decoration: none}

</style>

<font style="font-family: Arial;font-weight: bold; color: rgb(137, 216, 26);" size="3">A</font>
<ul style="text-align: left; color: rgb(137, 216, 26); font-size: 12pt;list-style-type:disc;">

<li><a href="http://hexham.info/accountants.php">A...>
<li><a href="http://www.hexham.info/agriculture.ph...>
<li><a href="http://www.hexham.info/antiques.php">...>
<li><a href="http://hexham.info/architects.php">AR...>
<li><a href="http://www.hexham.info/art-galleries-... GALLERIES & FRAMING</a></li>
<li><a href="http://www.hexham.info/arts-and-craft... & CRAFTS</a></li>
</ul>

<font style="font-family: Arial;font-weight: bold; color: rgb(137, 216, 26);" size="3">B</font>
<ul style="text-align: left; color: rgb(137, 216, 26); font-size: 12pt;list-style-type:disc;">

<li><a href="http://http://www.hexham.info/bakerie...>
<li><a href="http://www.hexham.info/banks-building... & BUILDING SOCIETIES</a></li>

</ul>

-->

You should be able to follow on from here with the rest of your menu.
Good luck!!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
THANKYOU so much, i really appreciate that Bommer, I'l go and get the rest sorted. You have gone out of your way to help and i am really thankfull. Lee.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
No problem - happy to help.

Your flash is really looking cool. I may need your
help in the future with mine ;-)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Boomer, the code didnt work in cleanslate, non visited links dont do anything on a mouse over. It seems to be working fine in your example site.

I have been trying stuff all day,

i like what i have so far but i can not change the default link color (black) to green - check it out http://hexham.info see what you think and if you can work out how to change the text color, id really appreciate the help.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Lee,
I've been out of action the last few days.
Looks like you've come right though!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Boomer - see what i ahve now - what i really want is the text to be green but i can not do it. I have tried everything, If you add it to the sytle it doesnt work and if you add it to the a style it makes the hover incorrect. I've given up really and am making do with black text - it looks ok.

Lee
http://hexham.info
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Lee,

You're not going to believe me, but Im lying in a hospital bed at the moment.
They are releasing me tommorow and the I'll be able to help you further
if need be. I think It looks cool the way you have it now though.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
fair enough - get well soon amigo.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Oh no! I am sorry to hear that! You should have told us and we would have brought you magazines and jelly (or whatever it is you like when you are in hospital). Can't believe you are posting to Get Satisfaction from hospital - that is dedication!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Boomer,

I wish you well.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I'm still getting to grips with the whole thing myself.
I had a heart attack on friday morning you see and I now
have a shiney new titanium stent in one of my arteries.

I feel fine though - really. At least I've got GS and SynthaSite
to keep me company between visiting hours.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Very glad to hear you are feeling fine! Drop me a note and tell me what hospital you are in!!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
i hope it wasnt working on my code the other day that did it, i know it was stressfull but come on :)
Really, all the best, hope to see you back well soon.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Medi-clinic, but please don't........
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Ok, I won't. But I would have if you were up for it. Get better soon!