Solved

Changing onclick

Posted on 2004-10-15
17
513 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

758 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

21 Experts available now in Live!

Get 1:1 Help Now