Add text instead of image in ASP navigation system

Question

Add text instead of image in ASP navigation system

152 Views Asked by Stuart Robson At 06 April 2025 at 09:58

I'm currently working on a site that uses ASP and I think a 'custom' CMS.

I've got this navigation in a file called Rcp.Master -

<div id="nav">
    <Rcp:TopNavItem runat="server" Filter="default.aspx" HRef="" Alt="Home" Src="home.gif" Width="57" />
    <Rcp:TopNavItem ID="TopNavItem1" runat="server" Filter="about-us/*" HRef="about-us/" Alt="About Us" Src="about.gif" Width="79" />
    <Rcp:TopNavItem ID="TopNavItem2" runat="server" Filter="our-investments/*" HRef="our-investments/" Alt="Our Investments" Src="investments.gif" Width="123" />
    <Rcp:TopNavItem ID="TopNavItem3" runat="server" Filter="team/*" HRef="team/" Alt="Our Team" Src="team.gif" Width="78" />
    <Rcp:TopNavItem ID="TopNavItem4" runat="server" Filter="work/*" HRef="work/" Alt="Work with us" Src="work.gif" Width="108" />
    <Rcp:TopNavItem ID="TopNavItem5" runat="server" Filter="news/*" HRef="news/" Alt="News" Src="news.gif" Width="56" />
    <Rcp:TopNavItem ID="TopNavItem6" runat="server" Filter="comment/*" HRef="comment/" Alt="Comment" Src="comment.gif" Width="83" />
    <Rcp:TopNavItem ID="TopNavItem7" runat="server" Filter="contact-us.aspx" HRef="contact-us.aspx" Alt="Contact Us" Src="contact.gif" Width="68" />
</div>

At the moment as it shows it uses images for the navigation instead of actual text. I want to use 'actual text' so it's more like this -

<div id="nav">>
  <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../about-us/index.html">About us</a></li>
    <li><a href="../our-investments/index.html">Our investments</a></li>
    <li><a href="../team/index.html">The team</a></li>
    <li><a href="../work/index.html">Work with us</a></li>
    <li><a href="../news/index.html">News</a></li>
    <li><a href="../comment/index.html">Comment</a></li>
    <li><a href="../contact-us.aspx.html">Contact Us</a></li>
  </ul>
</div>

How and where can I replace the src="" with just the text?

Any help will be greatly appreciated...

Stu

Here's the 'whole' rcp.master -

        <%@ Master Language="C#" Inherits="Clear.Rcp.Www.RcpMaster, Clear.Rcp.Www" %>
        <%@ Register Src="~/Controls/TopNavItem.ascx" TagPrefix="Rcp" TagName="TopNavItem" %>

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>R</title>
        <link href="<%=Root%>/css/rcp.css"  rel="stylesheet" type="text/css" media="screen" />
        <script src="<%=Root%>/js/jquery-1.4.2.min.js" language="JavaScript" type="text/javascript"></script>
        <script src="<%=Root%>/js/jquery.imghover-1.1rc.js" language="JavaScript"     type="text/javascript"></script>
        <script src="<%=Root%>/js/rcp.js" language="JavaScript" type="text/javascript"></script>

        <asp:ContentPlaceHolder runat="server" ID="PageHeader" />
    </head>

    <body><%=Root%>
    <div id="header">
    <div id="logo"><a href="/"><img src="<%=Root%>/i/logo.gif" alt="" /></a></div>
    <div id="nav">
        <Rcp:TopNavItem runat="server" Filter="default.aspx" HRef="" Alt="Home" Src="home.gif" Width="57" />
        <Rcp:TopNavItem ID="TopNavItem1" runat="server" Filter="about-us/*" HRef="about-us/" Alt="About Us" Src="about.gif" Width="79" />
        <Rcp:TopNavItem ID="TopNavItem2" runat="server" Filter="our-investments/*" HRef="our-investments/" Alt="Our Investments" Src="investments.gif" Width="123" />
        <Rcp:TopNavItem ID="TopNavItem3" runat="server" Filter="team/*" HRef="team/" Alt="Our Team" Src="team.gif" Width="78" />
        <Rcp:TopNavItem ID="TopNavItem4" runat="server" Filter="work/*" HRef="work/" Alt="Work with us" Src="work.gif" Width="108" />
        <Rcp:TopNavItem ID="TopNavItem5" runat="server" Filter="news/*" HRef="news/" Alt="News" Src="news.gif" Width="56" />
        <Rcp:TopNavItem ID="TopNavItem6" runat="server" Filter="comment/*" HRef="comment/" Alt="Comment" Src="comment.gif" Width="83" />
