Changing onclick

Hi all

I want to make it so that i can i have an onmouse over that runs a javascript which changes the onclick properties of a table cell. In other words:-

<script>
function test(sel) {
   //the below doesn't work but something like this
   if (sel == 1) {
      document.getElementById('place1').top.location.href='(what.asp)';  
   }
   else {
      document.getElementById('place1').top.location.href='(index.asp)';  
   }
}
</script>

<table>
   <tr>
    <td onMouseOver="test(1)">change to what.asp
    </td>
    <td onMouseOver="test(2)">change to index.asp
    </td>
   </tr>
   <tr>
    <td id="place1" onClick="">1
    </td>
   </tr>
</table>

Now as you can see i want to make it so that i can put my mouse over what.asp and the onClick properties changes to "top.location.href='what.asp'" and if you put it over index.asp it will change to "top.location.href='index.asp'".
let me know
ant
LVL 2
vdhantAsked:
Who is Participating?
 
ZvonkoSystems architectCommented:
Like this:

<script>
function setFunc(theFunc) {
   document.getElementById('place1').onclick = new Function(theFunc);
}
function test1(){
  alert('test1 executed!');
}

function test2(){
  alert('test2 executed!');
}

</script>

<table>
   <tr>
    <td onMouseOver="setFunc('test1()')">change to what.asp</td>
    <td onMouseOver="setFunc('test2()')">change to index.asp</td>
   </tr>
   <tr>
    <td id="place1" onClick="">Click Me</td>
   </tr>
</table>


0
 
thirdCommented:
something like,

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var url;
function test(sel) {
   url = ((sel == 1)?'(what.asp)':'(index.asp)');
}
</script>
</head>
<body>
<table>
   <tr>
    <td onMouseOver="test(1)">change to what.asp
    </td>
    <td onMouseOver="test(2)">change to index.asp
    </td>
   </tr>
   <tr>
    <td id="place1" onClick="top.location.href=url">1
    </td>
   </tr>
</table>
</body>
</html>
0
 
vdhantAuthor Commented:
Thanks, changed it a little for the real place i am useing it, but works great.
ant
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
thirdCommented:
welcome. ;-)
0
 
vdhantAuthor Commented:
Just a quick one, if i wanted to do the same thing except not changeing the href scr, how would i change an onMouseOver in the same maner to change the javascript function that was being run.
ant
0
 
ZvonkoSystems architectCommented:
To change the function executed onclick() use this:

<script>
function setTarget(theUrl) {
   document.getElementById('place1').onclick = new Function("top.location.href='"+theUrl+"'");
}
</script>

<table>
   <tr>
    <td onMouseOver="setTarget('what.asp')">change to what.asp</td>
    <td onMouseOver="setTarget('index.asp')">change to index.asp</td>
   </tr>
   <tr>
    <td id="place1" onClick="">Click Me</td>
   </tr>
</table>


0
 
vdhantAuthor Commented:
cool, but i mean change it so that when you put the mouse over what.asp or index.asp if changes the javascript FUNCTION (not linking to another page) that will be run when you put your mouse over place1.
Thanks for your help ant
0
 
ZvonkoSystems architectCommented:
Put anything you like in that new Function() parameter and it will be the new function.
Like this:
document.getElementById('place1').onclick = new Function("alert('I am the new function');document.body.bgColor='yellow';");

0
 
ZvonkoSystems architectCommented:
Only for completeness, new function has also a second syntax:

document.getElementById('place1').onclick = function(){alert('I am the new function');document.body.bgColor='yellow'};

0
 
thirdCommented:
i'm not sure what you mean but here's a demo of what i understand,

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var exec;
function test(){
   if(exec == 1){
     test1();
   }
   else if(exec == 2){
     test2();
   }
   else{
     alert('nothing was selected');
   }
}

function test1(){
  alert('test1 executed!');
}

function test2(){
  alert('test2 executed!');
}
</script>
</head>
<body>
<table>
   <tr>
    <td onMouseOver="exec = 1">change to what.asp
    </td>
    <td onMouseOver="exec = 2">change to index.asp
    </td>
   </tr>
   <tr>
    <td id="place1" onClick="test()">1
    </td>
   </tr>
</table>
</body>
</html>
0
 
vdhantAuthor Commented:
close i dont want to run the test1 and test2 functions when you put your mouse over what.asp and index.asp, i want to make it so that when you put you mouse over what.asp it will change the function that is run in place1 from test() to test1() and when you put your mouse over index.asp it changes the function the will be run in place1 to test2(). Does that make more sence.
ant
0
 
vdhantAuthor Commented:
The reson for this is so that when i run a particular function (that loads pics and slowly puts them on the page), durring the loading process the user can't run a function that runs when the user puts there mouse over the pic. But when the function has finished they will the be able to put there mouse over the pic and run the function.
ant
0
 
thirdCommented:
well, i guess you just need to check whether the pic has already loaded or not.

you have to include on the test function,

function test(){
  if(imagename.complete){
     //then call your method here....

  }
}
0
 
thirdCommented:
you can learn more about this property here,

http://www.devguru.com/Technologies/ecmascript/quickref/image.html
0
 
vdhantAuthor Commented:
Yep that great Zvonko thanks alot.
go here and because it was a second question i will give you some points
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21169524.html
thanks again ant
0
 
ZvonkoSystems architectCommented:
@vdhant: you are welcome.
Thanks Annie for housekeeping.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.