SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need help with onclick event

    I'm just learning javascript. I need to create an onclick event for a three-state rollover. I just can't figure out where to place the event. I know it needs to go in my setup rollover function, but can't figure out where to place it so an alert pops up when one of the buttons is clicked. Anyone have any guidance for me? Thanks!

    HTML code is (JS is below and button 1 images attached):

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Three-state Rollovers</title>
    	<script type="text/javascript" src="script03.js"></script>
    </head>
    <body bgcolor="#FFFFFF">
    	<a href="next1.html"><img src="http://www.sitepoint.com/forums/images/button1_off.gif" width="113" height="33" border="0" alt="button1" id="button1" /></a>&nbsp;&nbsp;
    	<a href="next2.html"><img src="http://www.sitepoint.com/forums/images/button2_off.gif" width="113" height="33" border="0" alt="button2" id="button2" /></a>
    </body>
    </html>

    JS code is:

    Code JavaScript:
    window.onload = rolloverInit;
     
    function rolloverInit() {
    	for (var i=0; i<document.images.length; i++) {
    		if (document.images[i].parentNode.tagName == "A") {
    			setupRollover(document.images[i]);
     
    		}
    	}
    }
     
    function setupRollover(thisImage) {
    	thisImage.outImage = new Image();
    	thisImage.outImage.src = thisImage.src;
    	thisImage.onmouseout = function() {
    		this.src = this.outImage.src;
    	}
    	thisImage.clickImage = new Image();
    	thisImage.clickImage.src = "http://www.sitepoint.com/forums/images/" + thisImage.id + "_click.gif";
    	thisImage.onclick =			onclick=alert("You have now clicked");
    	function() {
    		this.src = this.clickImage.src;
    	}
     
    	thisImage.overImage = new Image();
    	thisImage.overImage.src = "http://www.sitepoint.com/forums/images/" + thisImage.id + "_on.gif";
    	thisImage.onmouseover = function() {
    		this.src = this.overImage.src;
     
    	}
     
    }
    Attached Images Attached Images
    Last edited by Mittineague; May 10, 2011 at 22:46. Reason: reformatting bbcode tags

  2. #2
    SitePoint Evangelist speda1's Avatar
    Join Date
    Jan 2002
    Posts
    550
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The onclick event usually would go on the <a> tags. Another approach would be on the <img>. Both work.


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
  •