...

View Full Version : trying to figure out a script using images



dancingbay
07-10-2012, 03:21 PM
I have an embroidery business and would like to show my customers what a monogram would look like with different fonts. In a previous life, I was a PHP/MySQL developer and has some JavaScript skills, but they never were very good and now they are very rusty. I've not done in JavaScript since 2008.

I have 5 fonts to choose from and each monogram has 3 letters. On some fonts, the left and right images are the same and on some they are different. The middle letter is always different (about 50% larger than the ones on the sides). I'm trying to figure out how to write a javascript that will do the following:

Allow the user to select a font name and from that font name allow the user to select 3 letters using either 3 drop down selects or 3 input boxes. When a user enters each letter, the corresponding image appears and when all 3 letters are selected, the full monogram is displayed. When the customer selects the font, I would like to use that value for the folder where that font's images are stored.

I've gotten this far:

<script>
function changeImageL(filename) {
document.mainimageL.src = filename;
}
function changeImageC(filename) {
document.mainimageC.src = filename;
}
function changeImageR(filename) {
document.mainimageR.src = filename;
}
</script>
</head>
<body>
<h1 align="center">In-line Image Viewer</h1>

<p align="center">
<form name="img">
<select name="font">
<option value="">Select a Font</option>
<option value="Circle">Circle Monogram</option>
<option value="Monogram1">Diamond Monogram</option>
<option value="Monogram2">Script 1 Monogram</option>
<option value="Script">Script 2 Monogram</option>
<option value="Serif">Serif Monogram</option>
</select>
<br />
<select name="LL" onChange="changeImageL(this.value)">
<option value="">Left&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="monograms/Circle/A-L.png">A</option>
<option value="monograms/Circle/B-L.png">B</option>
<option value="monograms/Circle/C-L.png">C</option>
<option value="monograms/Circle/D-L.png">D</option>
<option value="monograms/Circle/E-L.png">E</option>
<option value="monograms/Circle/F-L.png">F</option>
<option value="monograms/Circle/G-L.png">G</option>
<option value="monograms/Circle/H-L.png">H</option>
</select>
<select name="CL" onChange="changeImageC(this.value)">
<option value="">Center</option>
<option value="monograms/Circle/A-C.png">A</option>
<option value="monograms/Circle/B-C.png">B</option>
<option value="monograms/Circle/C-C.png">C</option>
<option value="monograms/Circle/D-C.png">D</option>
<option value="monograms/Circle/E-C.png">E</option>
<option value="monograms/Circle/F-C.png">F</option>
<option value="monograms/Circle/G-C.png">G</option>
<option value="monograms/Circle/H-C.png">H</option>
</select>
<select name="RL" onChange="changeImageR(this.value)">
<option value="">Right&nbsp;&nbsp;</option>
<option value="monograms/Circle/A-R.png">A</option>
<option value="monograms/Circle/B-R.png">B</option>
<option value="monograms/Circle/C-R.png">C</option>
<option value="monograms/Circle/D-R.png">D</option>
<option value="monograms/Circle/E-R.png">E</option>
<option value="monograms/Circle/F-R.png">F</option>
<option value="monograms/Circle/G-R.png">G</option>
<option value="monograms/Circle/H-R.png">H</option>
</select>
</form>
</p>

<p align="center">
<img name="mainimageL" src="blank.png" border="0">
<img name="mainimageC" src="blankC.png" border="0">
<img name="mainimageR" src="blank.png" border="0">
</p>

which is a modification of this script: http://www.javascriptsource.com/miscellaneous/image-viewer.html

I would love for the A-Z drop downs to be replaced with 3 input text boxes that are limited to 1 upper case alpha charater. I don't know if that would make things easier or more difficult.

The other twist is that this has to work on a WordPress site. Theme is called Boutique from the Elegant Themes collection.

My past JavaScript experience has been finding a script that someone else wrote that's close to what I'm looking for and then tweaking it to fit my needs. I've never written one from scratch and I've never found one that I didn't tweak at least a little.

Is there anyone out there who can point me in the right direction, send me to a tutorial, or just help me figure this out? I'm operating on a very thin budget.

Thanks,
Alisa

xelawho
07-10-2012, 03:51 PM
if your image path names are in this format monograms/Circle/A.png

then this should work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
</style>
</head>

<body>
<h1 align="center">In-line Image Viewer</h1>
<select id="font">
<option value="">Select a Font</option>
<option value="Circle">Circle Monogram</option>
<option value="Monogram1">Diamond Monogram</option>
<option value="Monogram2">Script 1 Monogram</option>
<option value="Script">Script 2 Monogram</option>
<option value="Serif">Serif Monogram</option>
</select>
<br />
<input type="text" id="letters" maxlength=3 onkeyup="this.value=this.value.toUpperCase()"/>
<input type="button" value="preview" onclick="showPics()"/>
<div id="picdiv" align="center">
<img name="mainimageL" src="" border="0">
<img name="mainimageC" src="" border="0">
<img name="mainimageR" src="" border="0">
</div>
<script>
function showPics() {
var thefont=document.getElementById("font").value;
var pics=document.getElementById("picdiv").getElementsByTagName("img");
var str=document.getElementById("letters").value
for (i=0; i<pics.length;i++){
pics[i].src='monograms/'+ thefont + '/' + str[i] + '.png'
}
}
</script>
</body>
</html>

if not, it shouldn't be too hard to tweak

Philip M
07-10-2012, 05:21 PM
This should help you move forward - three input boxes restricted to the letters a-z.toUpperCase();

But what if a customer has only two initials?


<html>
<head>
<style = "text/css">
.mess {color:red; font-size:75%; font-weight:bold; }
</style>
</head>
<body>

<form>
First Letter <input type = "text" name = "letter1" size = "1" maxlength = "1" onblur = "checkit(this,1)"> <span id = "m1" style="display:none" class = "mess"></span><br>
Second Letter <input type = "text" name = "letter2" size = "1" maxlength = "1" onblur = "checkit(this,2)"> <span id = "m2" style="display:none" class = "mess"></span><br>
Third Letter <input type = "text" name = "letter3" size = "1" maxlength = "1" onblur = "checkit(this,3)"> <span id = "m3" style="display:none" class = "mess"></span><br>
</form>

<script type = "text/javascript">

function checkit(which,box) {
var message = " Error - please enter a single letter A-Z";
for (var i=1; i<=3; i++) {
var sp = "m" + box;
document.getElementById(sp).style.display="none";
}

var val = which.value.toUpperCase();
document.forms[0]["letter" + box].value = val;

if (/[^A-Z]{1}/.test(val) || (val == "")) {
var sp = "m" + box;
document.getElementById(sp).style.display="inline";
document.getElementById(sp).innerHTML = message;
document.forms[0]["letter" + box].value="";
document.forms[0]["letter" + box].focus();
}
}

</script>


</body>
</html>

The cheese in the mousetrap is always free.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum