JavaScript and DOM and CSS and DHTML and How do I do....

**CiberTHuG** · Aug 15th, 2001, 09:46 AM

I was using DynAPI's inline layers to get the effect I wanted. But it uses classes, and that creates a problem in IE, so I'm looking for a solution.

I have several questions...

I have a CSS class definition that creates a little tab button. When you mouse over the button, I want it to highlight. I want the background color to change. And when you mouse off, I want it to restore. Is there a way to do this in the CSS? For example...

Code:

<%@ Language='VBScript' %>

<%
  Option Explicit

  dim TabNames
      TabNames = Split("Alpha,Beta,Gamma,Delta", ",")
%>

<html>

  <head>

    <title>Dynamic Model</title>

    <style>
      .TabStrip {
        position: relative;
        width:  600px;
      }
      .TabButton {
        position: relative;
        width:  <%=(1 / (UBound(TabNames, 1) + 1) * 100) - 2%>%;
        border-color: #c0c0c0 #000000 #000000 #c0c0c0;
        border-style: solid;
        border-width: 1px;
        background-color: #000a66;
        color:  #ffffff;
        text-align: center;
      }
      .TabButtonHighlighted {
        position: relative;
        width:  <%=(1 / (UBound(TabNames, 1) + 1) * 100) - 2%>%;
        border-color: #c0c0c0 #000000 #000000 #c0c0c0;
        border-style: solid;
        border-width: 1px;
        background-color: #ffffff;
        color:  #000000;
        text-align: center;
      }
    </style>

  </head>

  <body>

    <script language='JavaScript'>
      function highlight(which) {
        which.style.backgroundColor = "#ffffff";
        which.style.color = "#000000";
      }

      function restore(which) {
        which.style.backgroundColor = "#000a66";
        which.style.color = "#ffffff";
      }
    </script>

    <div class="TabStrip">
      <%
        dim currTab
        for currTab = 0 to UBound(TabNames, 1)
          %>
            <span class="TabButton" id="TabButton" onmouseover="JavaScript:highlight(this);"><%=TabNames(currTab)%></span>
          <%
        next 'Tab
      %>
    </div>

  </body>

</html>

You will notice in the above ASP that I have to set the colors in three different places. If I want to change the colors, I have to remember to change them everywhere. Can you think of some way to avoid this?

Can you also think of a way to tell which TabButton called the function? I want to add a series of panels, one for each button. But only one of these panels will be visible at any one time. If you click on "Alpha", it will show alpha's panel. If you click on "Beta" it will show beta's panel, and hide all the rest. Now I can make four seperate JavaScript functions to do that, or I can make one function and have the ASP set the index number in the function call:

Code:

<%
  dim currTab
  for currTab = 0 to UBound(TabNames, 1)
    %>
      <span class="TabButton" id="TabButton"  onclick="Show(<%=currTab%>)" onmouseover="JavaScript:highlight(this);"><%=TabNames(currTab)%></span>
    <%
  next 'Tab
%>

But I'm just wondering if there is a way to figure out who called the function.

Oh, ignore the TabButtonHighlighted class. I was trying to change the class of the button during the mouseover, but I couldn't get that to work. If you can do that, that would be awesome.

-Travis

**Psyrus** · Aug 16th, 2001, 08:59 PM

to switch classes:

Code:

<span class="TabButton" id="TabButton" onmouseover="this.className = 'TabButtonHighlighted';" onmouseout = "this.className = 'TabButton';">
<%=TabNames(currTab)%>
</span>

Also try adding this to give your tabs unique IDs:

Code:

...

for currTab = 0 to UBound(TabNames, 1)
%>
<span class="TabButton" id=<%='TabButton' & currTab%>
...

This way the IDs will be TabButton0 through TabButton3

Thread: JavaScript and DOM and CSS and DHTML and How do I do....

Thread Tools

Display

JavaScript and DOM and CSS and DHTML and How do I do....

Posting Permissions