Hot to activate a Javascript on every user Click?

I need to call / activate a javascript that will change a banner picture on every user click on the internal links of the page.

Is there a way to this programatically? Or you just have to put an onClick event on every link in the page?

are you just wanting to change one image? is it going to be randomly?

You could do something like:

Code:

---

<script language="javascript">

function changeImage(elem)
{
var img = document.getElementById(elem);
img.src = "images/blah" + 2 + ".jpg";
}

</script>

<img src="images/blah.jpg" id="newImg" onclick="javascript:changeImage(newImg);" />

---

And you could set the 2 in the above code to some randomly generated number, and just name your images the same with a number on the end. Hope this is what you were looking for or that it helps.

Hi Mosambi...

Thanks for the response.
I already the script to randomly change the image.

My problem is how to call the script to run in every click with manually putting
"changeImage()" on every click.

I need to have this script detect every mouse click and then run the changeImage script.

Quote:

---

Originally Posted by cyberjorge

Hi Mosambi...

Thanks for the response.
I already the script to randomly change the image.

My problem is how to call the script to run in every click with manually putting
"changeImage()" on every click.

I need to have this script detect every mouse click and then run the changeImage script.

---

So you don't want to have that in every link? You might possibly try something like:

Code:

---

<span onclick="javascript:changeImage();">
<a href="blah1.php">Link1</a><br />
<a href="blah2.php">Link2</a><br />
<a href="blah3.php">Link3</a><br />
<a href="blah4.php">Link4</a><br />
<a href="blah5.php">Link5</a>
</span>

---

You can loop through all the elements (a, li, p, span and more) you wish to apply an event.

Hope this basic example helps:

Code:

---

<script type="text/javascript">
window.onload=function(){
for(var i=0,a=document.getElementsByTagName('a');i<a.length;i++)
              a[i].onclick=trigger;
}
function trigger()
{
alert('Trigger function is being called');
}
</script>
<a href="#">Link</a> || <a href="#">Link</a> || <a href="#">Link</a> || <a href="#">Link</a> || <a href="#">Link</a>

---

Hope that makes sense.

If nothing helps, show us how your markup is laid so we could help you further.

Mosambi, rangana & tacticious, thanks for the response.

I appreciate it, it really helped.

I need something like an event listener that will trigger the script on every click.

rangana's code seems to work but I haven't tested yet, so far I have the following YAHOO UI Library's Event Listener, that seems to work.

Code:

---

<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function(){
  var bd = document.getElementsByTagName('body')[0];
  YAHOO.util.Event.on(bd,'click',banner);
});
</script>

---

For my banner script, I end up with the following:

Code:

---

if (document.images) {
ads = new Array(4);
ads[0] = "media/banner/image1.jpg";
ads[1] = "media/banner/image2.jpg";
ads[2] = "media/banner/image3.jpg";
ads[3] = "media/banner/image4.jpg";

newplace = new Array(4);
newplace[0] = "javascript:showdiv('contentarea'); ajaxpage('link1.html', 'contentarea'); changeZIndex(10);"
newplace[1] = "javascript:showdiv('contentarea'); ajaxpage('link2.html', 'contentarea'); changeZIndex(10);"
newplace[2] = "javascript:showdiv('contentarea'); ajaxpage('link3.html', 'contentarea'); changeZIndex(10);"
newplace[3] = "javascript:showdiv('contentarea'); ajaxpage('link4.html', 'contentarea'); changeZIndex(10);"

function banner() {
                currentImg=Math.round(Math.random()*3)
                document.bannerad.src = ads[currentImg];
                }       
function gothere() {
                currentLnk = currentImg;
                window.location.href = newplace[currentLnk]; }

---

What you think of this codes guys?
This works so far, the big problem for now is that when a banner image is clicked, it sometimes won't go to the specified link.

The problem must be on the banner script or on the event listener.
Can you help me analyze this further?

The site is in this LINK.
The banner I am referring to is in the left side.

Hmmm, try changing this:

Code:

---

function banner() {
                currentImg=Math.round(Math.random()*3)
                document.bannerad.src = ads[currentImg];
                }

---

in your page_loader.js to this:

Code:

---

function banner() {
                var currentImg=Math.floor(Math.random()*4);
                document.bannerad.src = ads[currentImg];
                }

---

The multiplier should be the total range if I remember right. So 4 would output four numbers, 0 1 2 3. Floor will round the number, that may solve your problem. I'm no JS expert so I could be wrong but it's worth a shot, no?

PS: I like your website layout, well done.

Quote:

---

Originally Posted by tacticious

Hmmm, try changing this:

in your page_loader.js to this:

Code:

---

function banner() {
                var currentImg=Math.floor(Math.random()*4);
                document.bannerad.src = ads[currentImg];
                }

---

The multiplier should be the total range if I remember right. So 4 would output four numbers, 0 1 2 3. Floor will round the number, that may solve your problem. I'm no JS expert so I could be wrong but it's worth a shot, no?

PS: I like your website layout, well done.

---

Thanks tacticious!
I tried your code, but it doesn't work with the link. It won't go to the link anymore.

It seems to affect this code...

Code:

---

function gothere() {
                currentLnk = currentImg;
                window.location.href = newplace[currentLnk]; }

---

I tried putting on the

Code:

---

var currentLnk

---

and

Code:

---

var currentImg

---

but none of this work.

For the

Code:

---

(Math.random()*3)

---

code, it tried putting in "3" instead of "4" because when the image reaches 4 the link gets broken.

Hmmm... anymore inputs?

Anyway, thanks for the compliment on my site design. As you see, I'm more on a designer than a coder :) so I really need all the help I can get.