JavaScript - Very Complex Image Rollovers

I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this?

<div style="padding-left:45px;width:852px;">
<a href=".html" class="Button">
<div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat">
<span id="homeButtonText">Question 1</span><br />

</div>
</a>

<a href="" class="Button">
<div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat">
<span id="homeButtonText">Question 2</span><br />
</div>
</a>
<a href="" class="Button">
<div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat">
<span id="homeButtonText">Question 3</span><br />
</div>
</a>
</div>

I've been looking into creating an auction-type website but I haven't been able to figure a few things out. Right now it seems my biggest struggle is getting the timers I need for the site to work. This is mainly because, I'll admit, I don't know much about JavaScript.

The other thing I am struggling with is that all the examples I've messed with when I searched the site, such as this one and this one, reset themselves if I refresh the page.

While I don't mean to be too picky I figure I need something that has the following features:

1) The ability to have multiple timers (10-12) that are independent of one another. They need to maintain their countdown even if someone refreshes the page.

2) If the timer has less than 30 seconds left on it then it needs to "reset" itself to 30 seconds when someone places a bid.

I know that means I have to notify the timer if a bid was placed however, to simplify things (for now) let's just assume that when a user clicks a button they have "placed a bid".

Here are couple of other sites that are very similar to what I want to setup, in case you need more info then what I have provided:

BidRay

BidCactus

Just FYI I like BidRay's style better but I don't know if it really matters much from the JavaScript side of things.

EDIT: sorry sorry, I just realized I posted this on the wrong place.... {palmface}

Just to start off, Javascript is NOT my forte'. Ive been trying to do some form validating for a few hours now. I've tried many different combos and trying multiple functions to make this work but I have seemed to make more of a mess than anything now.

Here's what I've got going on... A simple form with 3 text inputs a checkbox and a submit button. I'm trying to do 7 things.

1. strip special characters from all 3 input fields (except : / and @)
2. make sure no input fields are blank
3. verify that email has @ and . in it
4. insure that the checkbox is checked

I would love to set the email not to allow certain domains(yahoo,gmail) but that is a bit out of my league.

Any help would be appreciated, below is the current garbled mess of javascript I am left with after hours of trying to get it to work... my appologies. I know it's ugly.

Code:

<script LANGUAGE="Javascript">
		<!-- Begin
	function CleanUp() {
	name = document.register.name.value;
	email = document.register.email.value;
	website = document.register.website.value;
	var iChars = "!#$%^&*()+=-[]\';,.{}|\"<>?";
	 
		//remove crap name
	for (var i = 0; i < document.register.name.value.length; i++) {
	if ((iChars.indexOf(document.register.name.charAt(i)) != -1)) {
   	window.alert ("No special characters allowed.");
   	return false;
   	}}
		
		//remove crap website
	for (var i = 0; i < document.register.website.value.length; i++) {
	if ((iChars.indexOf(document.register.website.charAt(i)) != -1)) {
   	window.alert ("No special characters allowed.");
   	return false;
   	}}
	
		//remove crap email
	for (var i = 0; i < document.register.email.value.length; i++) {
	if ((iChars.indexOf(document.register.email.charAt(i)) != -1)) {
   	window.alert ("No special characters allowed.");
   	return false;
   	}}

		//check required field
	if ((name == "") || (email == "")|| (website == "")) {
	window.alert("Please enter your Name, website, and E-mail address.");
	return false;
	}	
		//verify email
	if (email.value.indexOf("@", 0) < 0)
    {
    window.alert("Please enter a valid e-mail address.");
    return false;
    }
    
	if (email.value.indexOf(".", 0) < 0)
    {
    window.alert("Please enter a valid e-mail address.");
    return false;
	}

		// check agree term before submit
	if (agree.checked == false )
	{
	alert('Please confirm you are the site owner.');
	return false;
		
		//done
	}else
	return true;
	}
	 
		//  End -->
	</script>

