PDA

View Full Version : CSS Rollover help [+javascript?]

spadez
10-12-2007, 07:16 PM
I have a block that im trying to change the colour of when a user moves their mouse over it, but it isnt a link. At the moment its a td and the html / css for the block is simply:

<td class="postbitleft" width="61">
.postbitleft { background-color: #0B198C; }

The trouble is, there are several blocks that join together to make the final shape, and i need them all to change colour at the same time when the user puts their mouse over any section of it.

http://i20.tinypic.com/vqleuv.jpg

I can supply a link or the full code for the block, i have tried using this code:

<td class="postbitleft" onFocus="this.style.background='#0B198C;'" onBlur="this.style.background='#ORIGCOLOR;'">

But i didnt have any luck, so any help would be much appreciated.


James
spadez
10-13-2007, 03:22 PM
Bump. Been messing this with for an hour now and i still cant get it to function right. I would really appreciate any help.
spadez
10-15-2007, 08:49 PM
Either this is impossible or help here takes a long time :P
coothead
10-16-2007, 07:06 AM
Hi there spadez,

and a warm welcome to these forums. :agree:
Either this is impossible or help here takes a long time
Many members who could solve your problem for you are not available at weekends. They do have lives outside of these forums. ;)
Your problem is not impossible. At the moment just a little vague. ;)
Have a look at this example, and let us know if it is anywhere near to your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
table {
border:2px solid #999;
margin:auto
}
td {
width:200px;
height:50px;
color:#0b198c;
text-align:center;
border:1px solid #000;
}
</style>

<script type="text/javascript">
window.onload=function() {
tds=document.getElementById('tr1').getElementsByTagName('td');
for(c=0;c<tds.length;c++){
tds[c].onmouseover=function(){
for(c=0;c<tds.length;c++){
tds[c].style.color='#fff';
tds[c].style.backgroundColor='#0b198c';
tds[c].style.borderColor='#f00';
}
}
tds[c].onmouseout=function(){
for(c=0;c<tds.length;c++){
tds[c].style.color='#0b198c';
tds[c].style.backgroundColor='#fff';
tds[c].style.borderColor='#000';
}
}
}
}
</script>

</head>
<body>

<table>
<tr id="tr1">
<td>cell</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>

</body>
</html>
Once we know the precise nature of the problem, I am certain that we will find a satisfactory solution. :agree:
spadez
10-17-2007, 12:41 PM
Thats perfect, so rolling over one table changes all of them. However, i was a litte horrified when i was asked if i wanted to run activeX control, do i really need that? I dont want my users to get prompted about running activeX. Im sure i saw another site that did this without needing activeX.

Thank you for your help, look forward to your reply ;)
coothead
10-17-2007, 04:13 PM
Hi there spadez,

However, I was a litte horrified when I was asked if I wanted to run activeX control, do I really need that? I dont want my users to get prompted about running activeX.


This is an IE problem and only happens locally. To effect a cure for the page add this snippet of code directly after the DOCTYPE...

<!-- saved from url=(0014)about:internet -->

To permantly disable this information do this...

open IE.
click 'Tools'.
click 'Internet Options'.
click 'Advanced' tab.
scroll down to 'Security'.
check 'Allow active content to run on My Computer'.
click 'Apply'.
click 'OK'
have a beer. ;)

Further reading:-
http://msdn.microsoft.com/workshop/author/dhtml/overview/motw.asp
spadez
10-17-2007, 04:23 PM
This is an IE problem and only happens locally

So i understand this correctly, do you mean that this only happens because i open the link through my computer and not through the internet, ie

C:\Users\James\Documents\index.html

Not

www.com/index.html

If so, thats super. If not, could you explain where i put this code:

<!-- saved from url=(0014)about:internet -->


I know you said put it after the doctype, so i put it here:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><!-- saved from url=(0014)about:internet -->
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
table {
border:2px solid #999;
margin:auto
}



But it still asked me to confirm the activeX. Once again i really appreciate your help with this.
coothead
10-17-2007, 05:57 PM
Hi there spadez,
But it still asked me to confirm the activeX.
Well, that is really strange. :supereek:
It works OK for me. :agree:
Sometimes IE has problems if the 'Temporary Internet Files' are overfull.
Try emptying them and see if that effects a cure.
Failing that use the second method. :agree:
GarrettW
10-17-2007, 06:49 PM
... i have tried using this code:

<td class="postbitleft" onFocus="this.style.background='#0B198C;'" onBlur="this.style.background='#ORIGCOLOR;'">

But i didnt have any luck, so any help would be much appreciated.that looks ok except that you're using the wrong events for what you said you wanted. change "onfocus" to "onmouseover" and change "onblur" to "onmouseout", and see what happens.