links,mouseovers

  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

Ok I am having such a tough time with this and I know it is probably something easy too lol.

Let me try to explain...
I want it to have a word show up when you move the mouse over the link. So like you go over the link to go home and a word over in lala land (over in a table other side of the page) says Home.

can anyone point me in the right direction?? I tried looking for it but as I can't explain it very well its getting tough lol.

Thanks a bunch
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

have a word show up? are you just trying to make it change appearance when the mouse is moved over the link? Or you're wanting like a lil tip box show up when you put your mouse over it?

If you just want a lil tooltip box...

Code: [ Select ]
<a href="http://whatever" title="This is what comes up in the text box</a>Click me!</a>


To actually make the link change appearance (add/remove underline, or change colour, for example), CSS is your way to go.
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

hmm nope ;( But thanks. I have seen it before but maybe I am going about it the completely wrong way....

This is as close as I can find to what I want now though....

<a href="http://www.webtemplateszone.com/templates/ice_dragon/about.html" target="_blank">Here</a>

If you click on about, home, etc.. it says it above the box. Except I want to do it with a mouseover....


Well don't i have a way with words today lol ;) Sorry. I'll keep looking.
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

ahh, you're going to have to look into JavaScript rollover code.
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

ooh, it's flash, never mind, probably wouldn't do much good, heh.

I'm not sure, I'm not a big user of flash, so haven't really looked into doing it with that.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I'm not sure if this is what you mean or whether it's even the best way of doing it, but it's a variation on the menu thing we did before:
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.blah
{  
font-family: tahoma;
font-size: 20px;
font-weigth: bold;
color: blue;
}
a.menu:link, a.menu:active, a.menu:visited, a.menu:hover
{
display: block;
width: 80px;
line-height: 25px;
color: teal;
background-color: beige;
text-align: center;
text-decoration: none;
}
-->
</style>
<script type="text/javascript">
<!--
function changeIt(text)
{
document.getElementById("caption").innerHTML=text;
}
// -->
</script>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<tr><td align="center" colspan="2"><span id="caption" class="blah">Default Message</span></td></tr>
<tr>
<td valign="top" width="80px">
 <table border="0" cellpadding="0" cellspacing="0">
 <tr><td><a class="menu" href="#" onmouseover="changeIt('text for link 1')" onmouseout="changeIt('Default Message')">Link 1</a></td></tr>
 <tr><td><a class="menu" href="#" onmouseover="changeIt('text for link 2')" onmouseout="changeIt('Default Message')">Link 2</a></td></tr>
 <tr><td><a class="menu" href="#" onmouseover="changeIt('text for link 3')" onmouseout="changeIt('Default Message')">Link 3</a></td></tr>
 </table>
</td>
<td valign="top" width="400px">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nonummy, justo placerat molestie vestibulum, turpis nulla egestas ipsum, eu ultricies enim erat eu libero. Pellentesque risus pede, molestie eget, pellentesque quis, commodo eget, wisi. Donec hendrerit aliquet ligula. Nullam lacus ipsum, pellentesque rutrum, adipiscing ac, lobortis ac, purus. Sed sit amet lorem vel dolor fringilla rutrum. Aenean dui nibh, rhoncus at, laoreet eleifend, tincidunt non, velit. Proin dolor quam, faucibus eu, congue eget, scelerisque in, tortor. Phasellus hendrerit ipsum sed eros. Suspendisse nec est in dolor fermentum pulvinar. Phasellus tellus massa, egestas tincidunt, euismod at, eleifend eleifend, purus. Aliquam leo lacus, sollicitudin vel, aliquam at, mattis in, felis. Nullam posuere semper nisl. Nullam vehicula laoreet quam. Fusce diam risus, rhoncus mattis, pulvinar eu, sagittis non, odio. Aliquam vestibulum augue in odio. Ut pulvinar nulla in turpis. Pellentesque condimentum, arcu ut pretium blandit, dolor est ullamcorper justo, ac dignissim dui arcu eu arcu. Nunc nisl urna, dictum ut, tincidunt in, consectetuer sed, dolor. Aenean facilisis, mi sed viverra aliquet, mi nulla ultricies purus, quis iaculis neque nunc ac augue.</p>
</td>
</tr>
</table>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Untitled</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. <!--
  8. .blah
  9. {  
  10. font-family: tahoma;
  11. font-size: 20px;
  12. font-weigth: bold;
  13. color: blue;
  14. }
  15. a.menu:link, a.menu:active, a.menu:visited, a.menu:hover
  16. {
  17. display: block;
  18. width: 80px;
  19. line-height: 25px;
  20. color: teal;
  21. background-color: beige;
  22. text-align: center;
  23. text-decoration: none;
  24. }
  25. -->
  26. </style>
  27. <script type="text/javascript">
  28. <!--
  29. function changeIt(text)
  30. {
  31. document.getElementById("caption").innerHTML=text;
  32. }
  33. // -->
  34. </script>
  35. </head>
  36. <body>
  37. <table border="1" cellpadding="5" cellspacing="0">
  38. <tr><td align="center" colspan="2"><span id="caption" class="blah">Default Message</span></td></tr>
  39. <tr>
  40. <td valign="top" width="80px">
  41.  <table border="0" cellpadding="0" cellspacing="0">
  42.  <tr><td><a class="menu" href="#" onmouseover="changeIt('text for link 1')" onmouseout="changeIt('Default Message')">Link 1</a></td></tr>
  43.  <tr><td><a class="menu" href="#" onmouseover="changeIt('text for link 2')" onmouseout="changeIt('Default Message')">Link 2</a></td></tr>
  44.  <tr><td><a class="menu" href="#" onmouseover="changeIt('text for link 3')" onmouseout="changeIt('Default Message')">Link 3</a></td></tr>
  45.  </table>
  46. </td>
  47. <td valign="top" width="400px">
  48. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nonummy, justo placerat molestie vestibulum, turpis nulla egestas ipsum, eu ultricies enim erat eu libero. Pellentesque risus pede, molestie eget, pellentesque quis, commodo eget, wisi. Donec hendrerit aliquet ligula. Nullam lacus ipsum, pellentesque rutrum, adipiscing ac, lobortis ac, purus. Sed sit amet lorem vel dolor fringilla rutrum. Aenean dui nibh, rhoncus at, laoreet eleifend, tincidunt non, velit. Proin dolor quam, faucibus eu, congue eget, scelerisque in, tortor. Phasellus hendrerit ipsum sed eros. Suspendisse nec est in dolor fermentum pulvinar. Phasellus tellus massa, egestas tincidunt, euismod at, eleifend eleifend, purus. Aliquam leo lacus, sollicitudin vel, aliquam at, mattis in, felis. Nullam posuere semper nisl. Nullam vehicula laoreet quam. Fusce diam risus, rhoncus mattis, pulvinar eu, sagittis non, odio. Aliquam vestibulum augue in odio. Ut pulvinar nulla in turpis. Pellentesque condimentum, arcu ut pretium blandit, dolor est ullamcorper justo, ac dignissim dui arcu eu arcu. Nunc nisl urna, dictum ut, tincidunt in, consectetuer sed, dolor. Aenean facilisis, mi sed viverra aliquet, mi nulla ultricies purus, quis iaculis neque nunc ac augue.</p>
  49. </td>
  50. </tr>
  51. </table>
  52. </body>
  53. </html>
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

As always you guys are amazing ;) Thank you so so much, it works perfectly!! Exactly what I was looking for you. ;)
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

Quote:
I want it to have a word show up when you move the mouse over the link. So like you go over the link to go home and a word over in lala land (over in a table other side of the page) says Home.


See the section 11.2 Visibility: the ’visibility’ property, on page 174 of the CSS 2.1 Specification. You may use JavaScript to change the value of this property.

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 29 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.