<Rcp:TopNavItem ID="TopNavItem7" runat="server" Filter="contact-us.aspx" HRef="contact-us.aspx" Alt="Contact Us" Src="contact.gif" Width="68" />

</div>
</div>
    <asp:ContentPlaceHolder ID="PageContent" runat="server" />
    <div id="footer">&copy; <a href="<%=Root%>/terms.aspx">Terms of use and disclaimer</a>
    </div>
    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-18033471-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
    </body>
    </html>

Neil, to answer your question -

<%@ Control Language="C#" Inherits="Propeller.Web.NavItem, Propeller.Web" %>
<%if (!ShowOnState)
  {
    %><a href="<%=Root %>/<%=HRef %>"><img src="<%=Root%>/i/nav/<%=Src %>" alt="<%=Alt %>" class="hover" /></a><%
}
  else
  {      
%><a href="<%=Root %>/<%=HRef %>"><img src="<%=Root%>/i/nav/on/<%=Src %>" alt="<%=Alt %>" /></a><%
  }%>

As for if it's needed. This site is pretty Cray. Hard coded plus use of the CMS...Mental

Original Q&A

There are 4 best solutions below

**David Beesley** · Answer 1

<%@ Control Language="C#" Inherits="Propeller.Web.NavItem, Propeller.Web" %>
<%if (!ShowOnState)
  {
    %><a href="<%=Root %>/<%=HRef %>"><%=Alt %></a><%
}
  else
  {      
%><a href="<%=Root %>/<%=HRef %>"><%=Alt %></a><%
  }%>

Probably a bit hacky. But that should hopefully do it.

**Red Taz** · Answer 2

You could try inheriting from TopNavItem in your own server control. Then override the OnPreRender method and modify the Controls collection.

public class CustomNavItem : TopNavItem {
    protected override void OnPreRender(EventArgs e) {
        base.OnPreRender(e);

        // find ImageCtrl by examining Controls in debug session
        Controls.Remove(ImageCtrl);

        HyperLink link = new HyperLink();
        link.NavigateUrl = this.Href;
        link.ToolTip = this.Alt;

        Controls.Add(link);
    }
}

**Stuart Robson** · Answer 3

In the .master file delete replace any src="pageName.gif" with src="pageName".

In the TopNav file replace what's there with

<%@ Control Language="C#" Inherits="Propeller.Web.NavItem, Propeller.Web" %>
  <%if (!ShowOnState)
    {
      %><a class="hover" href="<%=Root %>/<%=HRef %>"><%=Src %></a><%
    }
  else
    {      
      %><a href="<%=Root %>/<%=HRef %>"><%=Src %></a><%
    }%>

**benlumley** · Answer 4

What happens if you change the items to:

<Rcp:TopNavItem runat="server" Filter="default.aspx" HRef="" Alt="Home" Width="57">Text here</Rcp:TopNavItem>

If not, is there a bit at the top of the file that sets up the rcp namespace that might give a clue as to what system it is so you can google it?

Add text instead of image in ASP navigation system

There are 4 best solutions below

Related Questions in ASP.NET

Related Questions in NAVIGATION

Related Questions in CONTENT-MANAGEMENT-SYSTEM

Related Questions in RC

Trending Questions

Popular # Hahtags

Popular Questions