adding a dot or a block

[nezbo]

Hi all

 

I have this table and i am using javascript to change the colour of the back ground

 

here are the functions :

 

function javaHoverOver(opt)
{	
var element = document.getElementById(opt).style;
element.backgroundColor = '#bfe2f9';
<!-- element.borderRight="thick solid #0000FF"; -->
}
function javaHoverOut(opt)
{
var element = document.getElementById(opt).style;
element.backgroundColor = '#d4ecfb';
<!-- element.borderRight="thick solid #0000FF"; -->
}

 

and here is the table :

 

echo "<table cellspacing=\"1\" class=\"modual\"><tr class=\"tHedder\" onclick=\"hide_linksy('my_linksy')\" onmouseover=\"this.style.cursor='hand'\"><td width=\"200px\">";
echo "<span class=\"main\"><strong>Home</strong></span></td><td align=\"right\"><span class=\"main\" id=\"my_linksy2\"><<</span></td></tr><tr class=\"modual\" ><td colspan=\"2\"><table id=\"my_linksy\" style=\"visibility:visible;position:relative;\">";
echo "<tr id='opt1' onmouseover=\"javaHoverOver('opt1')\" onmouseout=\"javaHoverOut('opt1')\"><td class='linksW'><span class=\"small\"><a href=\"index.php\"><span class=\"main\"><strong>Home</strong></span></a><br></span></td></tr>";
echo "<tr id='opt2' onmouseover=\"javaHoverOver('opt2')\" onmouseout=\"javaHoverOut('opt2')\"><td class='linksW'><span class=\"small\"><a href=\"aboutUs.php\"><span class=\"main\"><strong>About us</strong></span></a><br></span></td></tr>";
echo "<tr id='opt3' onmouseover=\"javaHoverOver('opt3')\" onmouseout=\"javaHoverOut('opt3')\"><td class='linksW'><span class=\"small\"><a href=\"emergency.php\"><span class=\"main\"><strong>In An Emergency</strong></span></a><br></span></td></tr>";
echo "<tr id='opt4' onmouseover=\"javaHoverOver('opt4')\" onmouseout=\"javaHoverOut('opt4')\"><td class='linksW'><span class=\"small\"><a href=\"pInfo.php\"><span class=\"main\"><strong>Patient Information</strong></span></a><br></span></td></tr>";
echo "<tr id='opt5' onmouseover=\"javaHoverOver('opt5')\" onmouseout=\"javaHoverOut('opt5')\"><td class='linksW'><span class=\"small\"><a href=\"faq.php\"><span class=\"main\"><strong>FAQ</strong></span></a><br></span></td></tr>";

 

etc...

 

and what i want it to do it either add a red dot or a box (like i light) to the end to the end of the row or change the border, or even if i can set a borderLeft to red or something.

 

 

[PHP Monkeh]

This should be in the JavaScript/CSS/HTML forum, not here!

 

But as for an answer, this is should work:

 

function javaHoverOver(opt)
{	
var element = document.getElementById(opt).style;
element.backgroundColor = '#bfe2f9';
element.style.border-right='thick solid #0000FF';
}
function javaHoverOut(opt)
{
var element = document.getElementById(opt).style;
element.backgroundColor = '#d4ecfb';
element.style.border-right='0px';
}

[nezbo]

the functions are Javascript and in my function file. i have also tryed this and i cant get it to work. i think it might be something to do with the fact that i am using it with in a <tr>

 

I have also changed this to be as you have said and i am now geting an error saying : object required.

 

I have searched in google and for the if i use :

element.borderRight="thick solid #0000FF"; 

itr should work but i can get it to work.

 

here is my url to see where i am using it...

 

www.eastlancsmedicalservices.co.uk

 

cheers Neil

 

This should be in the JavaScript/CSS/HTML forum, not here!

 

But as for an answer, this is should work:

 

function javaHoverOver(opt)
{	
var element = document.getElementById(opt).style;
element.backgroundColor = '#bfe2f9';
element.style.border-right='thick solid #0000FF';
}
function javaHoverOut(opt)
{
var element = document.getElementById(opt).style;
element.backgroundColor = '#d4ecfb';
element.style.border-right='0px';
}

[haku]

This is a javascript issue, not a php issue. You are in the wrong session of the forum.

 

On top of this, you should be using CSS to solve your problem, not javascript. Javascript isn't dependable, and is inefficient for styling.

