no javascript, help wanted

Hi,
I have been looking around the internet for a javascript that changes an image from another element, but I do not know any javascript.


So far I have gethered these strings, but the array runs out and there's no image.

 
imgs=Array("1.png","2.png");
var x=0;
function change() {
document.getElementById("button1").src=imgs[++x];
if (x==1) {
x=0;
}
if (x==0) {
x=1;
}
}

Code (markup):

Basically I wish to have a onMouseOver, show 2.png
and onMouseOut, show 1.png from some element, to affect some other element element id button1
IF I do need to specify...it will be used with html(remember idk javascript)

Also, it would be great if onMouseDown, show 3.png

Does anyone here know how to do this?

 

You can do that automatically using Dreamweaver.
After setting the images, view the source code and you will get the answer

 

Hi,

First of all you need to check whether the index you are using has a value greater than the array's length:

if (x == imgs.length) x = 0;

Code (markup):

so it cycles over and over.

If I have understood correctly you wish to change images as a response to an event (mouseOver, mouseDown, mouseOut). What you need to do is change the src attribute of the IMG tag you have in your page.

For instance:

function change()
{
   x++;
   if (x == imgs.length) x = 0;
   myImg.src = imgs[x];
}

Code (markup):

The IMG tag should be something like this

<IMG name = "myImg" src = "1.png">

Code (markup):

You call the function using the necessary event, e.g.

<button name = "button1" value = "Change Image" onClick = "change();">

Code (markup):

Hope you find that helpful a bit.

 

Thanks, that works great for a hovering effect. (for onMouseOver and onMouseOut)
But what about for clicks?

I tried adding the change() function to onClick, and also tried onMouseDown, but does not change anything. Wouldn't a different function be ideal? Also, is there a way to get the image to stay after the click?

For example, after clicking the image, 3.png would show instead of altering between 1.png and 2.png. However, it would not have the hover effect anymore, after being clicked on.

 

The function works the same way regardless of the event that triggers it. You could use it for any event.

However, one event might "negate" another. For instance, if you use the onClick event to change an image and also have a script for the mouseOut event that also changes an image, then after clicking, the image will change once and after moving the pointer out of the image, it will change again.

You could write a different function for the other event and write code that alternates only between the first two images (index can only be 0 or 1).

Check this out: http://www.w3schools.com/js/js_events.asp

 

hmm, I've tired so many things I just don't know where to go from now without actually learning javascript

This is the last thing I tried but no luck:

<script type="text/javascript">
imgs=Array("play1.png","play2.png");
var x=0;

function hover()
{
   x++;
   if (x == imgs.length) x = 0;
   imp.src = imgs[x];
}

img=Array("removed.png");
var y=0;
function click()
{
   if (y == img.length) y = 0;
   imp.src = img[y];
}

</script>

<img id="imp" src="play1.png">
<img onmouseover="hover()" onmouseout="hover()" onmousedown="click()" name="button" src="button.png">

Code (markup):

The hover function works great, but when I click the button, nothing happens. I hate to ask this but could you show me a function that is independent of the hover() function, and only changes the image when it is clicked on?

Also, if it does not take too much time and you can do it off the top of your head - could you tell me how to remove the hover() function once the button has been clicked?

 

Hi,
just missing y++.

function click()
{
   y++;
   if (y == img.length) y = 0;
   imp.src = img[y];
}

Code (markup):

Besides, try to use document.getElementById('imp') to address the image and you can use event onclick instead of onmousedown as well.

And to remove hover(), modify a little your code :

<img onmouseover="hover()" onmouseout="hover()" onmousedown="click(this)" name="button" src="button.png">

Code (markup):

and then inside function click(), simply remove the onmouseover/out events:

function click(myButton)
{
   y++;
   if (y == img.length) y = 0;
   document.getElementById('imp').src = img[y];

   myButton.onmouseover = null;
   myButton.onmouseout = null;
}

Code (markup):

Hope it helps

 

ok it works
thanks