Solved

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

Posted on 2004-04-16
5
275 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 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

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…
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 …
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
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 …
Suggested Courses

617 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