Learn VBA & Macros in 1 Week!

JavaScript - Multiple Image Sliders: Almost There!

Full Excel VBA Course - Beginner to Expert

Multiple Image Sliders: Almost There!	View Content

Good morning all.

I am looking to have multiple image sliders (javascript / jquery) on one page.
I have built the framework and have gotten one slider to work.

However, when adding in another slider, I have only confused the situation.
Below is the html and css. Let me know where I've gone wrong here.

Will I need another set of css classes for each slider?
How do I call a second slider?

Thanks!

The html/javascript

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link media="screen" type="text/css" link rel="stylesheet" href="style.css" />
<link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script>


<title>idigify</title>
</head>

<body>
<div class="main">
<div class="container">
<div class="header">
<ul class="nav">
<ul>
<div class="allbuttons">
	<div class="navabout"><li>about</li></div>
    <div class="navwork"><li>work</li></div>
    <div class="navcontact"><li>contact</li></div>
</div><!--end of all buttons-->
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of header-->
<div class="headeraboutme">the work</div>
<div class="sitemainfeature">
	<div class="aboutme_text">
    	<h2>Just for Fun</h2>
    	<div class="workslider_justforfun">
        	<div class="workslider_justforfun_container">
            	<div class="wt-scroller">
                	<div class="prev-btn"></div>
            			<div class="slides">
                    		<ul>
                    			<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                        		<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                           	 	<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                    		</ul>
                    	</div><!--end of slider-->
                    <div class="next-btn"></div>
                    	<div class="lower-panel">
                   			 <div class="scroll-bar">
                             	<div class="thumb">
                                </div><!--end of thumb-->
                    		 </div><!--end of scroll-bar-->
                    	</div><!--end of lower panel-->
                </div><!--end of wt scroller just for fun-->
        	</div><!--end of just for fun container-->
   	 	</div><!--end of workslider-->
    	<h2>Ads/Advertising</h2>
   		<div class="workslider_justforfun">
			<div class="workslider_justforfun_container">
            	<div class="wt-scroller2">
                	<div class="prev-btn"></div>
            			<div class="slides">
                    		<ul>
                    			<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                        		<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                           	 	<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                    		</ul>
                    	</div><!--end of slider-->
                    <div class="next-btn"></div>
                    	<div class="lower-panel">
                   			 <div class="scroll-bar">
                             	<div class="thumb">
                                </div><!--end of thumb-->
                    		 </div><!--end of scroll-bar-->
                    	</div><!--end of lower panel-->
                </div><!--end of wt scroller just for fun-->
        	</div><!--end of just for fun container-->
    	</div><!--end of workslider-->
        <h2>Logos</h2>
   		<div class="workslider_justforfun">
			<div class="workslider_justforfun_container">
            	<div class="wt-scroller">
                	<div class="prev-btn"></div>
            			<div class="slides">
                    		<ul>
                    			<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                        		<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                           	 	<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                    		</ul>
                    	</div><!--end of slider-->
                    <div class="next-btn"></div>
                    	<div class="lower-panel">
                   			 <div class="scroll-bar">
                             	<div class="thumb">
                                </div><!--end of thumb-->
                    		 </div><!--end of scroll-bar-->
                    	</div><!--end of lower panel-->
                </div><!--end of wt scroller just for fun-->
        	</div><!--end of just for fun container-->
    	</div><!--end of workslider-->
        <h2>Billboards</h2>
    	<div class="workslider_billboard">
    	</div><!--end of workslider-->
    	<h2>Business Cards</h2>
    	<div class="workslider_businesscard">
    	</div><!--end of workslider-->
        <h2>Resumes</h2>
    	<div class="workslider_resume">
    	</div><!--end of workslider-->
        <h2>Sales Pieces</h2>
    	<div class="workslider_salespiece">
    	</div><!--end of workslider-->
    </div><!--end of about me text-->
