I have created a page with 4 CSS buttons and one other Grpahic on the page. The CSS buttons are the ones where it's a picture and each button has 2 pictures that stand on top of each other. When the mouse rolls over the button the Top Picture goes away and shows the bottom picture.
All 4 buttons work great. The problem is on the last button. So I have all 4 css buttons on one row (one DIV) then below those buttons I have another div with a logo/picture. But when I put the mouse over this logo the last css button changes to the bottom view and if I click on the logo it is as if I clicked on the last css button.
How can I stop this????
HTML Code:
-----------------------------------------------------------------------------------------------------
@ Page Language="VB" AutoEventWireup="false" CodeFile="reg_Location.aspx.vb" Inherits="reg_Location"
@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"
@ Register src="UserControls/Footer.ascx" tagname="Footer" tagprefix="uc1"
--<script type="text/javascript"> function InitialLoad() { var home = document.getElementById("pnlButtons"); home.style.opacity="0"; home.style.display="block"; } </script>--
#BBButtons
{
height: 188px;
width: 600px;
}
--<asp:Panel ID="Panel1" runat="server" Width="606px" HorizontalAlign="Center"> <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Please Select Your Location:"></asp:Label> <div class="ESrollovers"> <a href="#" onclick="javascript:__doPostBack('Button1', '');" /> </div> <div class="RBrollovers"> <a href="#" onclick="javascript:__doPostBack('Button3', '');" /> </div> <div class="PDrollovers"> <a href="#" onclick="javascript:__doPostBack('Button2', '');" /> </div> <div class="MProllovers" visible="false"> <a href="#" visible="false" onclick="javascript:__doPostBack('Button4', '');" /> </div> <div class="SProllovers"> <a href="#" onclick="javascript:__doPostBack('Button5', '');" /> </div> </asp:Panel>--
--<asp:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="pnlButtons"> <Animations> <OnLoad> <Sequence> <ScriptAction Script="InitialLoad();" /> <FadeIn Duration="2.0" Fps="24" AnimationTarget="pnlButtons" /> </Sequence> </OnLoad> </Animations> </asp:AnimationExtender>--
---------------------------------------------------------------------------------------------------------
Code Behind
---------------------------------------------------------------------------------------------------------
Partial Class reg_Location
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Session("Location") = "El Segundo"
Session("LocValue") = "1"
Response.Redirect("reg_RegType.aspx", False)
End Sub
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
'Response.Redirect("Suggestions.aspx?RouteID=PD", False)
Session("Location") = "Palmdale"
Session("LocValue") = "3"
Response.Redirect("reg_RegType.aspx", False)
End Sub
Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
Session("Location") = "Rancho Bernardo"
Session("LocValue") = "4"
Response.Redirect("reg_RegType.aspx", False)
End Sub
' '' ''Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
' '' '' Session("Location") = "Moss Point"
' '' '' Session("LocValue") = "5"
' '' '' Response.Redirect("reg_Registration.aspx", False)
' '' ''End Sub
Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click
Session("Location") = "Space Park"
Session("LocValue") = "2"
Response.Redirect("reg_RegType.aspx", False)
End Sub
End Class
-----------------------------------------------------------------------------------------------------------------
CSS/LocPick.css
-----------------------------------------------------------------------------------------------------------------
body {
}
.ESrollovers a
{
display:block;
height:191px;
width:150px;
background:url(../images/ESRollOverButton.jpg) no-repeat
}
.ESrollovers a:hover{
background-position:bottom
}
.ESrollovers
{
float:left;
height:191px;
width:150px;
/*margin:0 40px 20px;*/
background:url(../images/ESRollOverButton.jpg) no-repeat
}
.PDrollovers a
{
height:191px;
width:150px;
display:block;
background:url(../images/PDButtonRollOver.jpg) no-repeat
}
.PDrollovers a:hover{
background-position:bottom
}
.PDrollovers
{
float:left;
height:191px;
width:150px;
/*margin:0 40px 20px;*/
background:url(../images/PDButtonRollOver.jpg) no-repeat
}
.RBrollovers a{
height:191px;
width:150px;
display:block;
background:url(../images/RBButtonRollOver.jpg) no-repeat
}
.RBrollovers a:hover{
background-position:bottom
}
.RBrollovers
{
float:left;
height:191px;
width:150px;
/*margin:0 40px 20px;*/
background:url(../images/RBButtonRollOver.jpg) no-repeat
}
.SProllovers a{
height:191px;
width:150px;
display:block;
background:url(../images/SPButtonRollOver.jpg) no-repeat
}
.SProllovers a:hover{
background-position:bottom
}
.SProllovers
{
float:left;
height:191px;
width:150px;
/*margin:0 40px 20px;*/
background:url(../images/SPButtonRollOver.jpg) no-repeat
}