Picture changes on a web-page.

**Hambone** · Nov 27th, 2000, 12:41 AM

I've been playing with VB for a couple of months now and wanted to start learning some VB Script for web-pages...

I was curious to see if I could make a picture box (something... frame?) on a page with a couple of buttons that would change the picture.

... Say I have 10 pictures that I want to be rotated through without re-loading the page...

Also, where would good guides/examples of VB Script for web work be?

Thanks for any help..... sorry for the stupid questions.

**Mark Sreeves** · Nov 27th, 2000, 06:43 AM

For client-side code I recommend using Javascript rather than VB script sbecause it is compatable with more browsers.

Code:

<HTML>
<HEAD>
<script Language="JavaScript">

var currentImage = 1;
    img1 = new Image();img1.src = "rocket13.gif";
    img2 = new Image();img2.src = "rocket15.gif";
    img3 = new Image();img3.src = "rocket1.gif";
    img4 = new Image();img4.src = "rocket11.gif";
    img5 = new Image();img5.src = "rocket3.gif";
    img6 = new Image();img6.src = "rocket9.gif";
    img7 = new Image();img7.src = "rocket7.gif";
    img8 = new Image();img8.src = "rocket5.gif";

function nextImage()
{
document.frm1.imgMain.src = eval("img" + currentImage + ".src");

currentImage ++;
if(currentImage == 9)
{
	currentImage = 1
}
}


</script>
</head>
<body>

<FORM name="frm1">
<img name=imgMain src="rocket3.gif">


<INPUT TYPE="button" NAME="but1" VALUE="Change" onclick="nextImage();">


</BODY>

</HTML>

**Mark Sreeves** · Nov 29th, 2000, 03:31 AM

firstly, I don't ythink you need to bother buying a book.
I've never needed to (some might say that it shows!

)
http://www.irt.org will answer 96.7% of your javascript problems
any other queries ypou have just post them here (or the javascript forum ) and we'll do our best!

secondly, your caption problem:

you could just have an array to hold the captions:

Code:

<HTML>
<HEAD>
<script Language="JavaScript">

var currentImage = 1;

    img1 = new Image();img1.src = "rocket13.gif";
    img2 = new Image();img2.src = "rocket15.gif";
    img3 = new Image();img3.src = "rocket1.gif";
    img4 = new Image();img4.src = "rocket11.gif";
    img5 = new Image();img5.src = "rocket3.gif";
    img6 = new Image();img6.src = "rocket9.gif";
    img7 = new Image();img7.src = "rocket7.gif";
    img8 = new Image();img8.src = "rocket5.gif";

var caption=new Array("caption for image 1","caption for image 1","caption for image 2","caption for image 3","caption for image 4","caption for image 5","caption for image 6","caption for image 7","caption for image 8")
function nextImage()
{
	document.frm1.imgMain.src = eval("img" + currentImage + ".src");
	document.frm1.txt1.value=caption[currentImage];
	currentImage ++;
	if(currentImage == 9)
	{
		currentImage = 1
	}
}


</script>
</head>
<body onLoad="nextImage()">

<FORM name="frm1">
<img name=imgMain>
<BR>
		<input name=txt1>
		<BR><BR>

<INPUT TYPE="button" NAME="but1" VALUE="Change" onclick="nextImage();">


</BODY>

</HTML>

**Hambone** · Nov 29th, 2000, 09:08 PM

Cool...... thanks a lot.

Thread: Picture changes on a web-page.

Thread Tools

Display

Posting Permissions