</div><!--end of site main feature-->
<div class="worksplash"></div><!--end of background splash-->
</div><!--end of container-->
</div><!--end of main-->
<div class="footercontainer">
<ul class="nav">
<ul>
	<div class="navabout"><li>about</li></div>
    <div class="navwork"><li>work</li></div>
    <div class="navcontact"><li>contact</li></div>
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of footer container-->
<script type="text/javascript">
$(document).ready(	
    function() {
    	//initialize scroller
        $(".container").wtScroller({
            num_display:3,
            slide_width:240,
            slide_height:180,
            slide_margin:1,
            button_width:25,
            ctrl_height:15,
            margin:1,    
            auto_scroll:false,
            delay:4000,
            scroll_speed:1000,
            easing:"",
            auto_scale:true,
            move_one:false,
            ctrl_type:"scrollbar",
            display_buttons:true,
            display_caption:true,
            mouseover_caption:false,
            caption_align:"bottom",
            caption_position:"inside",                    
            cont_nav:true,
            shuffle:false
        });
		
        //initialize lightbox for scroller	
        $("a[rel='scroller']").wtLightBox({
            rotate:true,
            delay:4000,
            transition_speed:600,
            display_number:true,
            display_dbuttons:true,
            display_timer:true,
            display_caption:true,
            caption_align:"bottom",
            cont_nav:true,
            auto_fit:true,
            easing:""
        });
    }
);
</script>
</body>
</html>

the css
Code:

.wt-scroller{
position:relative;	
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}

.wt-scroller .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}

.wt-scroller .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}

.wt-scroller .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}

.wt-scroller .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}

.wt-scroller .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;	
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}

.wt-scroller .outside{
background-color:#222;
}

.wt-scroller .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}

.wt-scroller .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;	
cursor:pointer;
}

.wt-scroller .next-btn{
float:right;
position:relative;
width:20px;
height:170px;	
cursor:pointer;
}
.wt-scroller .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}

.wt-scroller .index,
.wt-scroller .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller .index-hl{
background-position:-7px 0;
cursor:default;
}


/*start of scroller2 */
.wt-scroller2{
position:relative;	
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}

.wt-scroller2 .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}

.wt-scroller2 .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}

.wt-scroller2 .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}

.wt-scroller2 .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}

.wt-scroller2 .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;	
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}

.wt-scroller2 .outside{
background-color:#222;
}

.wt-scroller2 .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}

.wt-scroller2 .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;	
cursor:pointer;
}

.wt-scroller2 .next-btn{
float:right;
position:relative;
width:20px;
height:170px;	
cursor:pointer;
}
.wt-scroller2 .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller2 .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller2 .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller2 .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}

.wt-scroller2 .index,
.wt-scroller2 .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller2 .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller2 .index-hl{
background-position:-7px 0;
cursor:default;
}

/*end of scroller2 */

Full Excel VBA Course - Beginner to Expert

Sliders!!!

Similar Tutorials

View Content

Ok so the following code is basically the style of form I would like to have on my website. I was wondering however how you make the options on a sliding scale. So all the visitor has to do is slide the button along a scale to get their answer. I would basically like something found on stylepilot.com on their dna generator or like something on wonga.com (stupid adverts!!!!). Any help or pointing in the right direction would be great.

<?php

print_r($_POST);

?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head></head>

<body>

<script type="text/javascript">

function setOptions(chosen){

var selbox = document.formName.table;
selbox.options.length = 0;

if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('No database selected',' ');
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
selbox.options[selbox.options.length] = new Option('second choice - option three','twothree');
selbox.options[selbox.options.length] = new Option('second choice - option four','twofour');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}

</script>

<form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);">
<option value=" " selected="selected"></option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>

<select name="table" size="1">
<option value=" " selected="selected">No database selected</option>
</select>

<input type="submit" />

</form>

</body>

</html>

Anyone Know Of Any Mobile Sliders?

Similar Tutorials

View Content

Similiar to that of CBS.com or AOL.com when you visit them on the iphone. Something that responds to the swipe gesture within the iphone.

I've been searching google, but mobile web resourses are far and few. Also tried to check out their source and it only shows it as one long line of text, not ideal for trying to read code.

2 Sliders Conflicting On The Same Page

Similar Tutorials

View Content

Hi there,

Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from http://forum.leigeber.com/

The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference.
The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken.

Here is the testing url.
http://www . bellsdomestics.co.uk/testing/index . html

Can anyone point me in the right direction?

Thanks.

Change Navigationpanels On Two Different Sliders In Same Page

Similar Tutorials

View Content

Hi there.

I've been working on how to use the AnythingSlider (Github)
And I have a problem, when I want to use 2 or more sliders on the same page.
I want to change the green navigationpanels, and they should be different on each slider:

When I have one slider I use this:
Code:

<script type="text/javascript">

var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
	return slider1[index - 1] || index;
}
 

</script>

But when I have more sliders, I can't use this:
Code:

<script>
$(function(){
  var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'],
      slider2 = ['jul', 'aug', 'sept', 'Quote #3', 'Image #3'];

  $('#slider1').anythingSlider({
    navigationFormatter : function(index, panel){
      return slider1[index - 1] || index;
    }
  });
  $('#slider2').anythingSlider({
    navigationFormatter : function(index, panel){
      return slider2[index - 1] || index;
    }
  });
});
</script>

It somehow conflicts with the slider.js I think.
I'll post the HTML and the slider.js in the next two replies.

Will you check it out and help me find the fault?
Thanks

Update The Sliders's Value After A Submit Button

Similar Tutorials

View Content

Hi All,

I am new to html and javascript. I am doing a webpage where i need to get the value from a slider and send it across the from client to server side. I need to inform the server side about the value (done) and also update the sliders's value after a submission button.
Anyone have any idea how to do the latter part. Here is my code.
Code:

<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="js/range.js"></script>
		<script type="text/javascript" src="js/timer.js"></script>
		<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<p>Current Value:</p>
		<div class="slider" id="slider-1" tabIndex="1">
		<input class="slider-input" id="slider-input-1"/>
		</div>
		<form  name="hMess" action="" onsubmit="return convertURL(this);">  <input name="w"  type="number" id="h-value" onchange="s.setValue(parseInt(this.value))"> <input name="1" id="1" type="submit" value="Update"></form> 

<script type="text/javascript">
var s1 = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));

s1.onchange = function () 
{
document.getElementById("h-value1").value = s1.getValue();
};
var a=document.getElementById("h-value1").value
s1.setValue(a);

var locate = window.location
document.hmess.burns.value = locate
var text = document.hmess.burns.value

function delineate(str)
{
	theleft = str.indexOf("=") + 1;
	theright = str.indexOf("&");
	return(str.substring(theleft, theright));
}	
</script>

body>
</html>

Thanks in advance.

Need Help With Multiple Image Swaps On Multiple Pages In Wordpress

Similar Tutorials

View Content

Hi,

I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html.

I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress.

Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page.

Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover.

There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer.

Is this possible?

Multiple Popovers On Image Map

Similar Tutorials

View Content

I am new to web design and purchased "Instant PopOver" thinking it would do all the javascripting for me, BUT it doesn't combine the popovers in a single document and their customer service doesn't provide custom coding help. I must not be scripting this right. Here's what I'm working on:

http://www.hallornothingdesigns.com/...ew/map_pop.htm

The popovers are suppose to all be unique in different locations. Can someone help me?

