?
Solved

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

Posted on 2004-04-16
5
Medium Priority
?
283 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 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…
There may be issues when you are trying to access Outlook or send & receive emails or due to Outlook crash which leads to corrupt or damaged PST file. To eliminate the corruption from your PST file, you need to repair the corrupt Outlook PST file. U…
Suggested Courses

593 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