Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
mouse rollover 1
- Thread starter hcubed
- Start date
-
1
- #2
Hi,
Put this in the head of your HTML file:
<STYLE TYPE="text/css">
A:link {TEXT-DECORATION: none; color: blue;}
A:visited {TEXT-DECORATION: none}
a:hover {TEXT-DECORATION: none; color: orange;}
</STYLE>
BTW - This will make all links do this. If you want to specify different colors for different links then let me know, and I'll give you some different code.
Hope this helps! NATE
design@spyderix-designz.com
Put this in the head of your HTML file:
<STYLE TYPE="text/css">
A:link {TEXT-DECORATION: none; color: blue;}
A:visited {TEXT-DECORATION: none}
a:hover {TEXT-DECORATION: none; color: orange;}
</STYLE>
BTW - This will make all links do this. If you want to specify different colors for different links then let me know, and I'll give you some different code.
Hope this helps! NATE
design@spyderix-designz.com
- Thread starter
- #3
spyderix
God that was quick!!! thanks mate, yes I would love to have different code for example to get the text to bold and be underlined when someone scrolls over and antyinh else you might think looks cool
thank you very very much for your help
God that was quick!!! thanks mate, yes I would love to have different code for example to get the text to bold and be underlined when someone scrolls over and antyinh else you might think looks cool
thank you very very much for your help
- Thread starter
- #4
Some examples:
<STYLE>
.div1 A:hover{text-decoration
verline;background-color:#cccccc;}
.div2 A:hover{font-size:26px;font-weight:900;font-style:italic;color:red;}
</STYLE>
<div class="div1">
<a href="1">1</a><a href="2">2</a><a href="3">3</a><a href="4">4</a><a href="5">5</a><a href="6">6</a><a href="7">7</a><a href="8">8</a><a href="9">9</a>
</div>
<div class="div2">
<a href="1">1</a><a href="2">2</a><a href="3">3</a><a href="4">4</a><a href="5">5</a><a href="6">6</a><a href="7">7</a><a href="8">8</a><a href="9">9</a>
</div>
Really, you can use any style tag at all in that. Here is a list of them.
Rick If I have helped you just click the first link below to let me know
<STYLE>
.div1 A:hover{text-decoration
verline;background-color:#cccccc;}.div2 A:hover{font-size:26px;font-weight:900;font-style:italic;color:red;}
</STYLE>
<div class="div1">
<a href="1">1</a><a href="2">2</a><a href="3">3</a><a href="4">4</a><a href="5">5</a><a href="6">6</a><a href="7">7</a><a href="8">8</a><a href="9">9</a>
</div>
<div class="div2">
<a href="1">1</a><a href="2">2</a><a href="3">3</a><a href="4">4</a><a href="5">5</a><a href="6">6</a><a href="7">7</a><a href="8">8</a><a href="9">9</a>
</div>
Really, you can use any style tag at all in that. Here is a list of them.
Rick If I have helped you just click the first link below to let me know
Hi again,
Put this into the head of your HTML:
<STYLE TYPE="text/css">
.link1
{COLOR: blue; TEXT-DECORATION: none; font-family: times new roman; font-weight: bold;}
a:link.link1 {TEXT-DECORATION: none; color : blue;}
a:visited.link1 {color : #008000;}
a:hover.link1 {color : #008000; text-decoration: underline overline; font-family: arial; font-weight: bold; font-size: 16px; font-style:italic;}
</STYLE>
then put the following into your LINK TAG:
<A HREF="your_link.html" CLASS="link1">LINK</A>
Notice how above the first part of the style is .link1 well that is what you put in the CLASS="" in the LINK TAG. When you create a new set of link attributes then you can copy paste alot of the stuff above but put it into .link2{stuff goes here}, then call it CLASS="link2".
You can call your style whatever you want (eg- .123asdlinkfef) but your class has to match it- CLASS="123asdlinkfef"
Hope this helps!
NATE
design@spyderix-designz.com
Put this into the head of your HTML:
<STYLE TYPE="text/css">
.link1
{COLOR: blue; TEXT-DECORATION: none; font-family: times new roman; font-weight: bold;}
a:link.link1 {TEXT-DECORATION: none; color : blue;}
a:visited.link1 {color : #008000;}
a:hover.link1 {color : #008000; text-decoration: underline overline; font-family: arial; font-weight: bold; font-size: 16px; font-style:italic;}
</STYLE>
then put the following into your LINK TAG:
<A HREF="your_link.html" CLASS="link1">LINK</A>
Notice how above the first part of the style is .link1 well that is what you put in the CLASS="" in the LINK TAG. When you create a new set of link attributes then you can copy paste alot of the stuff above but put it into .link2{stuff goes here}, then call it CLASS="link2".
You can call your style whatever you want (eg- .123asdlinkfef) but your class has to match it- CLASS="123asdlinkfef"
Hope this helps!
NATE
design@spyderix-designz.com
- Thread starter
- #7
Thanks spyderix
The code is great which you gave me, now to really test your skills Below is code to open the links in a new window, every time someone clicks on one, is it possible to have them open up in seperate windows and also have this code also have the initial code
thanks
hcubed
<p><a href="javascriptop(' color="#003399">Sea
World</font></b></a><br>
<a href="javascriptop(' color="#003399">Dreamworld</font></b></a><br>
<a href="javascriptop(' color="#003399">Movieworld</font></b></a><br>
<a href="javascriptop(' color="#003399">Great
Barrier Reef</font></b></a><br>
<a href="javascriptop(' color="#003399">Wale
Watching Tours</font></b></a><br>
<a href="javascriptop(' color="#003399">Stockmans
Hall of Fame</font></b></a><br>
<a href="javascriptop(' color="#003399">Australia
Outback Adventures</font></b></a><br>
<a href="javascriptop(' color="#003399">Australia
Zoo</font></b></a><br>
<br>
The code is great which you gave me, now to really test your skills
Below is code to open the links in a new window, every time someone clicks on one, is it possible to have them open up in seperate windows and also have this code also have the initial codethanks
hcubed
<p><a href="javascript
op(' color="#003399">Sea World</font></b></a><br>
<a href="javascript
op(' color="#003399">Dreamworld</font></b></a><br><a href="javascript
op(' color="#003399">Movieworld</font></b></a><br><a href="javascript
op(' color="#003399">Great Barrier Reef</font></b></a><br>
<a href="javascript
op(' color="#003399">Wale Watching Tours</font></b></a><br>
<a href="javascript
op(' color="#003399">Stockmans Hall of Fame</font></b></a><br>
<a href="javascript
op(' color="#003399">Australia Outback Adventures</font></b></a><br>
<a href="javascript
op(' color="#003399">Australia Zoo</font></b></a><br>
<br>
Hi,
Simply add TARGET="_blank" to every single link tag:
Then when a user clicks on each of the seperate links they will open open in new windows. And when a user has a window open and clicks on another link it will open another new window instead of putting it in the already open and hidden window.
Hope this helps! NATE
design@spyderix-designz.com
Simply add TARGET="_blank" to every single link tag:
Code:
<A HREF="[URL unfurl="true"]www.tek-tips.com"[/URL] TARGET="_blank">Tek-Tips</A>Then when a user clicks on each of the seperate links they will open open in new windows. And when a user has a window open and clicks on another link it will open another new window instead of putting it in the already open and hidden window.
Hope this helps! NATE
design@spyderix-designz.com
Oh sorry one more thing.
Change all your tags to look like my example above. Don't put in:javascriptop('
So do it like this:
etc...
Hope this helps! NATE
design@spyderix-designz.com
Change all your tags to look like my example above. Don't put in:
op('So do it like this:
Code:
<p>
<a href="[URL unfurl="true"]http://www.seaworld.com.au/[/URL] TARGET="_blank"><b><font color="#003399">Sea World</font></b></a>
<br>
<a href="[URL unfurl="true"]http://www.dreamworld.com.au/"[/URL] TARGET="_blank"><b><font color="#003399">Dreamworld</font></b></a><br>etc...
Hope this helps! NATE
design@spyderix-designz.com
- Thread starter
- #10
mmm doesn't sem to work, I put in:
<p><a href=" color="#003399">Sea World</font></b></a><br>
a page comes up with
<p><a href=" color="#003399">Sea World</font></b></a><br>
a page comes up with
Hi,
Sorry when I copy and pasted your link I accidentally deleted the closing quotation mark for the link.
It should read like this, this is correct:
etc...
Sorry about the screw-up there. That will now work.
Hope this helps! NATE
design@spyderix-designz.com
Sorry when I copy and pasted your link I accidentally deleted the closing quotation mark for the link.
It should read like this, this is correct:
Code:
<p>
<a href="[URL unfurl="true"]http://www.seaworld.com.au/"[/URL] TARGET="_blank"><b><font color="#003399">Sea World</font></b></a>
<br>
<a href="[URL unfurl="true"]http://www.dreamworld.com.au/"[/URL] TARGET="_blank"><b><font color="#003399">Dreamworld</font></b></a><br>etc...
Sorry about the screw-up there. That will now work.
Hope this helps! NATE
design@spyderix-designz.com
- Thread starter
- #12
Ok Nate I have noted your email, where are you from? and one last question:
where do i put in the code to change the color of the link with this??
<p> <a href=" TARGET="_blank"><b><font color="#003399">Sea
World</font></b></a> <br>
where do i put in the code to change the color of the link with this??
<p> <a href=" TARGET="_blank"><b><font color="#003399">Sea
World</font></b></a> <br>
Hi,
I'm from ROSSLAND-BC-CANADA. Where are you from? (I'm guessing not in North America b/c it is soo late. I have 1:00 AM here)
What ever you called your class name in the <STYLE> tag is what you put in the link tag, but without the "." And b/c you are using CSS to specify the color you don't need <FONT COLOR="#003399"> in any of your links.
Do note in the link above Tek-Tips has put an extra ";" you will need to erase that so that the link works properly.
Hope this helps! NATE
design@spyderix-designz.com
I'm from ROSSLAND-BC-CANADA. Where are you from? (I'm guessing not in North America b/c it is soo late. I have 1:00 AM here)
Code:
<a href="[URL unfurl="true"]http://www.seaworld.com.au/"[/URL] TARGET="_blank" [b]CLASS="your_class_name"[/b]><b><font color="#003399">SeaWorld</font></b></a>What ever you called your class name in the <STYLE> tag is what you put in the link tag, but without the "." And b/c you are using CSS to specify the color you don't need <FONT COLOR="#003399"> in any of your links.
Do note in the link above Tek-Tips has put an extra ";" you will need to erase that so that the link works properly.
Hope this helps! NATE
design@spyderix-designz.com
NEVERSLEEP
Programmer
this code (from SPYDERIX Tip) IS your link
why not thanks SPYDERIX aka NATE with a star ? ---------------------------------------
someone knowledge ends where
someone else knowledge starts
Code:
<a href="[URL unfurl="true"]http://www.seaworld.com.au/"[/URL] TARGET="_blank"><b><font color="#003399">Sea World</font></b></a>why not thanks SPYDERIX aka NATE with a star ? ---------------------------------------
someone knowledge ends where
someone else knowledge starts
- Thread starter
- #15
Hi,
Why do you have 2 <A HREF>'s like that?
Show me your <STYLE> tags that you are using and the link tags that you are using and tell me exactly what you want to do (what effects).
Where are you from?
Hope this helps! NATE
design@spyderix-designz.com
Why do you have 2 <A HREF>'s like that?
Show me your <STYLE> tags that you are using and the link tags that you are using and tell me exactly what you want to do (what effects).
Where are you from?
Hope this helps! NATE
design@spyderix-designz.com
- Thread starter
- #17
<STYLE TYPE="text/css">
.Link1
{COLOR: #003399; TEXT-DECORATION: none; font-family: verdana;font-size: 11px; font-weight: bold;}
a:link.Link1 {TEXT-DECORATION: none; color :#003399;}
a:visited.Link1 {color : #003399;}
a:hover.Link1 {color : #ff9900; text-decoration: underline; font-family: verdana; font-weight: bold; font-size: 11px; font-style:italic;}
</STYLE>
<a href=" TARGET="_blank"><b><font color="#003399">Sea World</font></b></a>
<br>
<a href=" TARGET="_blank"><b><font color="#003399">Dreamworld</font></b></a>
<br>
<a href=" TARGET="_blank"><b><font color="#003399">Movieworld</font></b></a>
<br>
<a href=" TARGET="_blank"><b><font color="#003399">Great
Barrier Reef</font></b></a> <br>
<a href=" TARGET="_blank"><b><font color="#003399">Wale
Watching Tours</font></b></a> <br>
<a href=" TARGET="_blank"><b><font color="#003399">Stockmans
Hall of Fame</font></b></a> <br>
<a href=" TARGET="_blank"><b><font color="#003399">Australia
Outback Adventures</font></b></a> <br>
<a href=" TARGET="_blank"><b><font color="#003399">Australia
Zoo</font></b></a><br>
<br>
what I'm trying to do is get the links to go from blue bold verdana to underlined orange verdana and have each link open up into a new page.
I'm from Australia, but where r u from
.Link1
{COLOR: #003399; TEXT-DECORATION: none; font-family: verdana;font-size: 11px; font-weight: bold;}
a:link.Link1 {TEXT-DECORATION: none; color :#003399;}
a:visited.Link1 {color : #003399;}
a:hover.Link1 {color : #ff9900; text-decoration: underline; font-family: verdana; font-weight: bold; font-size: 11px; font-style:italic;}
</STYLE>
<a href=" TARGET="_blank"><b><font color="#003399">Sea World</font></b></a>
<br>
<a href=" TARGET="_blank"><b><font color="#003399">Dreamworld</font></b></a>
<br>
<a href=" TARGET="_blank"><b><font color="#003399">Movieworld</font></b></a>
<br>
<a href=" TARGET="_blank"><b><font color="#003399">Great
Barrier Reef</font></b></a> <br>
<a href=" TARGET="_blank"><b><font color="#003399">Wale
Watching Tours</font></b></a> <br>
<a href=" TARGET="_blank"><b><font color="#003399">Stockmans
Hall of Fame</font></b></a> <br>
<a href=" TARGET="_blank"><b><font color="#003399">Australia
Outback Adventures</font></b></a> <br>
<a href=" TARGET="_blank"><b><font color="#003399">Australia
Zoo</font></b></a><br>
<br>
what I'm trying to do is get the links to go from blue bold verdana to underlined orange verdana and have each link open up into a new page.
I'm from Australia, but where r u from
Hi,
I already said where I was from:
"I'm from ROSSLAND-BC-CANADA. Where are you from? (I'm guessing not in North America b/c it is soo late. I have 1:00 AM here)" (see it above 5 posts up) It's now 2:12 AM ;-)
Anyway, I can see the problem already. You haven't specified the link tags with a class.
Here is the code for you. Just copy and paste this all into your HTML file: (I have organized it better too)
---------------------------------
---------------------------------
I have tested this too and it works exactly the way you want it to. I also corrected your spelling of "Whale". I do note that "Australia Outback Adventures" link comes up as a non-existant site, is your URL correct???
BTW - Tek-Tips has turned every word (link1) into a link. Just ignore that.
Hope this helps! NATE
design@spyderix-designz.com
I already said where I was from:
"I'm from ROSSLAND-BC-CANADA. Where are you from? (I'm guessing not in North America b/c it is soo late. I have 1:00 AM here)" (see it above 5 posts up) It's now 2:12 AM ;-)
Anyway, I can see the problem already. You haven't specified the link tags with a class.
Here is the code for you. Just copy and paste this all into your HTML file: (I have organized it better too)
---------------------------------
Code:
<STYLE TYPE="text/css">
.link1
{
TEXT-DECORATION: none; color: #003399; font-family: verdana; font-size: 11px; font-weight: bold;
}
a:link.link1
{
TEXT-DECORATION: none; color: #003399; font-family: verdana; font-size: 11px; font-weight: bold;
}
a:visited.link1
{
TEXT-DECORATION: none; color: #003399; font-family: verdana; font-size: 11px; font-weight: bold;}
a:hover.link1
{
text-decoration: underline; color: #ff9900; font-family: verdana; font-weight: bold; font-size: 11px;
}
</STYLE>
<a href="[URL unfurl="true"]http://www.seaworld.com.au/"[/URL] TARGET="_blank" CLASS="link1">Sea World</a>
<br>
<a href="[URL unfurl="true"]http://www.dreamworld.com.au/"[/URL] TARGET="_blank" CLASS="link1">Dreamworld</a>
<br>
<a href="[URL unfurl="true"]http://www.movieworld.com.au/"[/URL] TARGET="_blank" CLASS="link1">Movieworld</a>
<br>
<a href="[URL unfurl="true"]http://www.great-barrier-reef.com/"[/URL] TARGET="_blank" CLASS="link1">Great Barrier Reef</a>
<br>
<a href="[URL unfurl="true"]http://www.seefraserisland.com/ww/ww.html"[/URL] TARGET="_blank" CLASS="link1">Whale Watching Tours</a>
<br>
<a href="[URL unfurl="true"]http://www.outbackheritage.com.au/"[/URL] TARGET="_blank" CLASS="link1">Stockmans Hall of Fame</a>
<br>
<a href="[URL unfurl="true"]http://www.infocus.to/outback/"[/URL] TARGET="_blank" CLASS="link1">Australia Outback Adventures</a>
<br>
<a href="[URL unfurl="true"]http://www.crocodilehunter.com/index1.html"[/URL] TARGET="_blank" CLASS="link1">Australia Zoo</a>I have tested this too and it works exactly the way you want it to. I also corrected your spelling of "Whale". I do note that "Australia Outback Adventures" link comes up as a non-existant site, is your URL correct???
BTW - Tek-Tips has turned every word (link1) into a link. Just ignore that.
Hope this helps! NATE
design@spyderix-designz.com
- Thread starter
- #19
- Status