Applying different hover colors on links

MDLarson

MDLarson

Registered
Hey all,

I'm having trouble with a page. I use Dreamweaver MX, but jump into the code now and then. Now is one of those times, I think...

http://forums.devshed.com/t35589/s.html
This link sort of highlights my problem. I wish to have different link characteristics on different parts of my page. First, I have normal links that I want to behave normally (like underlines, blue-ish colors, etc.). But I also have a part of the page where the user would mouse-over some text to swap some images via JavaScript. It is this text that I would like to change color. Preferably, to have the color follow whatever image I have swapped in.

I imagine an example would be wonderful - I'll try and get one up and post the link...

Thanks in advance!
 
There are several ways you can do this. For now, the simplest is using class css. The a and a:hover style will apply itself universally to all unstyled links on a page. If you did the following to a link, you could style it to however you wanted:

<a href="http://whatever.com" class="redLink">linkText</a>

You would then create the css style 'redLink' and apply whatever attributes necessary i.e. red text with no underline. You then create the css style 'redLink:hover' to make the hover state (add the underline to only make it appear when moused-over for example),

To create a class such as this, click the Add Style button on the CSS panel, and select the Make Custom Style (class) button. The name of the style has to be preceeded with a '.' (full-stop)... so redLink would be .redLink.

To add the :hover state you will have to open up the .css file you created (or wherever you're style code resides), and manually add the :hover state (being redLink:hover) by copy and pasting the redLink style and amending it accordingly. (Dreamweaver MX doesn't deal with .class:hover in the CSS selector winodw, hence the reason to do it manually.)

Hope this is what you are looking for, there are more intricate and clever ways as well, but if you could get the example up, I'd be happy to help.
;)
 
http://www.larsonsystems.com/applications/extension_spring_test.html

Thanks, uoba, there's the link. I think I've actually done as much as you've suggested. Steps 1 and 2 are as close as I can get to what I want. I left step 3 as an un-enhanced link for comparison.

I really want the text to stay blue, like how the image stays, but I think the hover action doesn't allow for that.

EDIT: I was wondering about Dreamweaver's "Change Property" behavior, but I don't know how to assign a text object to a block of text. Maybe this is a better way to get what I want?

I'm also bothered by my use of the text "javascript:;". I use it a lot. I've seen suggestions to use the # symbol to make normal text into a workable link, but Dreamweaver's help says to use the javascript:; method. What is your thoughts on this?
 
Using the pound sign will make a link that is clickable, yet adds to the history in unusual ways. You can use #, "" (no actual url), or window.status to change the status bar text (I recommend this no matter which way you go).

You can make the text blue by using a rollover effect with "onmouseout" to make the text blue. If you can figure out how to do this, then all the better; otherwise, I will look for it for you later.
 
I always use "#" when I haven't verified the correct link yet, or just to test a link without having it go anywhere.
 
Well, I think I have a workable page now. I ended up using a combination of a linked stylesheet and an embedded style.
Linked:
.instruction { font-family: Arial, sans-serif; font-size: 11pt; text-align: left; cursor: arrow}

Embedded:
<STYLE type="text/css">
<!--
a:link.instruction {color: #333333; text-decoration: none}
a:visited.instruction {color: #333333; text-decoration: none}
a:hover.instruction {color: #0066FF; text-decoration: none}
-->
</STYLE>

This gets me everything I wanted except an illustration and blue text that stays when you move your mouse away from the instruction text. (These elements would "reset" once another instruction was moused-over)

I will continue to develop this page, but the mouseover effects will probably not change.

Thanks!
 
For those still ooh-ing and ahh-ing over my pages, ;) I changed the page names so the above links will get a 404 error. Here's the page where you can see my final format. And hey, if you have any material / spring testing needs, you know where to come! :D

And as always, feedback is most welcome!
 
:D Thanks Arden!

(Notice the capitalized "A" - I remember you mentioned that you'd have liked it that way before)
 
You must log in or register to reply here.
Back
Top