www.webdeveloper.com
Results 1 to 6 of 6

Thread: input type="button" replace with image?

  1. #1
    Join Date
    Jul 2012
    Posts
    14

    input type="button" replace with image?

    I want to have my own images as buttons so as not to use native UI on a basic html website.

    I thought this would be an easy bit, but it seems more difficult. Can anyone assist?

    The following code is working perfectly, but when I try to change the input type to a button, or insert an <img> it doesnt seem to work. Any suggestions?

    here is my Javascript in the head code:
    Code:
    <script type="text/javascript">
    
    
    var images = new Array(2);
    images[0] = "url('images/slide1.jpg')";
    images[1] = "url('images/slide2.jpg')";
    images[2] = "url('images/slide3.jpg')";
    
    var i = 0;
    
    function slideShowForward(){
            if(i==2){
                i = 0;
                document.getElementById("images").style.backgroundImage = images[i];
            }
            else{
                i++;
                document.getElementById("images").style.backgroundImage = images[i];
            }
    }
    function slideShowBack(){
            if(i==0){
                i=2;
                document.getElementById("images").style.backgroundImage = images[i];
            }
            else{
                i--;
                document.getElementById("images").style.backgroundImage = images[i];
            }
    }
    
    </script>

    HTML

    Code:
    <div id="images">
    
    <div id="form">
    <form name="buttons" action="">
    
        <input type="image" name="previous" src="images/prev.png" onClick="slideShowBack()" width="39" height="34"/>
        <input type="image" name="next" src="images/next.png" onClick="slideShowForward()" width="39" height="34"/>
        
        
    </form>
    </div> <!--form-->
    
    </div><!--images-->
    any help is always appreciated. Thanks so much!

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    http://jsfiddle.net/uyLA4/4/

    That fiddle uses an image as a button.

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Not sure if this helps with your problem, but here is a neat method I was shown to rotate images without using an index variable:

    Code:
    var images = [
    	'images/slide1.jpg',
    	'images/slide2.jpg',
    	'images/slide3.jpg'
    ];
    
    function slideShowForward()
    {
    	images.push(images.shift());
    	document.getElementById('images').style.backgroundImage = 'url(' + images[0] + ')';
    }
    
    function slideShowBack()
    {
    	images.unshift(images.pop());
    	document.getElementById('images').style.backgroundImage = 'url(' + images[0] + ')';
    }
    Code:
    <div id="images" style="border: 1px solid black; height: 300px;">
    	<div id="form">
    	    <img src="images/prev.png" onclick="slideShowBack();" style="width: 39px; height: 34px;" />
    	    <img src="images/next.png" onclick="slideShowForward();" style="width: 39px; height: 34px;" />
    	</div><!--form-->
    </div><!--images-->
    This code has been tested.
    Last edited by bionoid; 08-20-2012 at 09:51 AM.

  4. #4
    Join Date
    Jul 2012
    Posts
    14

    SOLVED by Bionoid

    Bionoid,

    That worked perfectly, I thought for some reason I was stuck to using 'input type button'.

    Big thanks!

  5. #5
    Join Date
    Aug 2012
    Location
    Programming
    Posts
    21
    You had
    HTML Code:
    <img
    You should have had:
    HTML Code:
    <img scr="URL" or "images/imagename.jpeg"
    Cap123

  6. #6
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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