Solved

Changing onclick

Posted on 2004-10-15
17
515 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

914 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now