Solved

Changing onclick

Posted on 2004-10-15
17
517 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

828 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