Unable to apply <style> to <div> tags

@shaoen01Dec 17.2005

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:

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

to post a comment

JavaScript

10 Comments(s) _↴

@KravvitzDec 17.2005 — #onmouseover="borderit"
won't work

You need to use this:
onmouseover="this.className='borderit';"

@shaoen01authorDec 17.2005 — #The line you have provided me, as shown below, does not work for me as well.
onmouseover="this.className='borderit';"[/QUOTE]

I have checked that my onmouseover is working by checking it. Is there anyway else to do this? Thanks

@KravvitzDec 17.2005 — #Try this.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;&lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;style type="text/css"&gt;
 .bluetext {
 color: #00f;
 }
 .redtext {
 color: #f00;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div class="bluetext" onmouseover="this.className='redtext';"&gt;
 example text
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@shaoen01authorDec 17.2005 — #Kravvitz: Your coding below does work:
<div class="bluetext" onmouseover="this.className='redtext';">[/QUOTE]

But when i applied it to my <div> tags which house my <input type="image"> tag, it does not work. Your coding is like only able to change the colours of text at the moment. I wish to set a border around my image button onmouseover. Thanks

@KravvitzDec 17.2005 — #Try changing your CSS rule to this.

.borderit{
 border: 2px solid red;
 }

@shaoen01authorDec 17.2005 — #Hi,

Your code works great. Do you think it is possible to use the "borderit" style individually at each <input type="image"> instead of doing it at my <div> tag. Mainly because, i would like to generate dynamic images and create a new <input type="image"> as and when needed. Instead of having a static 3 <input type="image"> in my .ascx file, which is currently contained by my <div> tags. Thanks

@KravvitzDec 17.2005 — #You're welcome ?

Yes, you could apply the class to the <input type="image"> instead of the <div>.

@shaoen01authorDec 17.2005 — #Hi,

I applied this code:
[Code]<asp:ImageButton id="img2" runat="server" CssClass="borderit"></asp:ImageButton>[/Code]

It does work but unfortunately i would like to only highlight the image onmouseover and unhighlight it onmouseout. I think the <style> will need some modifications but im unsure. Do you know how to do that?

@KravvitzDec 17.2005 — #You'll have to figure out how to turn this into ASP yourself.
onmouseover="this.className='borderit';" onmouseout="this.className='';"

If IE6 supported :hover on elements other than, <a>, then you could use .borderit:hover, but it doesn't so you're probably better off sticking with this simple JavaScript.

@shaoen01authorDec 17.2005 — #This code below works for me. Initially, i did not apply this was because there was no "mouseover" and "mouseout" attribute in ASP.Net ImageButton. Therefore, i tried other ways which obviously could not work. But it works fine now and i dont care if ASP.Net have those attributes, as long it doesnt give me errors. Thanks a lot. ?

[Code]
 onmouseover="this.className='borderit';" onmouseout="this.className='';"
 [/Code]

Also in #JavaScript _↴

MooTools Sortables Split query string = + and &Javascript cancels out second function

Success!

Help @shaoen01 spread the word by sharing this article on Twitter...

Tweet This

Unable to apply <style> to <div> tags

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Unable to apply <style> to <div> tags

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