Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2004-04-16
5
Medium Priority
?
278 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

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…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

722 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