My butchered code is below:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- IPO CODE: ALBOX START --> 
<script language="javascript">
function showAlert1() {makeAlert('Discover','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert2() {makeAlert('Hang','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert3() {makeAlert('Encounter','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert4() {makeAlert('Challenge','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert5() {makeAlert('Explore','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert6() {makeAlert('Behold','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert7() {makeAlert('Send','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert8() {makeAlert('Take','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert9() {makeAlert('Conquer','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert10() {makeAlert('Seize','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
</script> 
<!-- IPO CODE: ALBOX END -->

<title>Grande Villas Spinnakers Kids' Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Sun Dec 20 18:18:27 GMT-0500 (EST) 2009-->
</head>
<body bgcolor="#74b1bf" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<script language="javascript" src="AlertPopOVER.js"></script>
<img name="map_background2" src="map_background2.gif" width="1500" height="864" border="0" id="map_background2" usemap="#m_map_background2" alt="" /><map name="m_map_background2" id="m_map_background2">
<area shape="rect" coords="844,449,1028,535" href="http://www.gvcondos.com" target="_blank" title="Grande Villas Homepage" alt="Grande Villas Homepage" />
<area shape="rect" coords="525,195,597,216" href='javascript:void(0);' onClick="javascript:showAlert1();">
<area shape="rect" coords="944,201,989,223" href='javascript:void(0);' onClick="javascript:showAlert2();">
<area shape="rect" coords="716,239,798,257" href='javascript:void(0);' onClick="javascript:showAlert3();">
<area shape="rect" coords="509,332,591,351" href='javascript:void(0);' onClick="javascript:showAlert4();">
<area shape="rect" coords="723,365,792,384" href='javascript:void(0);' onClick="javascript:showAlert5();">
<area shape="rect" coords="856,324,919,343" href='javascript:void(0);' onClick="javascript:showAlert6();">
<area shape="rect" coords="958,373,1000,394" href='javascript:void(0);' onClick="javascript:showAlert7();">
<area shape="rect" coords="824,427,868,446" href='javascript:void(0);' onClick="javascript:showAlert8();">
<area shape="rect" coords="648,518,695,535" href='javascript:void(0);' onClick="javascript:showAlert9();">
<area shape="rect" coords="497,449,562,468" href='javascript:void(0);' onClick="javascript:showAlert10();">
</map>

<!-- IPO CODE: ALBOX START -->
<div id="stl_alert1" style="position: absolute; visibility: hidden;
left: 527px;
top: 215px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert2" style="position: absolute; visibility: hidden;
left: 945px;
top: 221px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert3" style="position: absolute; visibility: hidden;
left: 717px;
top: 258px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert4" style="position: absolute; visibility: hidden;
left: 511px;
top: 350px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert5" style="position: absolute; visibility: hidden;
left: 727px;
top: 295px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert6" style="position: absolute; visibility: hidden;
left: 859px;
top: 344px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert7" style="position: absolute; visibility: hidden;
left: 957px;
top: 393px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert8" style="position: absolute; visibility: hidden;
left: 825px;
top: 447px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert9" style="position: absolute; visibility: hidden;
left: 497px;
top: 470px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

<div id="stl_alert10" style="position: absolute; visibility: hidden;
left: 648px;
top: 538px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>&nbsp;&nbsp;
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>

 
<!-- IPO CODE: ALBOX END -->

</body>
</html>

I'd also like these popovers to activate on rollover and close upon mouseout, but I'm trying not to be picky. I'd be happy if I could just get the right content to popup.

Thanks for your help!!!!

Help With Multiple Image Swaps

Similar Tutorials

View Content

http://www.pennonconstruction.com/projects.php

I'm trying to rotate an array of images (including different urls the images are linked to). The two images below "Featured Projects" are the images that should be rotating with an array of different images/links.

I know this can be done in a fairly simple way, I'm just having a hard time finding something that is simple and works.

Any help is much appreciated!

Multiple Image Change On Click

Similar Tutorials

View Content

hi master.

I need some help.

I need a function that change multiple images on click maybe by id
Ex.:
PHP Code:
<table>
.....
<td><img src="folder1/image1.jpg"></td>
<td><img src="folder1/image2.jpg"></td>
<td><img src="folder1/image3.jpg"></td>

<td><img src="folder2/image1.jpg"></td>
<td><img src="folder2/image2.jpg"></td>
<td><img src="folder2/image3.jpg"></td>
.....
</table>

NOW BUTTONS (IMAGES)
PHP Code:

<div><img src="buttons/buton1.jpg" alt=""></div>


<div><img src="buttons/buton1.jpg" alt=""></div>
<div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div>


<div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div>

really, I don't know much about javascript, I'm waiting for your help.
actually, I have loaded jquery-1.2.6.min.js

Multiple Random Image With Corresponding 'alt' Tags

Similar Tutorials

View Content

Hi

I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while...

Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while....

... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined".

All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas?

Here's the code...

Code:

		<SCRIPT LANGUAGE="JavaScript">
			<!-- Begin
			// Set up the image files to be used.
			var theImages = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theImages[0] = 'images/240 Images/belmarsh-peat-240.jpg'
			theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg'
			theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg'
			theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg'
			theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg'
			theImages[5] = 'images/240 Images/Justin_Barton-240.jpg'
			theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg'
			theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg'
			// do not edit anything below this line
			
			var theImages2 = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg'
			theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg'
			theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg'
			theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg'
			theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg'
			theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg'
			theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg'
			// do not edit anything below this line

			var theAlts = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theAlts[0] = 'Peat bog excavations at Belmarsh Prison.'
			theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.'
			theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.'
			theAlts[3] = 'Fieldwalking.'
			theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.'
			theAlts[5] = 'An MA Student from University College London a records ceramic vessel.'
			theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).'
			theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.'


			var theAlts2 = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theAlts2[0] = 'Building Recording Services.'
			theAlts2[1] = 'Fieldwork Services.'
			theAlts2[2] = 'Finds and Environmental Specialist Services.'
			theAlts2[3] = 'Forensic Archaeology.'
			theAlts2[4] = 'Geoarchaeological Services.'
			theAlts2[5] = 'Heritage Management Services.'
			theAlts2[6] = 'Landscape Research Services.'
			
			var j = 0
			var p = theImages.length;
			var preBuffer = new Array()
			for (i = 0; i < p; i++){
			   preBuffer[i] = new Image()
			   preBuffer[i].src = theImages[i]
			}
			var whichImage = Math.round(Math.random()*(p-1));
			
			
			
			function showImage(){
			document.write('<img src="'+theImages[whichImage]+'" border="1" alt="'+theAlts[whichImage]+'">');
			}
			
			function showImage2(){
			document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">');
			}

			//  End -->
		</script>

and its called by the code...

Code:

              <SCRIPT LANGUAGE="JavaScript">
	 		 <!-- Begin
	  			showImage(); 
	 		 //  End -->
	 	    </script>

and..

Code:

              <SCRIPT LANGUAGE="JavaScript">
	 		 <!-- Begin
	  			showImage2(); 
	 		 //  End -->
	 	    </script>

Many thanks in advance.

Multiple Image Sets Slideshow

Similar Tutorials

View Content

hi im creating a simple slide show and i was wondering how to add multiple sets of image. heres my current code
Code:

<html>
<head>
  <script type="text/javascript">
      
      var Images = new Array
	  ('images/up.jpg','images/right.jpg','images/down.jpg','images/left.jpg');
     //my second group of images...
     //('images/bottemleft.jpg','images/topleft.jpg','images/centerstep.jpg','images/topleft.jpg','images/bottemright.jpg');
	  var thisPic = 0;

     
     function initLinks() {
	document.getElementById("nextLink").onclick = processNext;
	document.getElementById("backlink").onclick = processBack;
	document.getElementById("fplaylink").onclick = processfplay;
	document.getElementById("bplaylink").onclick = processbplay;
	document.getElementById("stoplink").onclick = processstop;
     }
	 

     
      function processNext() {
	thisPic++;
	if (thisPic == Images.length) {
		thisPic = 0;
	}
	document.getElementById("myPicture").src = Images[thisPic];
	return false;
	}
	
	function processBack() {
	thisPic--;
	if (thisPic == -1 ) {
		thisPic = (Images.length -1);
		
	}
	   document.getElementById("myPicture").src = Images[thisPic];
	return false;
}
	
	
var stop = 0

     function processfplay() {
	
	if (stop == 1) {
	thisPic++;
	if (thisPic == Images.length) {
		thisPic = 0;
		}
	setTimeout("processfplay()", 200);
	}
	else { 
		stop = 1 ;
		}
		
	document.getElementById("myPicture").src = Images[thisPic];
	return false;
	}
	
	function processbplay() {
	
	if (stop == 2) {
	thisPic--;
	if (thisPic == -1 ) {
		thisPic = (Images.length -1);
		}
	setTimeout("processbplay()", 200);
	}
	else { 
		stop = 2;
		}
		
	document.getElementById("myPicture").src = Images[thisPic];
	return false;
	}
	
	function processstop (){
	(stop = 0)
	document.getElementById("myPicture").src = Images[thisPic];
	return false;
	}


   </script>
 </head>

<body onload=initLinks() >

<h2 align= center>Images used in the slideshow below</h2>

<table align= center>
<tr><td><img src= "images/left.jpg"></td><td><img src= "images/down.jpg"></td>
<td><img src= "images/up.jpg"></td><td><img src= "images/right.jpg"></td></tr>
</table>
<table align= center>
<td><img src= "images/bottemleft.jpg"></td><td><img src= "images/topleft.jpg"></td> 
<td><img src= "images/centerstep.jpg"></td>
<td><img src= "images/topright.jpg"></td><td><img src= "images/bottemright.jpg"></td>
</table>

	<div align="center">
		<h2>The Slidshow</h2>
		<img src="images/ddrlogo.jpg" id="myPicture" alt="Slideshow" />
		<h2>
			<a href="any_old.html" id="nextLink">Next &gt;&gt;</a><br/>
			<a href="any_old.html" id="backlink">Back &lt;&lt;</a><br/>
			<a href="any_old.html" id="fplaylink">Forward Play &lt;&lt;</a><br/>
			<a href="any_old.html" id="bplaylink">backward Play &lt;&lt;</a><br/>
			<a href="any_old.html" id="stoplink">Stop &lt;&lt;</a><br/>

		</h2>
	</div>



</body>
</html>

thanx in advance

Change Image And Multiple Links

Similar Tutorials

View Content

Hello,

I have 3 smaller thumbnail images and when I click on any of them, the resulting image displays in the larger image space.

The tricky part is that I want the larger image to become a link that changes, depending on which image is displaying. (I don't want the little images to be links.)

Click here for a visual to help explain what I am wanting to do.

Here is what I have for script...but I can't figure out the links...
Code:

<script>
function changeImage(filename) 
{
   document.main.src = filename; 
}
</script>

<table><tr><td><img name="main" src="images/4.gif"></td>
<td>
<a href="#" onClick="javascript:changeImage('images/1.gif')"><img src="images/11.gif"></a><br>
<a href="#" onClick="javascript:changeImage('images/2.gif')"><img src="images/22.gif"></a><br>
<a href="#" onClick="javascript:changeImage('images/3.gif')"><img src="images/33.gif"></a><br>
</td></tr></table>

This script works fine, but I can't figure out how to make the larger image have 3 separate links, depending on which image is displaying in it. Thanks for any help you can be!

Change Multiple Image Style

Similar Tutorials

View Content

Hi,

I have a list of pictures like this:

<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1474');return false"><img src="image.php?path=source/shoes/0788.jpg" class="img" border="0"></a>
<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1440');return false"><img src="image.php?path=source/shoes/0754.jpg" class="img" border="0"></a>
<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1430');return false"><img src="image.php?path=source/shoes/0744.jpg" class="img" border="0"></a>
<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=54&pic=1407');return false"><img src="image.php?path=source/shoes/0127.jpg" class="img" border="0"></a>
<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=18&pic=1390');return false"><img src="image.php?path=source/shoes/0106.jpg" class="img" border="0"></a>

Size of pictures in class is width 155px and hight 175px. Now I want, when I click on any picture from the list, to replace class "img" on all pictures with new class that have width 100px and height 75px.

Is this possible?

Thanks

Multiple Image Swaps On Same Page

Similar Tutorials

View Content

I'm trying to create a portfolio website in which I have multiple galleries showing different work on the same page . Each to work separately and change the default image on click. I have seen it work he http://www.fajnechlopaki.com/

I was able to follow this: http://codingforums.com/showthread.php?p=941419 but then couldn't duplicate it.

Please help! Thanks.

Multiple Image Source If Statement

Similar Tutorials

View Content

I cannot get this function to work properly. Any help would be appreciated, please understand i am not so good at scripting i am trying to check the source of multiple images in one if statement to run a sound.

Code:

function victory() {

            if (document.getElementById("Image0").src == "0.jpg" + 
                    document.getElementById("Image1").src == "1.jpg" +
                    document.getElementById("Image2").src == "2.jpg" +
                    document.getElementById("Image3").src == "3.jpg" +
                    document.getElementById("Image4").src == "4.jpg" +
                    document.getElementById("Image5").src == "5.jpg" +
                    document.getElementById("Image6").src == "6.jpg" +
                    document.getElementById("Image7").src == "7.jpg" +
                    document.getElementById("Image8").src == "8.jpg" +
                    document.getElementById("Image9").src == "9.jpg")
                {
            document.getElementById("vic").currentTime = 0;
            document.getElementById("vic").play();
        } 
        else{
        }
        }

Reply With Quote

01-21-2015, 05:19 PM #2
Dormilich View Profile View Forum Posts

Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts

+ is the addition, concatenation and number casting operator. the logical AND operator is &&.

cf. https://developer.mozilla.org/en-US/..._and_Operators

Multiple Array's On One Page - One Image On Text

Similar Tutorials

View Content

I'm trying to create two array's on this page: http://www.hollywoodfarmer.com

Both array's would be activated by clicking their respective links -- the "I've got more to say" graphic would activate the text array in the bubble.

The "Meet my friends" graphic would activate the image array that changes the picture of the celebrities (pls ignore the terrible formatting of the 2nd pic).

I'm going to have a relatively large amount of text array variables and probably 5-10 image array variables.

Currently, the meet my friends button changes one image, but then it won't change back and is basically broken. The text array is currently activated by refreshing the page and I can't get that button to work at all. Any help would be greatly appreciated. Your forums have gotten me this far!

Multiple Radio Button Display One Image

Similar Tutorials

View Content

I need a script that will allow a user to select a vertical selection and Horizontal selection that displays a corresponding image. There are only 8 combinations (4 vertical choices and 2 horizontal choices) I just need to display the correct image and a description. There has to be only one of each selected and only display one image.

I have tried several and have had no luck. Any ideas?

Here is how the layout will look

How Do I Swap An Image On A Page Using Multiple Variables?

Similar Tutorials

View Content

Change Image Based On Multiple Select Options

Similar Tutorials

View Content

Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction.

I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html

The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely.

If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks.

Reading Input Type=image Or Multiple Submit Buttons

Similar Tutorials

View Content

Hate to ask this as I know it's an easy one but surprisingly Google turns up no clear/simple answers!

I'm modifying some old code and am not JS programmer (I'm a PHP programmer) and this is driving me nuts. The existing code makes sure that when the form is submitted that there isn't a missing value. There's also some hidden input values. The JS starts out

function checkform(orderform)

and the form tag includes onsubmit="return checkform(this);">

I can add an alert to the form to see varius input values, such as a hidden value for the input name 'description' I can use:

alert (orderform.description.value)

Eazy peazy.

However the form has two different input type=image buttons now and I need to do some branching in the JS depending on which image button they press. I recall IE had an issue where it only sends the x and y coordinates So I figure an easy to determine which image button was pressed is just check to see if the x or y value for each button is non-zero.

But I can't for the life of me figure out how to access the value. Example:

alert (orderform.button1.x.value) doesn't work.

Can someone refresh my memory or suggest an entirely different method for detecting which image button was used to submit a form?

THanks in advance!