Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    trying to figure out a script using images

    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:
    Code:
    <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/misc...ge-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

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if your image path names are in this format monograms/Circle/A.png

    then this should work:
    Code:
    <!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

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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?

    Code:
    <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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •