Mark_SDLLC
asked on
.net repeater chrome onmouseover
I have a repeater that displays images. I want the image to get larger when I mouseover. I used hoverbox to make this happen. It works correctly outside the repeater but when I use the .net repeater hoverbox does not work in chrome. It does work in IE.
http://pm.sdweb.info/Projects.aspx?Project_ID=1
http://pm.sdweb.info/Projects.aspx?Project_ID=1
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<ul class="hoverbox">
<li>
<a href="ImageViewer.aspx?Image_ID=<%# Eval("IMAGE_ID") %>&PROJECT_ID=<%# Eval("PROJECT_ID") %>" onmouseover="ddrivetip('<%# Container.DataItem("Title") %>')" onmouseout="hideddrivetip()" class="jTip2"><img src="<%# Eval("IMAGE_SOURCE") %>" alt="Project Photo" /><img src="<%# Eval("IMAGE_SOURCE") %>" class="preview" alt="Project Photo" /></a>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 200px;
height: 150px;
}
.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview
{
border-color: #000;
width: 400px;
height: 300px;
}
/* =Internet Explorer Fixes
----------------------------------------------------------------------*/
.hoverbox a
{
position: relative;
}
.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}
.hoverbox a:hover .preview
{
top: -38px;
left: -50px;
}
.hoverbox li
{
position: static;
}
Im thinking that you need a JS to check the browser and handle any differences...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank You
Glad to have been of help :)