how I can create text link effect like at the blast radius site

Hello,
I'm using Dreamweaver mx. Also I ama graphic designer rather then a programmer. A client really likes the link effect seen at the Blast Radius website, when the cursor rolls over the html text.
I want to know how I can create text to link like at the blast radius site: http://www.blastradius.com
Is this a css technique or is it a javascript? If so how can I do this??
I need to come up with something soon!
Thanks.
-Joe
joe_coolAsked:
Who is Participating?
 
ljfernandezConnect With a Mentor Commented:
The above <span> tags can be inline with text.
0
 
ljfernandezCommented:
Here's a script that will do it. It uses CSS and javascript. Change the colors and fonts and the page to go to for each one and voila, you have a dhtml menu!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.bluefont
      {
      background-color:white;
      font-family:verdana;
      font-size:12pt;
      font-weight:bold;
      color:blue;
      width:200px;
      cursor:hand;
      }
      
.whitefont
      {
      background-color:blue;
      font-family:verdana;
      font-size:12pt;
      font-weight:bold;
      color:white;
      width:200px;
      cursor:hand;
      }

</style>

<script>
      function changeColor( obj, bChange)
            {
            if (bChange == 1)
                  obj.className = "whitefont";
            else
                  obj.className = "bluefont";
            }
</script>
</head>
<table width="600" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td onMouseOver="changeColor(this,1);" onMouseOut="changeColor(this, 0);" class="bluefont" onClick="document.location.href='Somepage.htm'">WHO WE ARE</td>
    <td onMouseOver="changeColor(this,1);" onMouseOut="changeColor(this, 0);" class="bluefont" onClick="document.location.href='Somepage.htm'">WHAT WE DO</td>
    <td onMouseOver="changeColor(this,1);" onMouseOut="changeColor(this, 0);" class="bluefont" onClick="document.location.href='Somepage.htm'">CAREERS</td>
    <td onMouseOver="changeColor(this,1);" onMouseOut="changeColor(this, 0);" class="bluefont" onClick="document.location.href='Somepage.htm'">CONTACT</td>
  </tr>
</table>

<body>

</body>
</html>
0
 
joe_coolAuthor Commented:
Thanks that really helps.
However,  I was wondering how can individual words be highlighted. For instance if there was a paragraph and only certain words were links.
For example: "Learn more about us"
Where "about us" is the link.

Is that possible or does the cell have to highlighted?
much obliged.
Joe.
0
 
ljfernandezCommented:
Here you go:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.bluefont
     {
     background-color:white;
     font-family:verdana;
     font-size:12pt;
     font-weight:bold;
     color:blue;
     cursor:hand;
     }
     
.whitefont
     {
     background-color:blue;
     font-family:verdana;
     font-size:12pt;
     font-weight:bold;
     color:white;
     cursor:hand;
     }

</style>

<script>
     function changeColor( obj, bChange)
          {
          if (bChange == 1)
               obj.className = "whitefont";
          else
               obj.className = "bluefont";
          }
</script>
</head>


<body>

    <span onMouseOver="changeColor(this,1);" onMouseOut="changeColor(this, 0);" class="bluefont" onClick="document.location.href='Somepage.htm'">WHO WE ARE</span>
    <span onMouseOver="changeColor(this,1);" onMouseOut="changeColor(this, 0);" class="bluefont" onClick="document.location.href='Somepage.htm'">WHAT WE DO</span>
    <span onMouseOver="changeColor(this,1);" onMouseOut="changeColor(this, 0);" class="bluefont" onClick="document.location.href='Somepage.htm'">CAREERS</span>
    <span onMouseOver="changeColor(this,1);" onMouseOut="changeColor(this, 0);" class="bluefont" onClick="document.location.href='Somepage.htm'">CONTACT</span>

</body>
</html>
0
 
joe_coolAuthor Commented:
Cool. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.