stop/play form button vervangen voor images

Status
Niet open voor verdere reacties.
C

crz_06

Gebruiker
Lid geworden
21 jul 2005
Berichten
60
probeer een play/stop button text te vervangen door 2 images, (wil de formbutton die nu enerzijds de tekst 'start' of 'stop' weergeeft dus vervangen door enerzijds een images met 'stop' of 'play' ) en probeer dit door dit te vervangen

Code: 
               <DIV align="center">
                                    <INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="Start" title="AutoPlay">
                            </DIV>
door

Code: 
             <DIV align="left">
                        <img src="slideshow_play.gif" onClick="Oneap(this.value);" title="AutoPlay" width="16" height="8">
                        </DIV>

alleen wat moet ik nu nog meer aanpassen in deze code om ook mijn "slideshow_stop.gif" te laten verschijnen?

Code: 
function Oneap(text) {
document.Oneslideform.Oneslidebutton.value = (text == "Stop") ? "Start" : "Stop";

thx

(PS: voor de gehele code van het voorbeeld wat ik gebruik zie > http://www.js-examples.com/javascript/?id=721)

PPS: hoe kan ik trouwens snel comments (tekst omschrijving per plaatje) toevoegen?. Geprobeerd dit uit andere scripts te plakken maar dat zorgt er alleen maar voor dat mijn slideshow niet meer werkt. (Ik gebruik juist deze slideshow omdat het de mogelijkheid biedt meerdere slideshows in één html te plaatsen)
 
Zou het mogelijk zijn de volledige code die je tot nu toe hebt in een bijlage hier te zetten?
Zonder volledig beeld is het moeilijk te doen omdat er enkele dingen moeten bijkomen, weggelaten worden en gewoon veranderen.

Greetz : Jeroen.
 
Laatst bewerkt:
Hellow,

Het is wel mogelijk.. als ik goed begrijp wat je wilt iig.. :D

In de head van de pagina maak je een soort preload van beide plaatjes:

PHP: 
if (document.images) {
	start = new Image();
	start.src = "start.gif";

	stop = new Image();
	stop.src = "stop.gif";
}

In de onclick roep je een functie aan waarin je de source van de image gaat veranderen, de image moet wel een naam hebben zodat deze gewijzigd kan worden,

PHP: 
function changeImage() {
	if (document.images) {
		if (document["button"].src == start.src) {
			document["button"].src = eval("stop.src");
		} else {
			document["button"].src = eval("start.src");
		}
	}
}

En de afbeelding ziet er dan zo uit:

PHP: 
<img src="stop.gif" name="button" onclick="changeImage();">

Natuurlijk kan deze ook met start beginnen.. ;)
 
heb besloten gebruik te maken van een ander javascriptje, omdat ik met degene die ik nu gebruikte lastige meerdere slideshows in een pagina kon stoppen. Ik gebruik nu deze, echter nu eigenlijk een soortgelijke vraag.

Hoe vervang ik nu de 2 afzonderlijke stop/start buttons door één button die enerzijds start danwel stop plaatje weergeeft?. Is het trouwens mogelijk om een 'vorige' en 'volgende' button toe te voegen, en zo ja wat moet ik dan toevoegen.

Bedank.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head><title>Image change met start en stop button.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#container {
width:170px;
height:200px;
border:2px solid;
}

</style>

<script type="text/javascript">

var teller=1
var tussentijd = 1000

var plaatje=new Array()

plaatje[1] = new Image();plaatje[1].src ="teken/orc.gif"
plaatje[2] = new Image();plaatje[2].src ="teken/nightelf.gif"
plaatje[3] = new Image();plaatje[3].src ="teken/human.gif"
plaatje[4] = new Image();plaatje[4].src ="teken/undead.gif"

var tekst=new Array()

tekst[1] = 'Tekst 1'
tekst[2] = 'Tekst 2'
tekst[3] = 'Tekst 3'
tekst[4] = 'Tekst 4'

function Auto(){
++teller;if(teller==plaatje.length){teller=1}
document.getElementById('venster').src=plaatje[teller].src
document.getElementById('venster2').innerHTML = tekst[teller]
TimerID = setTimeout("Auto()",tussentijd)}

function halt() {window.clearTimeout(TimerID)}

function verder() {setTimeout("Auto()",tussentijd)}

</script></head>

<body><center><br><br>

<div id="container">
<img src="teken/orc.gif" id="venster" alt=""><br>
<span id="venster2">Tekst 1</span>
</div>

<br>
<img src="stop.gif" onClick="halt();" title="Stop" width="16" height="8">
<img src="start.gif" onClick="verder();" title="Start" width="16" height="8">


</center></body></html>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan