can anyone tell me why this code doesn't work?

[Reverend]

Dudes:

All I'm trying to do is put the function behind a button because it looks better. The button appears but doesn't advance the slide.

OLD
<A HREF="javascript:SLIDES.next()">next&gt;</A>

NEW
<a href="javascript:SLIDES.next()"><input type="button" value=" Next >> "></a>

Thanks - rev

[emty]

"Dude", you've shown nothing but sloppy code. Be a bit more specific, and clarify as to what exactly you want to do. The code you're showing, ie., <input type =button> refers to seting up a form on a site. HTML forms have nothing to do with javascript, which by the way in most cases have to be set up in the "head" tags of your html document. What I'm trying to say is "What exactly are you trying to do?"

[Reverend]

Dude:

It's a "Next" button in a slideshow. The OLD example works but looks really hokey because you have to click the word "next>"

I just wanted the exact same function on a button, so I defined a button in place of the text and it fails. Looks like I'm mixing html and javascript?

Better question then: How do I make a javascript button?

rev

[emty]

Well, here's a javascript sample for you to play with. Or you can make some sort of image to replace the "next" button and give it the same function.


This goes onto the "HEAD" tags of your html doc.


<style type="text/css">

#slideshowContainer{
width: 300px;
height: auto;
}

#numberDiv a{
font: bold 14px Arial;
text-decoration: none;
}

#backforthbuttons{
margin-top: 6px;
}

</style>

<script type="text/javascript">

// Index It Image Slideshow script- By JavaScriptKit.com
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

//Specify images for slideshow:
//["Image Path", "Optional Image link"]

var numberslide=new Array()
numberslide[0]=["plane1.gif", "http://www.google.com"]
numberslide[1]=["plane2.gif", ""]
numberslide[2]=["plane3.gif", ""]
numberslide[3]=["plane4.gif", ""]
numberslide[4]=["plane5.gif", ""]

var mylinktarget="" //specify optional link target
var mylinkcolor="navy" //specify default color of number links
var mylinkcolorSelected="red" //specify color of selected links

var imgborderwidth=0 //specify border of image slideshow

/////Stop customizing here////////////////

var preloadit=new Array()
for (i=0;i<numberslide.length;i++){
preloadit[i]=new Image()
preloadit[i].src=numberslide[i][0]
}

var currentindex=""

function changeslides(which){
var imghtml=""
currentindex=(which=="initial")? 0 : parseInt(which)
var mode=(which=="initial")? "initial" : ""
var which=(mode=="initial")? numberslide[0] : numberslide[which]
if (which[1]!="")
imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'
imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'
if (which[1]!="")
imghtml+='</a>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTML=imghtml
changecolors()
}
}

function createnumbers(){
document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')
for (i=1; i< numberslide.length; i++)
document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')
}

function changecolors(){
var numberobj=document.getElementById("numberDiv")
numberlinks=numberobj.getElementsByTagName("A")
for (i=0; i<=currentindex; i++)
numberlinks[i].style.color=mylinkcolorSelected
for (i=currentindex+1; i<numberslide.length; i++)
numberlinks[i].style.color=mylinkcolor
}

function goforward(){
if (currentindex<numberslide.length-1)
changeslides(currentindex+1)
}

function goback(){
if (currentindex!=0)
changeslides(currentindex-1)
}

</script>


THIS GOES INTO THE BODY TAG

<div id="slideshowContainer">

<div id="imagecontainer">
<script type="text/javascript">
changeslides("initial") //This call displays the first image
</script>
</div>

<div id="numberDiv">
<script type="text/javascript">
createnumbers() //This call writes out the numbers
</script>
</div>

<div id="backforthbuttons">
<a href="javascript:goforward()" style="float: right"><img src="blueright.gif" border="0"></a> <a href="javascript:goback()"><img src="blueleft.gif" border="0"></a>
</div>

<p style="font: normal 11px Arial">This free script provided by<br>
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

</div>

[Reverend]

Dude:

I have a whole script.

It's all working fine.

I just want to click a button instead of text, to execute the function.

rev

[ProfessorU]

True buttons in HTML/XHTML are attached to forms
what you want is a "button" that's an image. If you're lazy, you can create it by screencapping the next button you already have created. Then it will look like a standard button to IE users

code would look like this in XHTML:
<a href="javascript:SLIDES.next()"><img src="next.gif" alt="next" /></a>
where next.gif is your image of the next button

[Reverend]

Thanks - that'll do it, that's all I was looking for.

rev

[JPnyc]

You don't need to make it a link at all. Just put your image of a button, inside the tag put onclick="myFunction()"

[Reverend]

JP:

Is there any difference, is one more efficient that the other?

rev

[JPnyc]

I consider onclick more efficient because you're not overwriting a regular HTML event or attribute. But no one could ever tell any difference in performance. The only difference I'm aware of is that SOMETIMES, with the link overwrite method, you'll get an error on the 2nd click, with some setups. For example, if you click it and it's supposed to open a new window with JS, but your blocker blocks it, if you disable the blocker and don't refresh the page, the JS will throw an error.

[ProfessorU]

In theory it might be better for the engine rankings if you don't use <a href= also.

[LethalRevenge]

Check out this web site.
You can find lots of help and free code to use.

http://www.dynamicdrive.com/

:cool: