JavaScript Forum

**shaoen01** · 12-16-2005, 11:55 PM

Hi,

Currently, i am would like to apply a <style> on my div onmouseover but unable to do so. I would like to apply a border account the image when onmouseover. Hopefully, you guys can help me out here. Below is a snippet of my code:

<HTML>
<TABLE id="Table1" style="WIDTH: 56px; HEIGHT: 30px" cellSpacing="1" cellPadding="1" width="56"
border="1">
<TR>
<TD>
<div id="divDisplay" onmouseover="borderit">
<asp:ImageButton id="imgDisplay" runat="server"></asp:ImageButton>
</div>
<div id='more1' style="DISPLAY:block" onmouseover="this.style.color='red'">
<a href="#" id="link1" name="link1" onclick="show('more',true)">More</a>
</div>
<div id='more' style="DISPLAY:none" onmouseover="this.style.color='red'">
<asp:ImageButton id="img2" runat="server"></asp:ImageButton>
<asp:ImageButton id="img3" runat="server"></asp:ImageButton>
<a href="#" id="link2" name="link2" onClick="show('more', false)">Close</a>
</div>
</TD>
</TR>

</TABLE>
</HTML>

Here is my <style> coding in javascript:

<Javascript>
<style type="text/css">

.borderit{
color: red;
}
</style>
</Javascript>

**funkdaddu** · 02:23 AM

You're mixing JS and CSS syntax together, you only really need CSS. You can get rid of the <javascript> tags, that's not how you would define JS code anyway. Your HTML code is kinda sloppy too, you should have a body, head and title tags as well as doctype...

I assume you want the img2 and img3 buttons to be bordered on mouseover? Well first, you'r running ASP.net code which will generate an <input type=image> tag (which I'm not too familiar with) - You want to just add code to add a border around just the input images? Add class="borderit" to your asp:ImageButton tag (which is rendered as an <input type="image"> tag, then in your stylesheet, set the over attributes to .borderit:hover {}. Here's an example using your code:

HTML Code:

<html>
	<head>
		<title>Page Title</title>
		<style type="text/css" media="screen"><!--
.borderit:hover {
	border: solid 1px red }
--></style>
	</head>
	<body>
		<table id="Table1" style="WIDTH: 56px; HEIGHT: 30px" width="56" border="1" cellspacing="1" cellpadding="1">
			<tr>
				<td>
					<div id="divDisplay">
						<asp:ImageButton id="imgDisplay" runat="server" class="borderit"></asp:ImageButton>
					</div>
					<div id="more1" style="display:block">
						<a id="link1" onclick="show('more',true)" name="link1" href="#">More</a>
					</div>
					<div id="more" style="display:none">
						<asp:ImageButton id="img2" runat="server" class="borderit"></asp:ImageButton>
						<asp:ImageButton id="img3" runat="server" class="borderit"></asp:ImageButton>
						<a id="link2" onclick="show('more', false)" name="link2" href="#">Close</a>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

and here's a very simplistic sample to get to the nitty gritty of it, just hover over the submit image:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
		<title>Welcome</title>
		<style type="text/css" media="screen"><!--
.classname:hover {
	border: 1px red solid
}
--></style>
	</head>

	<body bgcolor="#ffffff">
		<form action="#" method="get" name="FormName">
			<input type="image" src="image.gif" height="25" width="25" alt="Go" class="classname">
		</form>
		<p></p>
	</body>

</html>

Does that help?

**shaoen01** · 12-17-2005, 02:33 AM

The code shown below does not work because there is no "class" attribute in the Imagebutton user control.

Quote:

<asp:ImageButton id="img2" runat="server" class="borderit"></asp:ImageButton>

However, there is one attribute called "cssClass" which i think is similar so i did this:

Quote:

<asp:ImageButton id="img2" runat="server" cssClass="borderit"></asp:ImageButton>

Unfortunately, it does not work at all. I also followed the <style> that you have given me.

Quote:

Btw, the reason why i dont have a head or body is because i am creating a custom user control which is the .ascx file. This is not a .aspx file where <form>, <head>, <body>, etc tags cannot be used. If you go and try it yourself, you will not be able to add such tags.

Anyway, thank you for your response and i hope you can continue to help me out with this problem. Thanks

p.s. I added the <HTML></HTML> tags accidentally, actually i wanted to use .

**funkdaddu** · 12-17-2005, 10:55 PM

I'm not familiar with the ImageButton function of ASP.net. When the client-side code is generated, does it have class="borderit" written out in the input tag? It must generate a standard HTML form for the client - right?

**shaoen01** · 12-18-2005, 10:52 AM

I did not try using the "cssClass" attribute in my asp:imagebutton. Before your reply, i decided not to use "class", instead i used the "onmouseover" and "onmouseout" attribute which is found in <input> tags. In ASP.Net the imagebutton is equivalent to <input type=image>, however it does not allow me to choose the attributes of "onmouseover" and "onmouseout". Therefore, all along i always thought that there was so such attributes.

And so i tried them out and it works great! Here is the snippet coding.

Code:

input type="Image" name="imgBtn" id="filename" onclick="Btn_onClick()" src=Images/filename.jpg 
class="removeBorder" onmouseover="this.className='applyBorder'" 
onmouseout="this.className='removeBorder'" />

**Minaki** · 12-19-2005, 06:05 PM

Any attributes in an ASP.NET control that ASP.NET doesn't recognise will usually just be rendered as-is to the client.

Alternatively, to access these attributes from the .NET code, you can use:
MyControl.Attributes.Add("onmouseover", "javascript:doSomething();")

(And yes, the CssClass attribute in .NET renders to the elements class attribute.)

**shaoen01** · 12-21-2005, 01:33 PM

Oh, i did not know that. I have seen MyControl.Attributes.Add("onmouseover", "javascript:doSomething();"), but i never knew that it was for this purpose. No wonder, attributes such as "onmouseover", etc, cannot be accessed.

Thanks for the information again!