JavaScript - Help With Changeimage And Nested Onclick Events Attached To Images

Hi all,

I hope that someone can help me with this strange problem I have here.

I have some script which changes a button and changes the onclick event.

The strange thing is that although it is changing it. All the events have the same parameter even though my code is giving each button's onclick event it's own unique parameter.

Here's my Code.
Code:

	var AllocPeople = window.opener.document.getElementById('AllocPeople');
	
	if(AllocPeople.value.length > 0)
	{
		var people = AllocPeople.value.split(",");
		var Controls = new Array();
		for(var P in people)
		{
			var id = people[P];
			Controls[P] = document.getElementById('bt_AP_'+id);
			Controls[P].innerHTML = "Deallocate";
			Controls[P].onclick = function() {Remove_Player(id)};
		}
		
	}

Thanking you all in advance.

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'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 would like onclick to only work from div id="telli", but instead it works on all the divs.. I've tried a lot of different things, nothing has worked so maybe somebody can help me. I would like the div telli to open up a popup layer onclick. Please help me.. I am a newbie to Javascript

HTML sheet:
<body>

<div id="main">
<div id="header">
<div id="content">
<div id="sidebar">
<div id="telli</div>
<div id="footer">

</div>
</div>
</div>
</div>
</div>


</body>


CSS sheet:
html {
background: url(back.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}

#main {
background-image:url(ground.png);
position:absolute;
margin-left:auto;
margin-right:auto;
width:1300px;
height:1200px;

}

#header {
background-image:url(header.png);
position:absolute;
width:1300px;
height:1200px;
}

#content {
background-image:url(content.png);
position:absolute;
width:1300px;
height:1200px;
}

#telli {
background-image:url(telli.png);
position:absolute;
width:1300px;
height:1200px;
}

#sidebar {
background-image:url(sidebar.png);
position:absolute;
width:1300px;
height:1200px;
}

#footer {
background-image:url(footer.png);
position:absolute;
width:1300px;
height:1200px;
}

Hi,
i want a page with rotation of images, with fading.
I'm trying with two images, but i see only the first image. Firebug console give me this error:
Quote:
$ is not defined: eval ('div =$("#focus_'+categoria+'")');
This is the entire code:
Code:

      <script type="text/javascript">
      array_img_2 = Array();
          array_img_2[0] = 'PhpLib/../upload/2-Galleria/ima_galleria_03.gif';
                  array_img_2[1] = 'PhpLib/../upload/2-Galleria/ima_galleria_02.gif';
              </script>
      <noscript>...</noscript>
                  <div id="focus_2">

              <a href="index.php?cp=4" title="vai alla gallery">
              <img width="924" alt="immagini dei prodotti" src="PhpLib/../upload/2-Galleria/ima_galleria_03.gif" /></a>
            </div>
        <script src="PhpLib/jquery-1.2.6.min.js" type="text/javascript">
</script>
<script type="text/javascript">
categories = Array();
categories[0]='2';
var numvisible_2 = 0;
function changeImage(categoria){
  var d = document;
  var aux = parseInt(eval('numvisible_'+categoria));
  var array_img = eval('d.MM_'+categoria);

 if (array_img.length>1){
  var img_index =(aux+1)%array_img.length;
  var div,img;
  eval ('div =$("#focus_'+categoria+'")');
  eval ('img =$("#focus_'+categoria+' img")');

  var control = "url('"+ array_img[img_index].src+"')";
  $(div).css('background-image', control);
  $(img).animate({opacity:0.01},3000,function(){
    this.src = array_img[img_index].src;
    $(img).animate({opacity:1},1000);
  });

  eval ("numvisible_"+categoria+"=img_index");
 }
}

 function Init_Focus(){
  var j;
  for (j=0; j<categories.length; j++) {
    var categoria = categories[j];
    var array_img = eval('array_img_'+categoria);
    MM_preloadImages(array_img, categoria);
    setInterval("changeImage("+categoria+")",5000);
  }
 }

  function MM_preloadImages(img, categoria) { //v3.0
    var d=document;

    eval("d.MM_"+categoria+"= new Array()");
    var i,j=0;
    var a = img;
    for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){
      eval("d.MM_"+categoria+"[j]=new Image");
      eval("d.MM_"+categoria+"[j++].src=a[i]");
    }
  }


 Init_Focus();

