Customizing Linked Texts

liunx

Guest
'm trying to customize the look and feel of each of my linked text (i've used a couple of JavaScripts already) as they open up a pop-up window (where each link will have it's own uhmm.."instructions")...My question revolves arount the <style fprolloverstyle> code (w/c is that way coz I used frontpage )...i understand this is what triggers each of my text links to change color, size, underline..etc....how can i customize this as to give each of my links a different look?...ex. text link 1 will be colored green, but when mouseovered...will change to blue, while text link 2 will start off as colored red...but when mouseovered will turn green and will have a bold font etc. and so on...what code will i add on to this?<br />
<br />
I just have a very vague notion that i may need to use css and/or <div> or something...but dunno how and where to put it...im attaching a script text file of what am trying to do..<br />
<br />
<br />
Also, I noticed that each of the linked text...automatically seems to be underlined at the start...and not only when it is mousedovered...how can i correct this?<!--content-->First of all, your code was a bit messy. Take a look at this code. I switched a few things around to make it easier to read and to make it work better.<!--content-->Thanks! :) I mean, i know...i've cut-and-pasted a lot of Javscripts to find out, which combos might work...i think i attached the messiest one...hehehe...<br />
<br />
....<br />
<br />
:confused: hey cant seem to see any of the html codes with the text file you sent... i only see a couple of lines..<br />
please send them again.<!--content-->Originally posted by Four_of_Five <br />
Thanks! :) I mean, i know...i've cut-and-pasted a lot of Javscripts to find out, which combos might work...i think i attached the messiest one...hehehe...I was actually talking about the html/css, not the javascript. :)<br />
<br />
Anyway, here it is. Sorry about that.<!--content-->That's ok...i've gotten worse myself..so much coding (er, for a newbie like me, cutting and pasting) to do...html,dhtml,javascript..havent touched on Flash yet..sheesssh...i've got too much info...overload..<br />
<br />
Thanks again!!!<br />
<br />
:o<!--content-->hmmm...it seems I may expected too much too soon...<br />
<br />
Uhmmm...the txt script you sent didnt seem to work coz it doesn't seem to change the text-link colors into anything...it did teach me how to use CSS in defining different colors for text...<br />
<br />
Can you check out the script again and tell me how actually it works...just a briefer would do...coz i dont want to be a pain in...the CSS ASS...hehehe..<br />
<br />
Attached is how i've "broken" it down from the original you sent...just basically tried adding another colored text-link...<!--content-->The code you posted (as well as mine) works fine in IE6, NN7, Mozilla 1 and Opera 7...What browser are you using?? (hover doesn't work in NN 4.x)<br />
<br />
Anyway, to break down the code for you..<br />
<br />
A.menu:link<br />
{<br />
color: red;<br />
text-decoration: none;<br />
}<br />
<br />
A.menu:visited, A.menu:active, A.menu:hover<br />
{<br />
color: green;<br />
text-decoration: none;<br />
}<br />
<br />
This sets a class called menu with the colors/properties you want. For instance, the link starts red, (A.menu:link) and changes to green when the link is visited, active, or hovered over (A.menu:visited, A.menu:active, A.menu:hover)...It's the same for your other classes.<br />
<br />
Then, you set the class of your link like this, <a href=http://www.webdeveloper.com/forum/archive/index.php/"..." class="menu">some text here</a>. This link will have the properties you defined in A.menu:link and A.menu:visited, A.menu:active, and A.menu:hover. <br />
<br />
Hope that helps you out...<!--content-->Hello again! uhmmm...<br />
<br />
The recent code breakdown you gave made it a lot simpler for me to understand. It worked! uhmmmHowever....it only worked once..coz when I tried doing several more like duplicate it (add another a href, change to blue etc.)...it seemed to just take effect on just the first one...btw, am using IE6...so dont think its a browser issue...<br />
<br />
Gee i really hate to be a bother and an ASS on CSS....<br />
<br />
But can you run another CSS example like the first, with two lines of linked text instead...one red and one blue...changing into green on hover and making the font bold and underlined? Im sure i'll get it this time...<br />
<br />
Please...thanks! :)<!--content-->Hope this helps you...<br />
<br />
Here is the CSS.<br />
<br />
<style type="text/css"><br />
<br />
/*First set of links*/<br />
<br />
A.menu:link<br />
{<br />
color: red;<br />
text-decoration: none;<br />
}<br />
<br />
A.menu:visited, A.menu:active, A.menu:hover<br />
{<br />
color: green;<br />
font-weight: bold;<br />
text-decoration: underline;<br />
}<br />
<br />
/*Second set of links*/<br />
<br />
A.menu2:link<br />
{<br />
color: blue;<br />
text-decoration: none;<br />
}<br />
<br />
A.menu2:visited, A.menu2:active, A.menu2:hover<br />
{<br />
color: green;<br />
font-weight: bold;<br />
text-decoration: underline;<br />
}<br />
</style>And here is the code to make your links...<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"..." class="menu">some red text here</a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"..." class="menu2">some blue text here</a><!--content-->THANKS!!! And I mean really! :) You've been big biG bIG BIG Help. I finally got it...not immediately, I had to add some more of the other scripts to it but I think it works pretty well...<br />
The only thing about CSS is it's pretty long to follow (see attachment) especially if I'm doing a lot of text links..is there a way to "shorten" or compac it? Do I really have to create A.Menu link for each and every text?<br />
<br />
Also, though it's not related to CSS but part of the script...(see attachment) if you still have time to bother with it...<br />
<br />
How do you make an image freeze up OnClick? Coz with my script...OnMouseover on a text link, the text changes to a different color, as well as make an Image appear somewhere nearby...however, what if I wanted to have that image to Remain (frozen) when I Clicked on the Text...of course, I also want it to disappear again when I click on a different text link :)<!--content-->
 
Back
Top