JavaScript - Show One Image Or Another Depending On The Value Of A Field

Hello Everyone!

It's been a while since this thought started to bother me, I would like to create a website that has script which depending on the option chooses the image and merges with the other image.

My idea is that someone comes on my website which would be custom carp hair rings. They would have options such as:

Hook type
Hook size
Braid(fishing line)
Length of the braid
Swivel


So depending on the hook they choose different image will appear and depending on the braid and the hook size everything merges together into finished product where the outcome you could clearly see the image of the hook tied with braid and a swivel at the end.

This is the image

Basically where you see the hook, the customer could select from an option of hooks and it would be replaced by their option, the length of the bread doesn't matter, but it would be nice to have some sort of an indicator to the customer how long it would be, and the last bit is the swivel, depending on the option the customer chooses, he can see the swivel or not.

Its like creating your own carp rig, you choose which hook you want, then it appears, you choose which braid you want, it appears and if you want you can have a swivel at the end and you can see how your chosen options looks like in reality.

Now I do not ask anyone to do everything for me, all I'm asking is for directions. Is there a script somewhere that I could edit that would achieve my goal, since I have no coding skills but some knowledge it would be nice to get some support along the way.

Thank You for you attention

Arnoldas Valys

hello
i have this code that tags between three images in an certain amount of time
and this works fine
Code:

<script language = "Javascript">
<?php $count_im=1;
 $req=mysql_query("select * from banner");
	while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"
<?php $count_im++;
}?>
</script>

Code:

<div class="banner">
	<p class="banner_image">
		<img src="banner/12.jpg" name="slide" width="290px">
		<script>
			<!--
			//variable that will increment through the images
			var step=1
			function slideit(){
			//if browser does not support the image object, exit.
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			if (step<3)
			step++
			else
			step=1
			//call function "slideit()" every ... seconds
			setTimeout("slideit()",10000)
			}
			slideit()
			//-->
		</script>
	</p>
</div>

and i want it also to tag between hrefs too, so tried the following but didnt work
Code:

<?php $count_im=1;
 $req=mysql_query("select * from banner");
	while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"

var link<?php echo $count_im; ?> =new String()
link<?php echo $count_im; ?>.href="<?php echo $res["banner_title"]; ?>"

<?php $count_im++;
}?>

Code:

<div class="banner">
	<p class="banner_image">
		<a href="" rel="nofollow" target="_blank" name="links">
		<img src="banner/12.12" name="slide" width="290px"></a>
		<script>
			<!--
			//variable that will increment through the images
			var step=1
			function slideit(){
			//if browser does not support the image object, exit.
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			document.a.links.href=eval("link"+step+".src")
			if (step<3)
			step++
			else
			step=1
			//call function "slideit()" every ... seconds
			setTimeout("slideit()",10000)
			}
			slideit()
			//-->
		</script>
	</p>
</div>

anyone can help???

How do I show the default icon for pdf, doc, etc... else show the image?
Code:

 
Show the default icon for pdf, doc, etc... else show image. 
Default icon:
'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' +
The image:
'<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' +

Attempted javascript onError but only certain browsers support that or it's my code.
Code:

'<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' +

Any ideas?

Hello.

The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text.

Here is the code.

Code:

<html>
<head>
<style type='text/css'>

#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>

<script type='text/javascript'>
function div_bg(team){
	document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";	
}
</script>

</head>

<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>

Thanks in advance!!

I've not really an idea how to do this. I know how to do it in PHP, but I need it dynamic

<input type="checkbox" name="facebook" value="1" />
if($_POST['facebook'] == 1)
echo "<input type='text' name='facebook_url' />";

Could someone tell me how I should do this.

Thanks.

Hi,
I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like...

PHP Code:
<form id="form1" name="form1" method="post" action="">
  <p>
    <label for="select">Membership:</label>
    <br />
    <select name="select" id="select">
      <option value="Premium" selected="selected">premium</option>
      <option value="Bronze">bronze</option>
    </select>
  </p>
  <p>Membership No:<br />
    <input type="text" name="textfield" id="textfield" />
  </p>
  OR<br />
  Sponsor:
<br />
  <select name="select2" id="select2">
    <option value="329">329</option>
    <option value="234">234</option>
  </select>
</form> 


appreciate the help

Hi. I have a form and in the form is a checkbox use as a switch to hide and unhide a two textbox. When the other textbox is hide, the other is unhide such as the code below. When the user click the submit button on the first time and there is an error, it reloads and the id="fieldset.-in_honor" hide because it is set to hide initially but not empty. My problem is, I want to show the fieldset whichever is not empty after submit button is click and there is an error so user will not enter any more information to the other field. Is that possible? Please help. I have a hard time explaining it but hopefully you will get the idea. Thanks in advance and hope to hear from you as soon as possible.
Code:

/*toggle switch*/
<p><input type="checkbox" name="in_honor" value="" id="checkmemoriam" onclick="showHide(this.name);" />Please check to make this donation in honor of someone special.</p>

/*hide textbox but unhide when the switch is on or the checbox is check*/


    <fieldset id="fieldset-in_honor" class="fieldgroup" style="display:none">
    <legend class="hide">In Honor Of</legend>
    <p>To make this donation in honor of someone special, please complete the two fields below:</p>
    <div class="formfield" <?php echo highlight('donate_honor_name'); ?>>
      <label for="donate_honor_name">Name:</label>
       <input id="donate_honor_name" name="donate_honor_name" class="text" type="text" value="<?php safeEcho($form['donate_honor_name'])?>" />
	      <?php helper_error('donate_honor_name'); ?>
</div>
    <div class="formfield" <?php echo highlight('donate_honor_acknowledgement'); ?>>
      <label for="donate_honor_acknowledgement">Acknowledgement should be sent to:</label>
      <textarea id="donate_honor_acknowledgement" name="donate_honor_acknowledgement"><?php safeEcho($form['donate_honor_acknowledgement'])?></textarea>
          <?php helper_error('donate_honor_acknowledgement'); ?>
</div>

/*always show on first load of the page but once the checkbox is check, will need to hide and delete info entered*/

<fieldset id="fieldset-in_registration">
<label for="impact" style="font-weight:bold">B. Impact Areas</label>
            <table>
            	<tr>
                	<td style="width:380px;text-align:left"><label for="d"  id="deslist4" name="deslist4">Crime and Drug Use <a href="javascript:alert('Ensuring prevention and treatment programs and appropriate support services are available to people who are at risk for drug addiction and supporting efforts to reduce crime.');">what is this?</a></label></td>
        
        <td style="float:right">  $<input id="d" name="d" class="text" type="text" value="<?php safeEcho($form['d'])?>" style="width:90px;" onChange="CalculateTotal()" />
     <?php helper_error('d');?> </td>
                </tr>
                <tr>
                	<td style="width:380px;text-align:left"><label for="e"  id="deslist5" name="deslist5">Early Childhood Development <a href="javascript:alert('Children are healthy, loved, nurtured, safe and have access to quality childcare and early education. This includes programs that increase parenting skills, providing books to all children and providing developmental screening for 3 and 4 year olds.');">what is this?</a></label></td>
        
        <td style="float:right">  $<input id="e" name="e" class="text" type="text" value="<?php safeEcho($form['e'])?>" style="width:90px;" onChange="CalculateTotal()" />
     <?php helper_error('e');?> </td>
                </tr></table>

Code:

