www.webdeveloper.com
Results 1 to 2 of 2

Thread: Changing Images Coding

  1. #1
    Join Date
    Oct 2011
    Location
    Durban
    Posts
    12

    Changing Images Coding

    I am wanting to change images with javascript, I have done this previously in a working page where my image tags were in tables and no div used, so I could simply refer to the images as in the code below:


    Now however I have no tables and make use of div's and tried referring to the image as below:

    Code:
    // Function created to Change Advertising Banners
    function changeBanner() {
    	if (curBanner == "_ad2") {
    		document.getElementById('slide')= "site_graphics/_ad3.jpg";
    		curBanner = "_ad3";
    	}
    	else if (curBanner == "_ad3") {
    		document.getElementById('slide')= "site_graphics/_ad4.jpg";
    		curBanner = "_ad4";
    	}
    	else if (curBanner == "_ad4") {
    		document.getElementById('slide')= "site_graphics/_ad5.jpg";
    		curBanner = "_ad5";
    	}
    	else if (curBanner == "_ad5") {
    		document.getElementById('slide')= "site_graphics/_ad6.jpg";
    		curBanner = "_ad6";
    	}
    	else if (curBanner == "_ad6") {
    		document.getElementById('slide')= "site_graphics/_ad7.jpg";
    		curBanner = "_ad7";
    	}
    	else if (curBanner == "_ad7") {
    		document.getElementById('slide')= "site_graphics/_ad1.jpg";
    		curBanner = "_ad1";
    	}
    	else {
    		document.getElementById('slide')= "site_graphics/_ad2.jpg";
    		curBanner = "_ad2";
    	}
    }
    Code:
    <div id="wrapper">
    
    	<!--header-->
    	<div id="header">
    		<img src="site_graphics/_ad1.jpg" id="slide" width="180" height="125" border="0" alt="Advertising Banners" />
    		<h1><a href="#">SeatStick</a></h1>
     	</div>
    </div>
    and:
    Code:
    // Function created to Change Advertising Banners
    function changeBanner() {
    	if (curBanner == "_ad2") {
    		document.getElementById('header').images[0].src = "site_graphics/_ad3.jpg";
    		curBanner = "_ad3";
    	}
    	else if (curBanner == "_ad3") {
    		document.getElementById('header').images[0].src = "site_graphics/_ad4.jpg";
    		curBanner = "_ad4";
    	}
    	else if (curBanner == "_ad4") {
    		document.getElementById('header').images[0].src = "site_graphics/_ad5.jpg";
    		curBanner = "_ad5";
    	}
    	else if (curBanner == "_ad5") {
    		document.getElementById('header').images[0].src = "site_graphics/_ad6.jpg";
    		curBanner = "_ad6";
    	}
    	else if (curBanner == "_ad6") {
    		document.getElementById('header').images[0].src = "site_graphics/_ad7.jpg";
    		curBanner = "_ad7";
    	}
    	else if (curBanner == "_ad7") {
    		document.getElementById('header').images[0].src = "site_graphics/_ad1.jpg";
    		curBanner = "_ad1";
    	}
    	else {
    		document.getElementById('header').images[0].src = "site_graphics/_ad2.jpg";
    		curBanner = "_ad2";
    	}
    }
    but no joy can someone please help. I know it is a stupid mistake.
    I have also just used the .images[4].src as it is the 5th image tag in the html from the top but still nothing.

  2. #2
    Join Date
    Oct 2011
    Location
    Durban
    Posts
    12

    resolved

    Got it and was stupid mistake. forget the .src at end

    Code:
    document.getElementById('slide').src =

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