Solved

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

Posted on 2004-04-16
5
272 Views
Last Modified: 2010-05-18
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
0
Comment
Question by:joe_cool
  • 3
  • 2
5 Comments
 
LVL 3

Expert Comment

by:ljfernandez
ID: 10845484
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
 

Author Comment

by:joe_cool
ID: 10845748
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
 
LVL 3

Expert Comment

by:ljfernandez
ID: 10846342
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
 
LVL 3

Accepted Solution

by:
ljfernandez earned 500 total points
ID: 10846346
The above <span> tags can be inline with text.
0
 

Author Comment

by:joe_cool
ID: 10846425
Cool. Thanks.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question