/*JAVASCRIPT FUNCTION*/
function showHide()
{
if (document.getElementById('checkmemoriam').checked)
	{
	if (document.getElementById('TotalC').value == "0.00")
		{
		document.getElementById('fieldset-in_honor').style.display=""; // this is for showing
		document.getElementById('fieldset-in_registration').style.display="none";
		}
		else
		{
		var answer = confirm("You entered a total gift designation of $" + document.getElementById('TotalC').value + ". At this time, gifts made \"in honor of someone special\" are not eligible for the designation option. Clicking the OK button will delete all your designation(s). Do you want to continue?")
		if (answer)
				{
				document.getElementById('TotalC').value="0.00";
				  				                                      document.getElementById('d').value="0";
  				document.getElementById('e').value="0";
							document.getElementById('fieldset-in_honor').style.display=""; // this is for hiding
				document.getElementById('fieldset-in_registration').style.display="none";

				}
				else
				{
				document.getElementById('checkmemoriam').checked=false;
				}
			}

	}
	else
	{
	if ((document.getElementById('donate_honor_name').value="") && (document.getElementById('donate_honor_acknowledgement').value=""))
		{
		document.getElementById('fieldset-in_honor').style.display="none"; // this is for hiding
		document.getElementById('fieldset-in_registration').style.display="";
		}
		else
		{
		var answer = confirm("The field you are trying to close will delete all information you entered \"in honor of someone special\" but it will allow you to designate. Clicking the OK button will show the designation list. Do you still want to continue?")
				if (answer)
				{
				document.getElementById('donate_honor_name').value = "";
				document.getElementById('donate_honor_acknowledgement').value = "";
				document.getElementById('fieldset-in_honor').style.display="none"; // this is for hiding
				document.getElementById('fieldset-in_registration').style.display="";
				}
				else
				{
				document.getElementById('checkmemoriam').checked=false;
				document.getElementById('fieldset-in_honor').style.display=""; // this is for showing
				document.getElementById('fieldset-in_registration').style.display="none";
				}
		}

	}
}

I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show.
I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful.


Code:

<select id="Program" name="Program" size="1" onchange="
      $other = document.getElementById('other_program').style;
      $invoice = document.getElementById('invoice');
      if (selectedIndex==6) {
        $other.visibility='visible';
        if ($invoice.value == 'General Fund') $invoice.value='';
      } else {
        $other.visibility='hidden';
        if (selectedIndex==1) {
          $invoice.value='Renegade Fund';
        } else {
          $invoice.value='Please Specify';
        }
      }
      ">
      <option selected="selected" value="Not Selected"> - - Select One - - </option>
      <option value="Athletics">Athletics</option>
      <option value="Drum Line">Drum Line</option>
      <option value="Renegade Fund">Renegade Fund</option>
      <option value="General Scholarships">General Scholarships</option>
      <option value="President's Circle">President's Circle</option>
      <option value="Other">Other</option>
    </select>

    <span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>

    <!-- the following is the new select group ive set up
    <span id="alumni">
        <select id="select-alumni" name="select-alumni" size="1">
            <option selected="selected" value="Not Selected">Yes or No</option>
            <option value="Yes-alumni">Yes</option>
            <option value="Not-alumni">No</option>
        </select>
    </span>
    -->

i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.

can any one guide me i am new to programming

Thanks in advance!!!

Hello!

I am using this script for showing who is on the air. I would like to know if anyone has an idea how to make this show a picture file instead of text for who is on air. The script is great in that the gmt offset works. I would just rather have it show an image instead of text.


Code:

<span id = "dj" style="font-size:12px; font-weight:bold; font-family:  Tahoma; color: #6600FF;"></span>

