+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / How to set the search button to a graphic from a style sheet?

How to set the search button to a graphic from a style sheet?

5 posts, 0 answered
  1. Sharon
    Sharon avatar
    28 posts
    Registered:
    29 Jul 2008
    27 Jan 2009
    Link to this post
    Bear with me as I'm new to both Sitefinity and the asp world. I'm coming from a web site done in html / javascript / cold fusion.

    I followed the knowledge base article 
    How to substitute the search button with an image in Search box - ID#965

    which works great.

    However, how can I move that same style to my style sheet and how do I set the image to a different one on a hover?

    I tried replacing the style information from the example with a class name from the style sheet but that was no good.

    Thanks!
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    30 Jan 2009
    Link to this post
    Hello Sharon,

    Thank you for contacting us.

    For instance you could try using ImageButton control for changing the images:

       protected void Page_Load(object sender, EventArgs e) 
        { 
            ImageButton1.Attributes.Add("onmouseover""this.src='../Images/image1'"); 
            ImageButton1.Attributes.Add("onmouseout""this.src='../Images/image2'"); 
        } 

    or create a JavaScript function that will switch a button from one image to another.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Sharon
    Sharon avatar
    28 posts
    Registered:
    29 Jul 2008
    30 Jan 2009
    Link to this post
    Ivan thanks for your ideas. I'm having difficulty trying them though. I'm probably just being dense but maybe I'm not explaining it well. Also FYI, I'm trying to work in VB but I'll switch if it works better in C#.

    -In my .master file I have an asp:ContentPlaceHolder

    -In Sitefinity in my template, I placed the SearchBox Control.

    -In ~/Sitefinity/ControlTemplates/Search/SearchBox.ascx I added the style:

    <

     

    input type ="button" id="searchButton" runat="server" class="sf_searchSubmit" alt="Search" style="background-image: url(http://localhost/Mysite/App_Themes/MyTheme/Images/grayarrowoff.gif); width: 22px; height: 22px; border: none">

    If I go to the page load event in my master, I can't add attributes to searchButton as it doesn't exist yet.

    I'm also unsure how to do this with javascript. I can load the script in my .master file but since only inline styles seem to work with the controls, how do I tell it to run the javascript?

    In the original web page I'm porting, the code looked like this:
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/grayarrowon.gif',1)"><img src="images/grayarrowoff.gif" name="Image17" width="16" height="16" border="0" align="absmiddle" id="Image17" /></a>

    Thanks for your help

     

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    03 Feb 2009
    Link to this post
    Hi Sharon,

    Then, try using css styles. It will be easy then using C# or javascript.

    Here is the code.
    <style type="text/css"
    .myclass 
        background-image: url(http://localhost/Images/image1.gif); 
        width: 150px; border: none; 
    .myclass:hover 
        background-image:url(http://localhost/Images/image2.gif);    
    </style> 
     
    <fieldset class="sf_searchBox"
        <asp:Label runat="server" AssociatedControlID="queryText" Text="Search" /><asp:TextBox ID="queryText" runat="server" CssClass="sf_searchText"
        </asp:TextBox> 
     
    <input type ="button" id="searchButton" runat="server" class="myclass" alt="Search"  />   
    </fieldset> 

    This will change the image when the onmouseover event happen.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Sharon
    Sharon avatar
    28 posts
    Registered:
    29 Jul 2008
    06 Feb 2009
    Link to this post
    Thanks. It worked great!
Register for webinar
5 posts, 0 answered