www.webdeveloper.com
Results 1 to 2 of 2

Thread: Swap URL on image swap

  1. #1
    Join Date
    Jun 2008
    Posts
    8

    Question Swap URL on image swap

    Hi. I am a complete novice with Javascript, but am trying to work out how I can get a button to swap to another image when clicked, and each image have a different URL attached.

    I want to use this to toggle the bgcolor of my page using this script:

    Code:
    <script type="text/javascript">
    <!--
    
    function createCookie(name,value,days) {
    	if (days) {
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++) {
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    
    function eraseCookie(name) {
    	createCookie(name,"",-1);
    }
    
    var backColor = new Array();
    
    backColor[0] = '#DDDDDD';
    backColor[1] = '#444444';
    
    
    function changeBG(whichColor){
     document.body.style.backgroundColor = backColor[whichColor];
     createCookie('backColor', whichColor);
    }
    
    if(readCookie('backColor'))
     document.write('<style type="text/css">body {background-color: ' + backColor[readCookie("backColor")] + ';}<\/style>');
    
    -->
    </script>
    
      <p align="center"><a href="javascript:changeBG(0)">pink</a></p>
      <p align="center"><a href="javascript:changeBG(1)">blue</a></p>
    So for instance I need the first image to have a URL of javascript:changeBG(0), then the second have the URL of javascript:changeBG(1)

    Can anyone show me how to do this please.

    Thank you.

  2. #2
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    first of all, a url is an address. the href="javascript:" you're using is just a complicated way to create an onclick event.

    from what i get, you want to have an image and a button visible on your page. when you click the button, the image changes, and the onclick even of the image changes as well.
    how about this: http://jsfiddle.net/moritana/aVBHd/;
    HTML Code:
    <button>clickme</button><img src="http://blog.3bulls.net/wp-content/uploads/2007/07/Sidebox-Kitten-Thinks-R.jpg" onclick="alert('i am kitten')" />
    Code:
    button = document.getElementsByTagName('button').item(0);
    img = document.getElementsByTagName('img').item(0);
    button.onclick = puppy;
    function kitty()
    {
        img.src = 'http://blog.3bulls.net/wp-content/uploads/2007/07/Sidebox-Kitten-Thinks-R.jpg';
        img.onclick = function () {alert('i am kitty');};
        button.onclick = puppy;
    }
    function puppy()
    {
        img.src = 'http://www.urbandogtraining.com.au/user/Image/Cavalier&#37;20King%20Charles%20Spaniel%20Puppy.jpg';
        img.onclick = function () {alert('i am puppy');};
        button.onclick = kitty;
    }
    there's a button and a picture of a cat. clicking on the cat will display a cat alert (As dummy code for this example).
    clicking on the button for the first time will call function puppy() that changes the src of the kitten image to that of a puppy, and the code of the img onclick event, so when you click on the pic, it displays a dog alert.
    clicking on the button again launches the kitty function that turns everything back to cat again.
    my blog.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles