Solved

Changing onclick

Posted on 2004-10-15
17
518 Views
Last Modified: 2006-11-17
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
0
Comment
Question by:vdhant
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 5
17 Comments
 
LVL 30

Assisted Solution

by:third
third earned 250 total points
ID: 12317178
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
 
LVL 2

Author Comment

by:vdhant
ID: 12317255
Thanks, changed it a little for the real place i am useing it, but works great.
ant
0
 
LVL 30

Expert Comment

by:third
ID: 12317261
welcome. ;-)
0
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 2

Author Comment

by:vdhant
ID: 12317276
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12317285
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
 
LVL 2

Author Comment

by:vdhant
ID: 12317301
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12317330
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12317341
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
 
LVL 30

Expert Comment

by:third
ID: 12317348
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
 
LVL 2

Author Comment

by:vdhant
ID: 12317372
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
 
LVL 2

Author Comment

by:vdhant
ID: 12317388
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
 
LVL 30

Expert Comment

by:third
ID: 12317417
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
 
LVL 30

Expert Comment

by:third
ID: 12317423
you can learn more about this property here,

http://www.devguru.com/Technologies/ecmascript/quickref/image.html
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 250 total points
ID: 12317436
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
 
LVL 2

Author Comment

by:vdhant
ID: 12317463
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12317913
@vdhant: you are welcome.
Thanks Annie for housekeeping.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question