</script>

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!

Hey guys, I'm new to the forums, so if i post anything wrong let me know.

I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img.

here's the script...

<script language="javascript">

function showone(x) {
document.getElementByName('a').style.display='none';
document.getElementByName('b').style.display='none';
document.getElementByName('c').style.display='none';

document.getElementByName(x).style.display='block';
}
</script>


and the code...

<a href="#" onClick="showone('a'); ">show CAT. A</a><br>
<a href="#" onClick="showone('b'); ">show CAT. B</a><br>
<a href="#" onClick="showone('c'); ">show CAT. C</a><br>
<a href="#">show all cats</a><br>

<br>

<img name="a" src="imgs/a1.jpg" /><br>
<img name="b" src="imgs/b1.jpg" /><br>
<img name="a" src="imgs/a2.jpg" /><br>
<img name="a" src="imgs/a3.jpg" /><br>
<img name="b" src="imgs/b2.jpg" /><br>
<img name="c" src="imgs/c1.jpg" />


Here's what it looks like...
http://mattfalcone.com/tests/showhide.html

except the links don't work like they should, and I can't figure out why.

I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work, please let me know and I'de appreciate it.

I have an image gallery with about 10 images. Its a very simple image gallery, basically you have "A" "B" "C" "D" etc, and for each letter you click on, JavaScript changes the relative image from hidden to block.

The problem I have is that all of the 10 images load in the background, despite the user not clicking on the corresponding letter, which wastes a ton of bandwidth.

I have isolated and placed the image gallery code into a HTML file and included 3 pics so you can see it working:
http://www.maxsurl.com/link.php?ref=rk925Lzd48

I don't know much about JavaScript, but I hope this code I just made up gives you can idea of what I am trying to achieve:

Code:

<SCRIPT type="text/javascript">
	function pic1() {
		load.pic('src="pic1.png"')
	}
	function pic2() {
		load.pic('src="pic2.png"')
	}
	function pic3() {
		load.pic('src="pic3.png"')
	}
</SCRIPT>

<SPAN onclick="return pic1()">PIC 1</SPAN>
<SPAN onclick="return pic2()">PIC 2</SPAN>
<SPAN onclick="return pic2()">PIC 3</SPAN>

<IMG id="pic">

Does anyone have a suggestion on how I could achieve what I would like to do? If so, could you please show me a basic example of code so I can make sense of it (I am a visual learner).

FIXED

Hi,

I'm trying to this script:

http://www.lukescoates.com/designs/plusimageviewer.js

to display an enlarged image when a thumbnail is clicked - the page in question is: http://lukescoates.com/designs/portfolio.php. It seems to be working for the most part, however, when I first load the page, sometimes the "View Full Image" buttons don't align with the images, they bulk up together:

http://screencast.com/t/r1cauKx6X

When I reload the page, they align properly. The next problem is that when I first click on the "View Full Image", the popup is not centered on the page:

http://screencast.com/t/4LYou1WfXXJ

If I click it a second time, it centers perfectly.

Any suggestions? The CSS also associated with this is:

http://lukescoates.com/designs/plusimageviewer.css


Really appreciate any help!

Luke

FIXED

I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture.
Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred
where my php code can make use of the variable for the query.
I have never used java before so you have to excuse for the lack of knowledge.
Can anyone gie me an idea how i should implemnt this
Best regards
MSP

I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture.
Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred
where my php code can make use of the variable for the query.
I have never used java before so you have to excuse for the lack of knowledge.
Can anyone gie me an idea how i should implemnt this
Best regards
MSP

Hello,

I'm trying to make a slide show for a website that has simple controls on it.

I've attached this example so you can see what i mean....

http://www.bigw.com.au/bigw/home.jsp

As you can see they use 3 images, and they have controls to go between images easily.

Can someone please help me with this code urgently??

Thanks,
S.

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