Is there a way to turn this DHTML code into CSS code? If so what is the correct way it should be put in the code? -
-
onmouseover="this.style.backgroundColor='#0061D7';" onmouseout="this.style.backgroundColor='#3D93FF';"
-
8  280183 
Is there a way to turn this DHTML code into CSS code? If so what is the correct way it should be put in the code?
[HTML]onmouseover="th is.style.backgr oundColor='#006 1D7';" onmouseout="thi s.style.backgro undColor='#3D93 FF';"[/HTML]
The text or object you want to apply those attributes to can be wrapped using the <span></span> tags.
For Example:
[HTML]<span class="someclas sname">Your Text or Object Here</span>[/HTML]
Then the css would be: -
/* this is for the mouseout and default settings */
-
-
.someclassname {
-
background-color: #3D93FF;
-
}
-
-
/* :hover is a pseudo selector to use to set the mouseover attributes */
-
.someclassname:hover {
-
background-color: #0061D7;
-
}
-
I hope this helps.
Let me know if you have any other questions.
~ Chipgraphics
The text or object you want to apply those attributes to can be wrapped using the <span></span> tags.
For Example:
[HTML]<span class="someclas sname">Your Text or Object Here</span>[/HTML]
Then the css would be:
-
/* this is for the mouseout and default settings */
-
-
.someclassname {
-
background-color: #3D93FF;
-
}
-
-
/* :hover is a pseudo selector to use to set the mouseover attributes */
-
.someclassname:hover {
-
background-color: #0061D7;
-
}
-
I hope this helps.
Let me know if you have any other questions.
~ Chipgraphics
Yes it helps alot. Just a question, would it be better to have an CSS hover effect vs this effect?
Yes it helps alot. Just a question, would it be better to have an CSS hover effect vs this effect?
If you want to have the effect still appear even if the user has javascript disabled then use CSS. *note*: If you are applying this to table rows that alternate colors you have to apply the css to the table ROW
for example:
[HTML]<table>
<tr class="someclas s">
<td>foo</td>
</tr>
</table>[/HTML]
Your css looks like this: - tr.someclass {
-
background-color: #CCCCCC;
-
}
-
tr.someclass:hover {
-
background-color: #E2E2E2;
-
}
So if the user has javascript disabled they will still see the :hover effect. At that point it's just a matter of your preference on which to use.
~ Chipgraphics
Hi. I'm doing something like that, but just a little bit different. I have a table (sudoku table, to be precise), and I have a text that talks about different cells, and I would want that when someone put the mouse over the name of the cell (r5c6, or whatever) that cell inverts it's color (text color and background color). I would also like to do this in css. Can someone help me? Thank you very much.
EDIT: PS: I also need to highlight especific parts of the table. Eg: The 2nd block, the 3rd row, the 5th column, etc...
I have just tried out
insert the below code in a html page and check out - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
<html>
-
<head>
-
<title>Untitled Document</title>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-
<script language="JavaScript" type="text/JavaScript">
-
<!--
-
function MM_findObj(n, d) { //v4.01
-
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
-
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
-
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
-
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
-
if(!x && d.getElementById) x=d.getElementById(n); return x;
-
}
-
-
function MM_showHideLayers() { //v6.0
-
var i,p,v,obj,args=MM_showHideLayers.arguments;
-
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
-
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
-
obj.visibility=v; }
-
}
-
//-->
-
</script>
-
</head>
-
-
<body>
-
<table width="45%" height="43" border="0" cellpadding="0" cellspacing="0">
-
<tr>
-
<td width="20" bordercolor="#FF0000"><a href="#" onMouseOver="MM_showHideLayers('red','','show');" onMouseOut="MM_showHideLayers('red','','hide');" ><font color="#FF0000">Red</font></a></td>
-
<td width="20"><a href="#" onMouseOver="MM_showHideLayers('blue','','show')" onMouseOut="MM_showHideLayers('blue','','hide');"><font color="#0000FF">Blue</font>
-
</a></td>
-
<td width="20"><a href="#" onMouseOver="MM_showHideLayers('green','','show')" onMouseOut="MM_showHideLayers('green','','hide');"><font color="#00FF00">Green</font></a>
-
</td>
-
<td width="20"><a href="#" onMouseOver="MM_showHideLayers('yellow','','show')" onMouseOut="MM_showHideLayers('yellow','','hide');"><font color="#FFFF00">Yellow</font></a></td>
-
</tr>
-
<tr>
-
<td width="20"> </td>
-
<td width="20"> </td>
-
<td width="20"> </td>
-
<td width="20"> </td>
-
</tr>
-
</table>
-
<div id="red" style="position:absolute; left:9px; top:33px; width:61px; height:22px; z-index:7; visibility: hidden;" >
-
<table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#FF0000">
-
<tr>
-
-
<td align="center">
-
</td>
-
</tr>
-
</table>
-
</div>
-
<div id="blue" style="position:absolute; left:71px; top:33px; width:71px; height:22px; z-index:7; visibility: hidden;" >
-
<table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#0000FF">
-
<tr>
-
-
<td align="center">
-
</td>
-
</tr>
-
</table>
-
</div>
-
<div id="green" style="position:absolute; left:145px; top:32px; width:100px; height:22px; z-index:7; visibility: hidden;" >
-
<table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#00FF00">
-
<tr>
-
-
<td align="center">
-
</td>
-
</tr>
-
</table>
-
</div>
-
<div id="yellow" style="position:absolute; left:248px; top:33px; width:105px; height:22px; z-index:7; visibility: hidden;" >
-
<table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#FFFF00">
-
<tr>
-
-
<td align="center">
-
</td>
-
</tr>
-
</table>
-
</div>
-
</body>
-
</html>
@chipgraphics
Hi.. This is working perfectly on firefox and chrome.. but not on IE8.. Any solution??
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: laurie |
last post by:
Hi.
I have a DIV section that has many thumbnail images inside it. I have a DIV so all images can fit in a row and the horizontal
scroll bar is used to move the thumbnails from left to right.
Does anyone know any code to have the DIV scroll from left to right when I use an onmouseover on two images either side of the
DIV?
Thanks
Laurie
|
by: Richard |
last post by:
I know I can have like <a href="#" onclick="dothis" onmouseover="dothat">
But how do you properly code two mouseover's in one statement?
<a href="#" onmousever="dothis" onmouseover="dothat">
As an example of use:
Column A holds menu items.
When a mouse over is performed, two actions take place instead of one.
Action one sends an image to a...
|
by: windandwaves |
last post by:
Hi Gurus
I am trying to make this rather complicated maps with an a huge number of mouseovers and the like.
I want to set up a function that OnMouseDown swaps the OnMouseOver and OnMouseOut for the same element.
E.g.
<A HREF="#"
OnMouseOver="A(); return true"
OnMouseOut"B(); return true;"
|
by: news.west.cox.net |
last post by:
I have been writing a practice sliding div navigation script. I am finding
myself in the position where I need to force a div into showing the hover
behavior defined in css.
So my question is this. If I have two divs, is there a way to make the
second div display its onmouseover behavior when the mouse is over div 1?
|
by: drjackk |
last post by:
Hello,
I'm trying to change the onmouseover event dynamically.
This sets-up the initial onmouseover event:
<a href="home.html"> <img border="0" id="img22"
src="images/home1.jpg" height="15" width="85" alt="Home"
onmouseover="FP_swapImg(1,0,/*id*/'img22',/*url*/'images/home2.jpg')"</a>
| | |
by: MrCode2k |
last post by:
Hello,
Trying to do: I just want a table that I can scroll and that has fixed
headers.
Problem: I got it to work but when I added the onmouseover event it
didn't work anymore.
Replicate-Problem: Scrolldown the textbox and put the mouse over a row.
|
by: MrCode2k |
last post by:
Hello,
Trying to do: I just want a table that I can scroll and that has fixed
headers.
Problem: I got it to work but when I added the onmouseover event it
didn't work anymore.
Replicate-Problem: Scrolldown the textbox and put the mouse over a row.
|
by: Justin Rowe |
last post by:
I'm attempting to design a site with alot of dynamic content and
intractability, however I've hit a snag when it comes to the function of
the onMouseOver and onMouseOut events. Using a bit of code from
QuirksMode to grab the location of the mouse, I've built a tooltip
function to show a tooltip to the user depicting the target of a link,
the...
|
by: den2005 |
last post by:
Hi everybody,
I am confused and still looking why this codes is not working. Can anyone notice or know why this code is not working? Thanks in advance.
Code working:
<form id="form1" runat="server">
<div>
</div>
<div>
|
by: oopaevah |
last post by:
I have written some dom code to create a list of divs, each with it's
own id. I want to set the onmouseover and onmouseout events to
highlight the div when the mouse is over it. However I cannot use the
method below because oDiv.id is always set to the last div I create -
so the last div is highlighted regardless of which div I am onmouseover...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
| | |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
| | |
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
