JavaScript - Onclick Events?

HTML TARGET:

Code:

<div id="login_link" style="margin-top:-142px;margin-left:245px;height:142px;">
		<img id="login_link" src="menu_button.png" /><a href="#"><img src="menu_button.png" /></a></div>
</div>

I'm trying to get menu_button.png to change to menu_button2.png on mouseover... I'd also like it to play a sound on click like "click.wav" I can't rename the div because it controls the slider

Heres my current project table:

http://bit.ly/dbwH23

I tried to put it in a span and have the span referance to the next tag but it didn't seem to work at least not in firefox. I'm going to keep lookin around but i'm not used to these types of code structure.

I was thinking of Embeding a flash file inside the div instead but that might be overkill. Anyone know of a solution that might work?

I am a Javascript newbie. I'm trying to code a page that has thumbnails of smaller images that when each image is clicked a larger image will load above the thumbnails, plus text within a div will change, plus more Javascript behind a shopping cart button will change. I'm not sure if this is even possible and have been searching and experimenting with the code without success.

To view the webpage I'm working on: http://toymakerpress.com/website/Fre.../TestPage.html

If you click on the dog image you can see where I'm headed (I also haven't had any luck loading the shopping cart button with it's unique Javascript code).

Here is my code so far:
The shopping cart button (I would like this code to swap out everytime I load a new image):
Code:

<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&amp;i=A0085&amp;cl=82487&amp;ejc=2" rel="nofollow" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img src="../images/addtocart1.gif" border="0" alt="Add to Cart"/></a>

The code I'm working on for each thumbnail image:
Code:

<td><div align="center">
                  <a href="javascript:changeImage('../images/FreePlans/littledog-4Lg.jpg') "javascript:="javascript:"" onClick="load_content('orderform','more content') "><img src="../images/FreePlans/littledog-4.jpg" width="140" height="140" border="0" /></a></div></td>

Thanks!

I'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be...

Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment.

What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another.

My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself.

Let's set up a simple class called "App" to demonstrate what I mean...

Code:

var myApp = new App("MyFirstApp");

function App(argName) {
    this.name = argName;
    this.GetDirectory("C:\Program Files");
}

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}

App.prototype.GetDirectoryCallback = function(argFilePaths) {
    // "this" equals the "window" object (bad!), meaning this.name should equal a null reference
    // argFilePaths contains a string of file paths (delimited using ;) returned by the server
    var mFilePaths = split(argFilePaths, ";");
    // for each file path, add a div to the document body containing that file path, with an onclick handler
    for (var i in mFilePaths) {
        var mFilePath = mFilePaths[i];
        var mFilePathDiv = document.createElement("div");
        mFilePathDiv.innerHTML = mFilePath;
        mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
        document.getElementById("body").appendChild(mFilePathDiv);
    }
}

App.prototype.FilePathDivClickHandler = function() {
    // I need a reference to the App object instance here, but I'm not sure where to grab it...
    // what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
    this.GetDirectory(event.target.innerHTML);
}

The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory).

Code:

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    // "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
    var instance = this;
    Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
    function GetDirectoryCallback(argFilePaths) {
        // "this" equals the window object (bad!), meaning this.name should equal a null reference
        // "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
        // argFilePaths contains a string of file paths (delimited using ;) returned by the server
        var mFilePaths = split(argFilePaths, ";");
        // for each file path, add a div to the document body containing that file path, with an onclick handler
        for (var i in mFilePaths) {
            var mFilePath = mFilePaths[i];
            var mFilePathDiv = document.createElement("div");
            mFilePathDiv.innerHTML = mFilePath;
            mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
            document.getElementById("body").appendChild(mFilePathDiv);
        }
    }
}

Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object.

Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler?

I am using a freebie script that changes css elements using onClick when you hit a button.

I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list.

2 button examples (and js code) is:
<input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" />
<input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" />


How do I convert this to a SELECT list??

Thank you!

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