<script type = "text/javascript"> 
function display() {
var show = "No show scheduled at present";
var GMToffset = -5;  // Your current GMT offset, whether Standard or Daylight	
var now = new Date();
var dy = now.getDay(); // day of week 0-6
now.setHours(GMToffset + now.getHours() + now.getTimezoneOffset() / 60);
var hh = now.getHours();
var mn = now.getMinutes();
hh = hh + (mn/60);  // minutes expressed as fractions of an hour

// The GMT offset ensures that every visitor, regardless of their timezone, will see the schedule
// that is appropriate for the site owner's local time.

// Tip - for testing purposes you can put here
//dy = 5;
//hh = 9.25;
// or whatever to check that the right show appears at that day/time.

if (dy >=1 && dy <=5) { // days in Javascript are 0 Sunday - 6 Saturday
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <17) {show = "The Matt Knight Show"}
if (hh >=17 && hh <18) {show = "Saving the 70's with Mike Walker"}
if (hh >=18 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Matt Knight at Night"}
}
if (dy >= 2 && dy <=5) {
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <18) {show = "The Matt Knight Show"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Hank and Jim Show"}

}

if (dy >= 3 && dy <=5) {
if (hh >=0 && hh <3) {show = "Hank and Jim Show"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <18) {show = "The Matt Knight Show"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "The Pete Sayek Show"}
}
if (dy >= 4 && dy <=5) {
if (hh >=0 && hh <1) {show = "The Pete Sayek Show"}
if (hh >=1 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <15) {show = "The Matt Knight Show"}
if (hh >=15 && hh <18) {show = "Stafford's World - Mark Stafford"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Matt Knight at Night"}
}

if (dy == 5) {
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <15) {show = "The Matt Knight Show"}
if (hh >=15 && hh <18) {show = "Beachey Live from the U.K."}
if (hh >=18 && hh <19) {show = "Catt Live from California"}
if (hh >=19 && hh <20) {show = "Catt Live from California"}
if (hh >=20 && hh <21) {show = "Catt Live from California"}
if (hh >=21 && hh <23) {show = "Psychedelic Detached Garage - George Cannon"}
if (hh >=23 && hh <24) {show = "Matt Knight at Night"}
}

if (dy == 6) { // Saturday Note the two = signs to mean equals
if (hh >=0 && hh <10) {show = "Non-Stop Music"}
if (hh >= 10 && hh <13) {show = "Stafford's World - Mark Stafford"}
if (hh >=13 && hh <13.30) {show = "Cheeze Pleeze - Snarfdude and Dafodil"}
if (hh >=13.30 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <23) {show = "Flashback with Matt Knight"}
if (hh >=23 && hh <24) {show = "Imagination Theater"}
} //End of Saturday Shows

if (dy == 0) { //Sunday Shows
if (hh >= 0 && hh <10) {show = "Non-Stop Music"}
if (hh >=10 && hh <11) {show = "Motown Memories with Tom Fallon"}
if (hh >=11 && hh <22) {show = "Non-Stop Music"}
if (hh >=22 && hh <23) {show = "Imagination Theater"}
if (hh >=23 && hh <24) {show = "Non-Stop Music"}
}  // End of Sunday Shows

var a = "" + show + " \u00A0 \u00A0 \u00A0 \u00A0 ";  // spaces must be separted by Unicode spaces to prevent collapse
document.getElementById("dj").innerHTML = a;

setTimeout("display()", 60000);  // update every 60 seconds
}
</script>

Hi, fairly new to js.

I have an image

Code:

 <img src="uploading.png" />

I want to be able to have this hidden as default then when i submit my page

<form action="handleupload.php">

it appears

Is it possible to have a form's textarea background image fadeout to an alternate bg image, when that textarea is selected (by clicking the textarea or tabbing to it)? I've never seen this done before, but I'd really like to do it..

Hello Everyone,

I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks!

Code:

<form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)">
		<p><b>First Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_first" size="40"></p>

		<p><b>Last Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_last" size="40"></p>

		<p><b>School Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_school" size="40"></p>

		<p><b>Your School E-Mail</b><font class="super">1</font><br/>
		<INPUT TYPE="TEXT" NAME="school_email" size="40"></p>

		<p><b>Your File</b><font class="super">4,5</font><br/>
		<input id="userfile1" name="userfile1" type="file" size="30"></p>
	
		<p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p>
	</form>

Code:

function validate_required_field(field,alertText) {
	with (field) {
		if (value==null||value=="") {
            YAHOO.example.container.wait.hide();
			alert(alertText);
	  		return false;
		}
		else {
			return true;
		}
	}
}


function validate_email(field,alertText)
{
	with (field) {
		apos=value.indexOf("@");
		dotpos=value.lastIndexOf(".");
		if (apos<1||dotpos-apos<2) {
            YAHOO.example.container.wait.hide();
			alert(alertText);
			return false;
		}
		else {
			return true;
		}
	}
}


function validate_form(thisform) {
	with (thisform) {
		if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) {
			name_first.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) {
			name_last.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) {
			name_school.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) {
			school_email.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_email(school_email,"Please enter a valid email address before continuing")==false) {
			school_email.focus();
			return false
		}
	}
}

I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page.

Any way you know of to do this?

I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful.

Thanks very much.