Hi
I'm not good on javascript and
I'm trying to make a search engine like yahoo (I'm talking about design). in yahoo if we click on images or ..... the bgcolor and border color will change. I try to do that on php, but when they click on images link the IE will read the whole page and after that it will change but in yahoo only the search table will change and IE will read only that part not a whole page.(I mean on yahoo when you click on images you not gonna see the loader on bottom)
So i wondering maybe you guys can help me to create it.

Thanks
Regards
Mani_he

Hi there,

They do this by dynamically changing the class name of the object you click on.

If you look at the source for, say, the Search Images button, you'll see this: When the button gets the focus (e.g. by clicking it or tabbing to it) onfocus fires and calls the function t. This function then dynamically changes the className for the object.

Check out this code snippet for a very basic idea on how to implement this yourself:

http://Imar.Spaanjaars.Com/QuickDocId.aspx?QUICKDOC=299

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Tiny tears by Tindersticks (From the album: Donkeys 92-97) What's This?

Hi
Thanks for your reply.
you code is really use full.
and i also find out if i put return false on href="" the link will never gose anywhere, but still i have some problem:
here is the code that i made:

function on('id')
{
var action = document.getElementById('id');
if(action == e1)
document.bgColor = 'RED';
}

<a id=e1 href="../index.php" onClick="on('e1'}; return false">1</a>

but the problem is when they click on that link, the body bgColor will change instead of table bgColor.
the things that i really do not understand is how can i chnage the style on that function about and put it on other table. for example:
if they click on the link above i want the class of this table change

<table class=""></table>

if i can change the class on on() and put it on the table above, i can be able to change the table color.
and also i will work on the code that you gave me.

Thanks
Regards
Mani_he

You're mixing things up. First of all, you're passing a string in the on method, not a parameter: should be: Further, try to stay away from reserved words. On and id sound reserved to me: is less likely to cause conflicts.

Next, gets a reference to an object in the page called id. So, after this statement, action contains a reference to an object, not just a simple string. Again, action sounds like a reserved word, so it's probably better to change it.

Next, you *are* setting the background of the document, so I am not surprised the document changes and not the table: With this code you are setting the HTML bgcolor attribute to Red.

I suggest you change it all to something like this: Combined with the following HTML markup, things will work as expected: Cheers,


Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Daydreaming by Massive Attack (Track 7 from the album: Blue Lines) What's This?

Hi
your code is working perfectly, but I have another question:
if we have two input like:

<input type="button" onclick="SetBackground('MyTable1');" value="Click to change Color" />

<input type="button" onclick="SetBackground('MyTable2');" value="Click to change Color" />
so the code will be:

function SetBackground(tableId)
{
  var theTable = document.getElementById(tableId);
  theTable.style.backgroundColor = 'Red';
}

<table width="100%" border="1" id="MyTable">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<input type="button" onclick="SetBackground('MyTable1');" value="Click to change Color" />
<input type="button" onclick="SetBackground('MyTable2');" value="Click to change Color" />

so when the people click on the first button i have to change the <table id="MyTable1"> and for 2nd button to <table id="MyTable2">

so my function will be like this:
function SetBackground(tableId)
{
  var theTable = document.getElementById(tableId);
  if(theTable == MyTable1)
  {
    theTable.style.backgroundColor = 'Red';
    document.write(MyTable1)
  }
  if(theTable == MyTable2)
  {
    theTable.style.backgroundColor = 'Red';
    document.write(MyTable2)
  }
}

<table width="100%" border="1" id="SetBackground()">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<input type="button" onclick="SetBackground('MyTable1');" value="Click to change Color" />
<input type="button" onclick="SetBackground('MyTable2');" value="Click to change Color" />

the output for <table id=""> is correct, that means the document.write will write MyTable1 but the background never chnage and i have no idea why

can you please help me for that.

Thanks
Regards
Mani_he

Hi Imar
Thnaks finaly I found it and it works perfectly.

Thanks
Regards
Mani_he

Great. I hoped you changed the function to this:

function SetBackground(tableId)
{
  var theTable = document.getElementById(tableId);
  theTable.style.backgroundColor = 'Red';
}

Since the parameter tableId that is passed to this function is dynamic (that is, it can contain multiple values, depending on how you call the function) you don't need to check it against known values. Just getting a reference to the object using getElementById and then change its background is more than enough.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Half the Man by Hed Planet Earth (Track 7 from the album: Blackout ) What's This?