[nezbo]

thank you for your useful responce!

 

I am using PHP for the whole of my site, is as far as i care it is php using javascript for parts of it, and i am a relitive newbe...

 

 

This is a javascript issue, not a php issue. You are in the wrong session of the forum.

 

On top of this, you should be using CSS to solve your problem, not javascript. Javascript isn't dependable, and is inefficient for styling.

[haku]

I am using PHP for the whole of my site

 

Then how do you explain the javascript that you posted earlier? That certainly wasn't php.

 

i am a relitive newbe...

 

That's the truth, which is why I was telling you that you are not in the right place to solve your problem. There is a section of this site dedicated to javascript (and another one that is CSS, which I would recommend over the javascript issue, seeing as you should be doing this with CSS not javascript)

[PHP Monkeh]

I didn't look at your var element properly, I didn't see you'd added .style to the end already!

 

function javaHoverOver(opt)
{	
var element = document.getElementById(opt).style;
element.backgroundColor = '#bfe2f9';
element.border-right='thick solid #0000FF';
}
function javaHoverOut(opt)
{
var element = document.getElementById(opt).style;
element.backgroundColor = '#d4ecfb';
element.border-right='0px';
}

 

The CSS for a right hand border is border-right, not borderRight, so that's probably all you needed to change - see above.

 

haku: a moderator will move the post to the Javascript forum when they see it.

[nezbo]

Cheers PHP Monkeh  , i have tryed this and if i put the '-' in i get a error saying object required. it is confusing me  ???.

 

i appreciate all your help, the comment form the other guy just anoyed me.

 

 

 

I didn't look at your var element properly, I didn't see you'd added .style to the end already!

 

function javaHoverOver(opt)
{	
var element = document.getElementById(opt).style;
element.backgroundColor = '#bfe2f9';
element.border-right='thick solid #0000FF';
}
function javaHoverOut(opt)
{
var element = document.getElementById(opt).style;
element.backgroundColor = '#d4ecfb';
element.border-right='0px';
}

 

The CSS for a right hand border is border-right, not borderRight, so that's probably all you needed to change - see above.

 

haku: a moderator will move the post to the Javascript forum when they see it.

[PHP Monkeh]

Ok try going back to what I had before but removing the .style from your element declaration.

 

function javaHoverOver(opt)
{	
var element = document.getElementById(opt);
element.backgroundColor = '#bfe2f9';
element.style.border-right='thick solid #0000FF';
}
function javaHoverOut(opt)
{
var element = document.getElementById(opt);
element.backgroundColor = '#d4ecfb';
element.style.border-right='0px';
}

 

If this doesn't work it's probably because you're trying to do it within the TR, try moving it to the TD.  Plus you can also do this via CSS rather than JavaScript by using :hover

 

As in, your TD class is small, so you could put in your stylesheet:

 

td.small:hover {
background-color: #bfe2f9;
border-right: thick sold #0000FF;
}

[nezbo]

Cool, i have moved it to the <td> and it used the following function and it is now working fine

 

function javaHoverOver(opt)
{	
var element = document.getElementById(opt).style;
element.backgroundColor = '#bfe2f9';
element.borderLeft='thick solid #0000FF';
}
function javaHoverOut(opt)
{
var element = document.getElementById(opt).style;
element.backgroundColor = '#d4ecfb';
element.borderLeft='0px';
}

 

Cheers for all your help.

 

Neil

 

Ok try going back to what I had before but removing the .style from your element declaration.

 

function javaHoverOver(opt)
{	
var element = document.getElementById(opt);
element.backgroundColor = '#bfe2f9';
element.style.border-right='thick solid #0000FF';
}
function javaHoverOut(opt)
{
var element = document.getElementById(opt);
element.backgroundColor = '#d4ecfb';
element.style.border-right='0px';
}

 

If this doesn't work it's probably because you're trying to do it within the TR, try moving it to the TD.  Plus you can also do this via CSS rather than JavaScript by using :hover

 

As in, your TD class is small, so you could put in your stylesheet:

 

td.small:hover {
background-color: #bfe2f9;
border-right: thick sold #0000FF;
}

[haku]

i appreciate all your help, the comment form the other guy just anoyed me.

 

Good. Its annoying when someone is too stupid to realize they are posting in a completely irrelevant forum, and its annoying to see people using javascript when they should be using CSS.