ASP.net Change color/shading on mousehover over image

try:


   <style type="text/css">
        .style1
        {
            height: 21px;
        }

        #Image1:hover
        {
            border:solid 2px yellow;

        }
    </style>

For multiple images, add class="imageHover" propetry to all images you want to work with and then use:

   <style type="text/css">
        .style1
        {
            height: 21px;
        }

        .imageHover:hover
        {
            border:solid 2px yellow;

        }
    </style>

Thanks. How do I connect each image to this style?

In the cssClass property of the image Button I put "imageHover" but the border didn't change color when I hovered

Hi murbro,

I should have tested before posting it. For some reason, I cannot get it work either.

brb

we were missing an empty <a> tag. I tried:

<a href="#"> <asp:Image ID="singleImageTag" class="singleImageTag" Runat="server" ImageUrl="~/image/2013_1_Region1_101_2_MedCtr02.png" /></a>

            <style type="text/css">
        .style1
        {
.
.

        }

        .singleImageTag{border:5px solid #eee;}
        .singleImageTag:hover {border:5px solid #555;}

    </style>

I will try to revise your code also.

<a href="#"><asp:ImageButton ID="ImageButton6" class="imageHover" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/DB_Mirror2.jpg" PostBackUrl="~/Video10.aspx"
            Width="281px" /></a>

            <style type="text/css">
              .style1
              {
                  height: 21px;
             }

        .imageHover
        {
            border:5px
           solid #eee;
        }
        .imageHover:hover
       {
         border:5px solid #555;
       }

    </style>

Is it working for you now?

Mike

Still trying

I put the style code at the top and then used the following but still doesn't work
        <a href="#"><asp:ImageButton ID="ImageButton1" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/AutoInv.jpg" PostBackUrl="~/Excel_and_Databases.aspx"
            Width="282px" CssClass="imageHover" /></a>

You need to do:

1. add class="imageHover" to your image tag. See my last post.

2. make sure you css read like:

            <style type="text/css">
              .style1
              {
                  height: 21px;
             }

        .imageHover
        {
            border:5px
           solid #eee;
        }
        .imageHover:hover
       {
         border:5px solid #555;
       }

    </style>

I used the following and still doesn't work

      <a href="#">
        <asp:ImageButton ID="ImageButton1" class="imageHover" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/AutoInv.jpg" PostBackUrl="~/Excel_and_Databases.aspx"
            Width="282px" /></a>

            <style type="text/css">
               .style1
               {
                   height: 21px;
              }

         .imageHover
         {
             border:5px
            solid #eee;
         }
         .imageHover:hover
        {
          border:5px solid #555;
        }

     </style>

change

border:5px

to

border:5px;

I must have dropped ; when I was typing it.

Hi. Did that and still doesn't work. Is there perhaps another property to change. I am baffled

There was also an error saying that "solid is not a valid CSS name"

This:

 .imageHover
        {
            border:5px
           solid #eee;
        }

should read:

 .imageHover
        {
            border:5px solid #eee;
        }

Unfortunately still doesn't work

Could you post entire page similar to the original post?

<%@ Page Title="Self Service Business Intelligence" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="Online_Excel._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

            <style type="text/css">
               .style1
               {
                   height: 21px;
              }

 .imageHover
         {
             border:5px solid #eee;
         }
         .imageHover:hover
        {
          border:5px solid #555;
             border-color:Yellow;
        }

     </style>
    </asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

 
    <asp:Image ID="Image1" runat="server" Height="225px"
    ImageUrl="~/Resources/_MAIN_LOGO.png" Width="892px" />
    <br />
    <br />

    <table>
            <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink1" runat="server"
            NavigateUrl="~/Excel_and_Databases.aspx">RAPID-FIRE AUTO-INVOICING</asp:HyperLink>
                </td>
    <td></td>
    <td class="style2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink2" runat="server"
            NavigateUrl="~/Cloud Database Query And Editing Tool.aspx">EXCEL CLOUD DATABASE SOLUTIONS</asp:HyperLink>
                </td>
    <td></td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Video1.aspx">LIVE WEB DASHBOARDS BUILT IN EXCEL</asp:HyperLink>
                </td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
        <a href="#"><asp:ImageButton ID="ImageButton1" class="imageHover" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/AutoInv.jpg" PostBackUrl="~/Excel_and_Databases.aspx"
            Width="282px" /></a>
        </td>
    <td></td>
    <td class="style2">
        <asp:ImageButton ID="ImageButton2" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/Cloud_Hub.jpg"
            PostBackUrl="~/Cloud Database Query And Editing Tool.aspx" Width="279px"
            CssClass="imageHover" />
        </td>
    <td></td>
    <td>
        <asp:ImageButton ID="ImageButton3" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/chart 1.jpg" PostBackUrl="~/Video1.aspx"
            Width="281px" CssClass="imageHover" />
        </td>
    <td></td>
    <td></td>
    </tr>
        <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Video8.aspx">SUPERCHARGED DETAILED QUOTING</asp:HyperLink>
                </td>
    <td class="style1"></td>
    <td class="style3">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/Video10.aspx">MANAGE CLOUD (SQL) DATA IN EXCEL</asp:HyperLink>
                </td>
    <td class="style1"></td>
    <td class="style1">
        <asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/Video9.aspx">IN-SPREADSHEET EDITING OF CLOUD/ SQL DATA </asp:HyperLink>
                </td>
    <td class="style1"></td>
    <td class="style1"></td>
    </tr>
            <tr>
    <td>
        <asp:ImageButton ID="ImageButton4" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/QPane2.jpg" PostBackUrl="~/Video8.aspx"
            Width="282px" />
                </td>
    <td></td>
    <td class="style2">
        <asp:ImageButton ID="ImageButton6" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/DB_Mirror2.jpg" PostBackUrl="~/Video10.aspx"
            Width="281px" />
                </td>
    <td></td>
    <td>
        <asp:ImageButton ID="ImageButton5" runat="server" BorderColor="Black"
            BorderStyle="Solid" BorderWidth="4px" Height="188px"
            ImageUrl="~/Resources/In-Spreadsheet Editing.jpg" PostBackUrl="~/Video9.aspx"
            Width="281px" />
                </td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>




 
</asp:Content>

I apologize for being so distracted this morning (and also I am getting starting in asp.net). You had also revised the CSS somewhat.

Use this while I am also trying it here:

.imageHover
        {
            border:5px  solid #eee;
        }

should read:

 .imageHover:hover
        {
            border:5px solid yellow;
        }

Great. That works! Thanks very much for taking all the time out!