Using Dreamweaver CS3 (WinXP), is there a simple way to add captions to disjointed rollovers?
(The disjointed rollovers are created using image swap behavior)
My aim is to click on a thumbnail, and when the image is projected on the poster, I want a caption appearing underneath.
Can you please help me with this, here is my complete code
Thanks


[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" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/fullscreen/1z.jpg','images/fullscreen/2z.jpg')">
<p><img src="images/fullscreen/1z.jpg" alt="HL" name="pic1" width="114" height="102" id="pic1" onmouseover="MM_swapImage('poster','','images/fullscreen/1z.jpg',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/fullscreen/2z.jpg" alt="HL" name="pic2" width="114" height="102" id="pic2" onmouseover="MM_swapImage('poster','','images/fullscreen/2z.jpg',1)" onmouseout="MM_swapImgRestore()" /></p>
<p>&nbsp;</p>
<p><img src="images/fullscreen/3z.jpg" alt="HL" name="poster" width="500" height="375" id="poster" /></p>
</body>
</html>
[code]

Good day

Lets say I have a page with 3 thumbnails and one big div. When click in one of the thumbnails the image of it must appear inside the big div.

Of course there are 3 images (little ones for the thumbnails) and 3 big images for the real size ones.

Script this is simple for me but imposible if I have more than 100 pages within 6 images inside them (3 little and 3 real size for 3 thumnail divs and one single big div).

There must be some kind of order to just script the divs of the thumbnail divs and the real size image div in all the pages at ones, otherwise I have to creat ID's to every single div inside every single page! (4 id's to one page and I have more than 100 pages!, this is inpractical because is posible that in the future the pics change, is more than 400 id's)

For example: for FIRST.html

big div (div id="img001bg")
thumb1 div (div id="th_img001"
thumb2 div (div id="th_img002"
thumb3 div (div id="th_img003"

SECOND.html
THIRD.html
... HUNDRED.html ... !


There must be some solution using somehow the functions, please help!

Thank you to all

Hi everyone, this is my first post on this forum and is also my first attempt to use javascript. When it comes to javascript I am a complete noob, but before you push the back button I just thought I'd let you know I just spent a few hours in some javascript tuts so I could *at least* have some idea of what you and I are talking about.

Ok, here's my question: How can I make a disjointed div become and remain visible when I hover over it's parent div? The Only time I want that div to go back to being invisible is when I hover over another parent div causing it's child div to become visible.

Here's the example (only tested in FF 3.5.2) :

http://www.e-uphoria.com/demo_two.html

I used :hover in css to show the disjointed div (the red box) that I want to become visible via javascript.

I managed to achieve this effect with css, but when the user moves the mouse out of the browser window the div disappears because the hover is no longer activated. This is why I need javascript, so the user can do anything he or she wants outside of the browser window and the "hover" will still be activated revealing the content of the div.

Here's the example of the css only version (again, only tested in FF 3.5.2) :

http://www.e-uphoria.com/demo.html

I messed around with some onmouseover and onmouseoff within the html and realized I could achieve the desired effect with some really messy and inefficient code. I would prefer to have the javascript in an external file and not looking like it was written by an idiot.

If anybody could help me out with this that would be awesomely awesome. Thanks!

hi there

i'm a newb so be nice lol

--> I want to use javascript in an array to submit content.
I have some php background so using some techniques I worked this out.

>> I need to select bathroom details and the script needs to be user friendly,
however I have multiple bathrooms that can be selected. So based on a drop down list
I need to select the bathrooms needed and then I will get more options as stated below.

These options will need to be submitted so I need different varibles for each item selected




I expect that you'll have a better way to do it I just want it to work

my HTML script LOOKED as follows



Code:

    <!-- BATHROOM TYPE SELECTOR  HTML-->
    <label>
      <input name="fullbathr" type="checkbox" value="fullbathr" onClick="checker('yesFullba'); UpdateChecks('option');" />
      Full Bathroom </label>
    <span id="yesFullba" style="visibility:visible"> 
      | 
      <input name="babath" type="checkbox" value="babath" id="babath" onClick="change('bathselba'); UpdateChecks('option');";/>
      Bath </label>
      | 
      <input name="bashower" type="checkbox" value="bashower" id="bashower" onClick="change('showerselba'); UpdateChecks('option');" />
      Shower </label>
   <span id="bathselba" style="visibility:hidden"> 
          <br /> Bath Type: <label>
        <input type="radio" name="bathtype" value="standardba" id="bathtype_0" />
        Standard</label>
      <label>
        <input type="radio" name="bathtype" value="ovalba" id="bathtype_1" />
       | Oval</label>
      <label>
        <input type="radio" name="bathtype" value="cornerba" id="bathtype_2" />
       | Corner</label>

      <label>
        <input type="radio" name="bathtype" value="spaba" id="bathtype_3" />
       | Spa</label>
   </span>
 
     <span id="showerselba" style="visibility:hidden"> 
     <br /> Shower Heads: <label>
        <input type="radio" name="showerheadba" value="singlesho" id="showerheadba_0" />
        Single Head</label>
      <label>
        <input type="radio" name="showerheadba" value="doublesho" id="showerheadba_1" />
       | Double Head</label> </span>
    </span>
    <br />
    <!-- end BATHROOM TYPE SELECTOR HTML  -->

i converted it as follows

Code:

<!--  CREATE BATHROOMS  -->
function createbaths(number2) {
databaths = "";    
inter = "'";
dinter = '"';
spaces="      ";
if (number2 < 7 && number2 > -1) {
for (i=1; i <= number2; i++) {
databaths = databaths + "<br><strong>Bathroom " + i + " :</strong><br>"
    
    <!-- BATHROOM TYPE SELECTOR  JAVASCRIPT-->
+ " <label>"
+ " <input name=" + dinter + "fullbathr" + dinter 
+ " type=" + dinter + "checkbox" + dinter 
+ " value=" + dinter + "fullbathr" + dinter 
+ " onClick=" + dinter + "checker(" + inter + "yesFullba" + inter + "); " 
+ "UpdateChecks(" + inter + "option" + inter + ");" + dinter + " />" 
+ "Full Bathroom </label>" + "<span id=" + dinter + "yesFullba" + dinter 
+ " style=" + dinter + "visibility:visible" + dinter + "> | "

     + "<input name=" + dinter + "babath" + dinter 
	 + " type=" + dinter + "checkbox" + dinter 
	 + " value=" + dinter + "babath" + dinter 
	 + " id=" + dinter + "babath" + dinter 
	 + " onClick=" + dinter 
	 + "change(" + inter + "bathselba" + inter + "); " 
	 + "UpdateChecks(" + inter + "option" + inter + ");" 
	 + dinter + ";/>" 
	 + "Bath </label> | "
	 
	 + "<input name=" + dinter + "bashower" + dinter 
	 + " type=" + dinter + "checkbox" + dinter 
	 + " value=" + dinter + "bashower" + dinter 
	 + " id=" + dinter + "bashower" + dinter 
	 + " onClick=" + dinter 
	 + "change(" + inter + "showerselba" + inter + "); " 
	 + "UpdateChecks(" + inter + "option" + inter + ");" 
	 + dinter + " />" 
	 + "Shower </label> "
	 
+ "<span id=" + dinter + "bathselba" + dinter 
+ " style=" + dinter + "visibility:hidden" + dinter + ">" + "<br />"
	  
     + "Bath Type: <label>" 
	 
	 + "<input type=" + dinter + "radio" + dinter 
	 + " name=" + dinter + "bathtype" + dinter 
	 + " value=" + dinter + "standardba" + dinter 
	 + " id=" + dinter + "bathtype_0"  + dinter 
	 + " /> " 
	 + "Standard</label>"
	 
	+ "<label>" 
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name=" + dinter + "bathtype" + dinter 
	+ " value=" + dinter + "ovalba" + dinter 
	+ " id=" + dinter + "bathtype_1" + dinter 
	+ " /> | "
	+ "Oval</label>"
	
    + "<label>" 
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name=" + dinter + "bathtype" + dinter 
	+ " value=" + dinter + "cornerba" + dinter 
	+ " id=" + dinter + "bathtype_2" + dinter 
	+ " /> | "
	+ "Corner</label>"

    + "<label>"
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name="+ dinter + "bathtype" + dinter 
	+ " value=" + dinter + "spaba" + dinter 
	+ " id=" + dinter + "bathtype_3" + dinter 
	+ " /> | "
	+ "Spa</label></span>"
	 
 
+ " <span id=" + dinter + "showerselba" + dinter 
+ " style=" + dinter + "visibility:hidden" + dinter 
+ "><br />"
	
	+ " Shower Heads: <label>"
	
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name=" + dinter + "showerheadba" + dinter 
	+ " value=" + dinter + "singlesho" + dinter 
	+ " id=" + dinter + "showerheadba_0" + dinter 
	+ " />" 
	+ "Single Head</label>" 
	
	+ "<label>" 
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name=" + dinter + "showerheadba" + dinter 
	+ " value=" + dinter + "doublesho" + dinter 
	+ " id=" + dinter + "showerheadba_1" + dinter 
	+ " /> | " 
	+ "Double Head</label>"
	+ " </span> </span> <br /> " 

    <!-- end BATHROOM TYPE SELECTOR JAVASCRIPT -->

The entire forum is using a few different functions I've setup for this section i've got these sets

Code:

<!-- --> 
function change(id){
	if (document.all[ id ].style.visibility == 'hidden') 
	{    
	document.all[ id ].style.visibility = 'visible'; 
    document.all[ id ].focus(); 
	}	
else
	{
	document.all[ id ].style.visibility = 'hidden'; 
    document.all[ id ].value = '';
	document.all[ id ].checked = '';
	}
}
<!-- --> 

<!-- for full bathroom selector-->
function UpdateChecks(which) {
if     (which == 'fullBathroom')    { fullBathroomIsChecked();  }
else if(which == 'option')  { BoxesCheck();    }
}
function fullBathroomIsChecked() {
if(document.all.fullbathr.checked == false) { BoxesCheck(); }
else {
	document.all.babath.checked = false;
	document.all.bashower.checked = false;
	}
}
function BoxesCheck() {
document.all.fullbathr.checked = false;
if((document.all.babath.checked == true) && (document.all.bashower.checked == true)) 
	{
	document.all.fullbathr.checked = true;
	document.all.yesFullba.style.visibility = 'hidden'; 
	fullBathroomIsChecked();
	}
}
<!--  for full bathroom selector END -->

CURRENTLY
I have a drop down list from 1 to 6 when a bathroom is selected lets say 3
then it SHOULD display
full - bath - shower -
PER EACH BATHROOM

if bath and shower is selected they disappear and full remains ticked if u tick full bath and shower
disappear. included a sub cat. that changes based on the above selection this works in html but


The bathroom varibles in the javascript need to be changed to suite a changing varible I based
what I understand that an array will need to be added but how to i adjust the script correctly.

I might work it out just have a bit of overload at the moment.

Thanks in advance

i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this:

link 1a / link 2a / link 3a

the second menu (menu B) is like this:

link 1b
link 2b
link 3b

i would like to use javascript/css to do the following:

when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b)

i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color.

it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated.

Is it possible to make it so if you click on a <a href> the information such as the name or link changes the <title> of the page and replaces existing opened <div>s with information from the link or such.
eg

If i had a list of swf files that were attatched to links how could I display each swf file onclick without redirecting whilst changing the title and content?

I'm using two simple CSS rollovers for a prev/next arrow nav, combined with a JS script that lets the user manually tab/flip/swap through a few testimonials. You roll over the "next" button, it's highlighted, you click it, a new testimonial appears in place of the old one.

Problem: the prev/next buttons are appearing and disappearing on click, seemingly randomly. I can't make any sense of it.

Image: http://img3.imageshack.us/img3/8924/jsproblem.jpg

I've tried adjusting the CSS container sizes, tried changing the positioning and even adding z-indexes in case the divs are accidentally overlapping. Gave items background colors to try to see the structure more clearly, for flaws. Nothing has worked.

Any help much appreciated.

I'm using this JS script for the tabs:

Code:

last_tab = 'tabTest1';
    function show(layerName) { 
    document.getElementById(layerName).style.display = '';}
    function hide(layerName) { 
    document.getElementById(layerName).style.display = 'none';}
    function show_next(tab_name) {
    document.getElementById(last_tab).className = '';
    var curr = document.getElementById(tab_name);
    curr.className='';
    hide(last_tab+'_data');
    show(tab_name+'_data');
    last_tab=tab_name;}

and this HTML:

Code:

        <!-- start: testimonials -->
        <div id="tabTest1_data">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <p class="spotlightnav-content-title">Testimonials</p>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    	<span class="color1">"</span>Excellent staff very courteous, friendly and professional, excellent stay, excellent meal.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Janice, Georgia</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>
          		</div>
             </div>
		</div>
        
        <div id="tabTest2_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Christine, Taiwan</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest3_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Belle, Taiwan</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest4_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Vaguely not-terrible. Acceptable in a somewhat amazing way. ffffffffuuuuuuuuu<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Grace, Texas</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest5_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Damn fine place, yo.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Slim, Bacon</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest6_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Blurry. But good.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Bob, California</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>

I'm assuming this is primarily a JS problem, but if taking a look at the CSS is necessary, let me know and I'll post it.

THANKS!!!!!

Hi every one Following is the situation I want a solution for,

-I have a form whose contents are forwarded to a mailer program hosted on a server which sends out emails. So basically the form data is submitted to one Mailer page (I have no control over the mailer program).

-After the form has been submitted the mailer program redirects to a default page or the "return " page specified by me..again redirects no matter what I have no control over it...

-Now instead of being redirected to a page I want the form contents to be submitted to another php page which will appear after the form has been submitted to the mailer page and display the contents of the form originally submitted.

Basically I want to submit to 2 different pages I know thats possible but I do not know how to get around the redirection from mailer page.

I thought of having the second php page to be the redirect page with all form data sent in query string however data fields are too many to send over get.
Is there anyway around this in javascript?
Its very complex to explain..I hope some one can help

I hope following crude visualisation helps
currently

submit form to------------->Mailer page (It redirects to any page specified)
form
to
|
|
|------->Page2.php (Want this to appear after form has been submitted to mailer page but mailer page redirects..)

Regards,
Aditya

Hi there,

I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time.
I looked over you FAQ section but I can't seem to figure it out.
Any help would be hugely appreciated.
Thank you so much.

HTML:
Quote:

<!-- Main content -->
<div id="content">
<div style="text-align:center">
<img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
</div>

<script type="text/javascript" src="slideshow.js"></script>
</div>




<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li>
<div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div>
</li>
<li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li>
<li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li>
<li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li>
<li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li>
<li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li>
<li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li>
<li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li>


</ul>

</div>

<script type="text/javascript" src="navigation.js"></script>

<div id="footer">
<!-- Site navigation menu - footer -->
<div id="navcontainer_footer">
<ul>


<li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li>
<li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li>
<li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li>
</ul>

</div>

<script type="text/javascript" src="navigation_bottom.js"></script>
</div>
</div>
<!-- End Wrapper -->







slideshow.js

Quote:
var pause = 3000; // interval, in milliseconds, between transitions
var i = 0; // image counter
var pic = document.getElementById("pic"); // the <img> element in the HTML file

// define an array of images
var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" );

// preload the images
for (var j = 0; j < imgs.length; j++)
{
var obj = new Image();
obj.src = imgs[j];
}

// rotates between the images in the "imgs" array
function rotate()
{
pic.src = imgs[i];
if (i === (imgs.length -1))
{
i = 0;
}
else
{
i++;
}

setTimeout("rotate()", pause);
}

window.onload = rotate;



navigation_bottom.js
Quote:
// define an array of images
var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg");


// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer_footer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;



navigation.js

Quote:
// define an array of images
var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg");

// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;

Ultimately I'd like a set up resembling http://shop.lululemon.com/Swift_Tank...30/p/1230.html

Where you're able to click a swatch color and get a thumbnail of it on the model and a thumbnail of a fabric detail that you could then enlarge. I'm not sure how to go about this. I'm able to do it with one thumbnail, where when you rollover the various swatch colors, the thumbnail of the model gets replaced. However I'm unable to add in the 2 other thumbnails (on that site they're using 3 but I would only need 2) that would change at the same time, where you could switch back and forth from at detail of the model and the fabric.

I don't necessarily need the zoom function, but if it is possible to do all of those that would be good too.

Otherwise I just need help coding how to at least get the swatches to change 3 images upon mouseover and that 2 of those images would be like the 3 thumbnails on the link above and would replace the larger thumbnail once clicked.

Hi I'm SUPER desperate and on the verge of being rescinded to every single university I got accepted into because of this AP Comp. Science course. Basically, my code isn't working and it's driving me UP THE WALL. Help would be a godsend, because I'm literally at my wit's end. Thanks for understanding.

The problem is a RECURSIVE MAZE SOLVER which takes in a maze of type char[][] and returns a string of directions, such as "Go South\nGo East\nGo East\nGo South\nGo South\nGo East\nGo East\nGo East".

I wish I could be more descriptive but I think the code answers for itself. And yes I am SUPER new at this. Thanks again for your time.

Code:

import java.util.Stack;
public class MazeSolver
{
    private char[][] maze;
    private int y;
    private int x;
    
    Stack stack = new Stack();

    public MazeSolver(char[][] maze) {
        this.maze = maze;
    }
    
    public void solve() {
        thisWay(0,0);
    }
    
    public boolean thisWay(int y, int x) {
        if ((maze.length-1 < y) || (maze[0].length-1 < x) || (y < 0) || (x < 0)) {
            return false;
        }
        if (maze[y][x] == 'x') {
            System.out.println("(" + y + "," + x + ")");
            stack.push(new Location(y, x));
            return true;
        }
        if (maze[y][x] != 'p') {
            return false;
        }
        
        maze[y][x] = 'v'; //"so the recursive calls do not recheck previously-visited positions"
        
        if ((thisWay((y - 1), x)) == true) {
            System.out.println("(" + (y - 1) + "," + x + ")");
            stack.push(new String ("Go North"));
            return true;
        }
        if ((thisWay((y + 1), x)) == true) {
            System.out.println("(" + (y + 1) + "," + x + ")");
            stack.push(new String ("Go South"));
            return true;
        }
        if ((thisWay(y, (x + 1))) == true) {
            System.out.println("(" + y + "," + (x + 1) + ")");
            stack.push(new String ("Go East"));
            return true;
        }
        if ((thisWay(y, (x - 1))) == true) {
            System.out.println("(" + y + "," + (x - 1) + ")");
            stack.push(new String ("Go West"));
            return true;
        }
        
        return false;
    }
    
    
    public String getSolution() {
        solve();
        String string = "";
        if (thisWay(0,0) == false) {
            System.out.println("No solution.");
        } else {
            for (int i = 0; i < stack.size(); i++) {
                string += stack.peek();
                stack.pop();
            }
        }
        return string;
    }
    
    public void showSolution() {
        System.out.println(getSolution());
    }
    
    
    
    
}

Code:

public class Location
{   
    private int y;
    private int x;
    public Location(int y, int x) {
        this.y = y;
        this.x = x;
    }
    public int getY() {
        return y;
    }
    public int getX() {
        return x;
    }
    
    
    
}