Guest_imported
New member
- Jan 1, 1970
- 0
What a mouthful! I am trying to create a script whereby I can show off my collection of badges using a slideshow type format.
The first dropdown menu you choose the category, which then selects the contents of the second menu where you choose the badge to look at. When you choose the badge, both the image and the text description 'should' change.
This is my first real attempt at javascript. I've 'stolen' bits from free databases and tried to alter it. But now I'm stuck trying to marry the dhtml text bit to the rest of it. Can anyone offer any advice?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined"
v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if(v){a=new Array();aln=0;}
function getFormNum (formName) {
formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms;
if (formName == tempForm) {
formNum = i;
correctForm = tempForm;
break;
}
}
return formNum;
}
function jmp(formName,elementNum) {
getFormNum(formName);
if (formNum>=0) {
with (document.forms[formNum].elements[elementNum]) {
i=selectedIndex;
if (i>=0) document.base.src=options.value;
}
}
}
function O(txt,jpg) {
a[k]=new Option(txt,jpg);k++;
}
function relate(formName,elementNum,j) {
if(v) {
k=1;
if(j==0) { // default category item
a=new Array();
O("Pick Item --->",""
}
if(j==1) { // 1st category items
a=new Array();
O("Pick Item --->",""
O("UK Fanclub 1987","clubuk87.jpg"
O("UK Fanclub 1988","clubuk88.jpg"
O("Cookies"
O("Forms"
O("Games"
}
if(j==2) { // 2nd category items
a=new Array();
O("Pick Item --->",""
O("How Do I...?"
O("Script Help"
O("Script Requests"
O("Intro to JavaScript"
O("What's New?"
}
if(j==3) { // 3rd category items
a=new Array();
O("Pick Item --->",""
O("JS Question?"
O("JS Contribution"
O("Site Comments"
O("Other ..."
}
aln2=a.length;
getFormNum(formName);
if (formNum>=0) {
formNum = formNum + 1;
with (document.forms[formNum].elements[elementNum]) {
for (var i=options.length-1;i>0;i--) options=null;
for (var i=1;i<aln2;i++) options[i-1]=a;
options[0].selected=true;
}
}
} else {
jmp(formName,elementNum);
}
}
// End -->
</SCRIPT>
</head>
<body bgcolor=#ffffff text=#000000 link=#0000FF alink=#0000FF vlink=#0444C6 topmargin=0 leftmargin=0 rightmargin=0 marginwidth=0 marginheight=0 onload="window.defaultStatus='MLP Pins and Badges';return true;fanclub.display_text()">
<p><br><br><br>
<center>
<table border=0 cellpadding=0 cellspacing=0 width=395><tr><td width=160>
<img src="clubuk87.jpg" width="150" height="150" border="1" name="base" alt="Pin"></td><td>
<form name=f1>
<select name=m1 onChange="relate(this.form,0,this.selectedIndex); document.Myform.PIN.focus();">
<option value="/">Pick Category --->
<option value="/">Fan Clubs
<option value="/">Promotional
<option value="/">Greetings Cards
<option value="/">Free with Comic
<option value="/">Unofficial
</select></form>
<b>then</b>
<form name=Myform onChange="change()">
<select name="PIN" onchange="jmp(this.form,0)">
<option value="/">Pick Item --->
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
</select></form>
</td></tr><tr><td colspan=2><br>
<script language="JavaScript" type="text/javascript">
red= new Array();
red[0]="A concentrically arranged rainbow around the edge (from edge inwards: pink, yellow, blue, lilac). Majesty stands in the centre. The 'My Little Pony' logo, in the early type font, is over the rainbow at the top. The words '1987 Club Member' are written over the rainbow at the bottom.<p>Origins: Issued with UK Fan Club<br>Diameter: 5cm approx.<br>Fastener: Brooch pin.";
red[1]="This is the same design as the 1987 club badge, except for three minor differences; <br>\n1. Obviously, the badge is marked '1988'\n2. The words 'Club Member' are emboldened.\n3. The MLP logo is in the later type font.\n\nOrigins: Issued with UK Fan Club\nDiameter: 5cm approx.\nFastener: Brooch pin.";
dom = (document.getElementById)? true:false
ns4 = (document.layers)? true:false
ie4 = (document.all && !dom)? true:false
if (ns4) document.write('<textarea name="dropdownchanger" wrap="soft" rows="11" cols="49" STYLE="overflow: hidden;">' +red[0] + '</textarea><br>')
else document.write('<div id="dropdownchanger" style="width:400px; height:50px;"><p>' +red[0] + '</p></div>')
function change(){
if (ns4) {document.Myform.dropdownchanger.value=red[document.Myform.PIN.options.selectedIndex]}
if (ie4) {document.all['dropdownchanger'].innerHTML ='<p>' + red[document.Myform.PIN.options.selectedIndex] + '</p>'}
else if (dom) {document.getElementById("dropdownchanger".innerHTML ='<p>' + red[document.Myform.PIN.options.selectedIndex] + '</p>'}
}
</script>
</form>
The first dropdown menu you choose the category, which then selects the contents of the second menu where you choose the badge to look at. When you choose the badge, both the image and the text description 'should' change.
This is my first real attempt at javascript. I've 'stolen' bits from free databases and tried to alter it. But now I'm stuck trying to marry the dhtml text bit to the rest of it. Can anyone offer any advice?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined"
v=true;//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if(v){a=new Array();aln=0;}
function getFormNum (formName) {
formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms;
if (formName == tempForm) {
formNum = i;
correctForm = tempForm;
break;
}
}
return formNum;
}
function jmp(formName,elementNum) {
getFormNum(formName);
if (formNum>=0) {
with (document.forms[formNum].elements[elementNum]) {
i=selectedIndex;
if (i>=0) document.base.src=options.value;
}
}
}
function O(txt,jpg) {
a[k]=new Option(txt,jpg);k++;
}
function relate(formName,elementNum,j) {
if(v) {
k=1;
if(j==0) { // default category item
a=new Array();
O("Pick Item --->",""
;}
if(j==1) { // 1st category items
a=new Array();
O("Pick Item --->",""
;O("UK Fanclub 1987","clubuk87.jpg"
;O("UK Fanclub 1988","clubuk88.jpg"
;O("Cookies"
;O("Forms"
;O("Games"
;}
if(j==2) { // 2nd category items
a=new Array();
O("Pick Item --->",""
;O("How Do I...?"
;O("Script Help"
;O("Script Requests"
;O("Intro to JavaScript"
;O("What's New?"
;}
if(j==3) { // 3rd category items
a=new Array();
O("Pick Item --->",""
;O("JS Question?"
;O("JS Contribution"
;O("Site Comments"
;O("Other ..."
;}
aln2=a.length;
getFormNum(formName);
if (formNum>=0) {
formNum = formNum + 1;
with (document.forms[formNum].elements[elementNum]) {
for (var i=options.length-1;i>0;i--) options=null;
for (var i=1;i<aln2;i++) options[i-1]=a;
options[0].selected=true;
}
}
} else {
jmp(formName,elementNum);
}
}
// End -->
</SCRIPT>
</head>
<body bgcolor=#ffffff text=#000000 link=#0000FF alink=#0000FF vlink=#0444C6 topmargin=0 leftmargin=0 rightmargin=0 marginwidth=0 marginheight=0 onload="window.defaultStatus='MLP Pins and Badges';return true;fanclub.display_text()">
<p><br><br><br>
<center>
<table border=0 cellpadding=0 cellspacing=0 width=395><tr><td width=160>
<img src="clubuk87.jpg" width="150" height="150" border="1" name="base" alt="Pin"></td><td>
<form name=f1>
<select name=m1 onChange="relate(this.form,0,this.selectedIndex); document.Myform.PIN.focus();">
<option value="/">Pick Category --->
<option value="/">Fan Clubs
<option value="/">Promotional
<option value="/">Greetings Cards
<option value="/">Free with Comic
<option value="/">Unofficial
</select></form>
<b>then</b>
<form name=Myform onChange="change()">
<select name="PIN" onchange="jmp(this.form,0)">
<option value="/">Pick Item --->
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
</select></form>
</td></tr><tr><td colspan=2><br>
<script language="JavaScript" type="text/javascript">
red= new Array();
red[0]="A concentrically arranged rainbow around the edge (from edge inwards: pink, yellow, blue, lilac). Majesty stands in the centre. The 'My Little Pony' logo, in the early type font, is over the rainbow at the top. The words '1987 Club Member' are written over the rainbow at the bottom.<p>Origins: Issued with UK Fan Club<br>Diameter: 5cm approx.<br>Fastener: Brooch pin.";
red[1]="This is the same design as the 1987 club badge, except for three minor differences; <br>\n1. Obviously, the badge is marked '1988'\n2. The words 'Club Member' are emboldened.\n3. The MLP logo is in the later type font.\n\nOrigins: Issued with UK Fan Club\nDiameter: 5cm approx.\nFastener: Brooch pin.";
dom = (document.getElementById)? true:false
ns4 = (document.layers)? true:false
ie4 = (document.all && !dom)? true:false
if (ns4) document.write('<textarea name="dropdownchanger" wrap="soft" rows="11" cols="49" STYLE="overflow: hidden;">' +red[0] + '</textarea><br>')
else document.write('<div id="dropdownchanger" style="width:400px; height:50px;"><p>' +red[0] + '</p></div>')
function change(){
if (ns4) {document.Myform.dropdownchanger.value=red[document.Myform.PIN.options.selectedIndex]}
if (ie4) {document.all['dropdownchanger'].innerHTML ='<p>' + red[document.Myform.PIN.options.selectedIndex] + '</p>'}
else if (dom) {document.getElementById("dropdownchanger"
.innerHTML ='<p>' + red[document.Myform.PIN.options.selectedIndex] + '</p>'}}
</script>
</form>
