input type="button" replace with image?

[conor909]

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:

<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

<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!

[donatello]

http://jsfiddle.net/uyLA4/4/

That fiddle uses an image as a button.

[bionoid]

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:

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] + ')';
}

<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.

[conor909]

Bionoid,

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

Big thanks!

[Cap123]

You had

<img

You should have had:

<img scr="URL" or "images/imagename.jpeg"

Cap123

[donatello]

Cool!

http://jsfiddle.net/v7dcY/