This is what I have:
http://page-test.co.uk/js-test.html

..and it works exactly how I want it to, but I need it to work by doing these two things:

(a) If you see in the change_button function, I have hard coded the 'name_can_vary' name element. I need to do it so this isn't hard coded (so it can work on any page/form).

(b) I don't want to change any of the HTML, and I only want to change the code used in the change_button function (otherwise I will need to change many pages).

Thanks in advance.

i have a link that references: <a href="My_Video.asx">video</a>. when you click, video will open in the "windows media player" and the parent window goes blank.

how can i prevent the parent window from going blank?

thank you for help
julio

i have a checkbox:

Code:

<input type="checkbox" id="my_checkbox" name="option2" value="Check" checked>Check

i want to add an event to it so that i do something to a dom element when it is checked and when it is not checked.What is the event and how can i get its status?

I am having trouble understanding why this does not work?

Code:

<HTML>

<HEAD>

<TITLE>Event Loops</TITLE>

<SCRIPT TYPE="text/javascript">

function seturl(a,b,c,d,e)
{
	this[0] = a;
	this[1] = b;
	this[2] = c;
	this[3] = d;
	this[4] = e;
}

function selectPage(list) {
	var page = Math.floor(Math.random()*4);
	winow.open(list[page],"Random_Page");
}

choices = seturl("http://www.google.com,
		 "http://www.yahoo.com,
		 "http://www.youtube.com,
		 "http://www.bing.com,
		 "http://www.xbox.com");



</SCRIPT>

</HEAD>

<BODY onLoad="selectPage(choices);">

<H1>Please Wait...</H1>


</BODY>

</HTML>

Hi guys,

I'm a newbie so bear with me please.

I downloaded this calendar which is now working great:

JavaScript Calendar - Digital Christian Design (http://www.javascriptkit.com).

Does anyone know how to change the date format from mm/dd/yyyy to dd/mm/yyyy?

Also, is it possible to have links on such a calendar? I.e. in the event descriptions?

Thanks.

hello,

Im trying to write a program when the user clicks on the button,
the textbox should display "how are you ".
This is what I tried :



<html>
<head>
<title>"Click"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p>
<input name="text1" type="text" id="text1" value="textbox 1" onFocus="this.style.background ='yellow'" onBlur="this.style.background='white'">
</p>
<p>
<input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'">
</p>


<p>

<button onclick="textbox1.value="how are you">Click Me!</button>

</p>



</body>

</html>

I sometimes see that some people use this expression:
event = event || window.event
Why people need to do this? What does it mean?

Hi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript???
pls help...

i have placed a text box with onclick and onblur event. onclick shows contents(links) of a div tag below it and onblur hides the div
basically it was a jquery based drop down menu but due to some problem I need to avoid jquery. Now the problem happens when a link of div tag is clicked. The link does not work due to onblur event on the textbox. Any suggestion?

Quote:
<input type="text" style="text-transform: capitalize;" value="" class="abd_txtfld" name="loc" id="loc" onclick="gettabcontentSearch('','')" onblur="hide()"/>
<div id="cityddsearch" class="select_citydd" style="position: absolute; margin-top: 2px; left: 5px; display: none;">
<ul>
<li><a href='../link1.asp'>link1</a></li>
<li><a href='../link2.asp'>link2</a></li>
<li><a href='../link3.asp'>link3</a></li>
</ul>
</div>

I was testing a required entry form, and i'm stuck.
Code:

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
	{
	alert(alerttxt);return false;
	}
  else
	{
	return true;
	}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Username must be filled out!")==false)
  {username.focus();return false;}
  }
}
</script>
</head>

<body>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post">
Username: <input type="text" name="username" size="20">
<input type="submit" value="Submit">
</form>
</body>

</html>

i have this so far.
i want to add a password part.
i know i would take
Code:

Password: <input type="text" name="password" size="20">

and put it underneath the username part in the codes., but i don't know to do the rest, with the error message poping up.