Results 1 to 8 of 8

Thread: Hot to activate a Javascript on every user Click?

  1. #1
    Join Date
    Aug 2008
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default 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?

  2. #2
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default

    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.

  3. #3
    Join Date
    Aug 2008
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by cyberjorge View Post
    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>
    Last edited by tacticious; 09-19-2008 at 05:13 PM.

  5. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. #6
    Join Date
    Aug 2008
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by cyberjorge; 09-20-2008 at 05:11 AM.

  7. #7
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Aug 2008
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by tacticious View Post
    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.
    Last edited by cyberjorge; 09-24-2008 at 12:57 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •