Jump to content

Images loaded through a URL


ltpruitt

Recommended Posts

Hello,

 

I have project that is way beyond my skill set. However, I am a quick learner if pointed in the right direction.

 

I do personalized mailings via postcards, newsletters etc... Direct Mail - Snail Mail

 

The idea is a personalized website - Long story short.

 

Customer is sent to website - Generic photo of Coffee Cup appears - A box above it asks for Family Name and Go

Go loads in a set of 3 images on the current page that were originally generic (Your Name Here). Image now display a pre-prepared image of the coffee cup

with the personalized family name on it. There would be 3 images needing to be called up based on the name entered into the top input box.

 

I will have prepared all the possible last names available from the clients customer list (215 names x 3 images = 645 total images). I can name these

however needed to display in the correct areas of the page.

 

If anyone can point me in the right direction - I would greatly appreciate it.

 

Thanks

Lee

 

 

Link to comment
Share on other sites

Sorry about that - I have a way of confusing the simplest of points.

 

I made a graphic to show what I am attempting to do.

 

1. Web Page has 1 Field Form asking for Family name

2. Submit that form and 3 previously default images below change to pre-prepared custom images

 

Sample Input "Pruitt"

Submit

 

Image display area 1 changes to http://www.customschooltumblers.com/samples/Image1/i1_pruitt.jpg

Image display area 1 changes to http://www.customschooltumblers.com/samples/Image2/i2_pruitt.jpg

Image display area 1 changes to http://www.customschooltumblers.com/samples/Image3/i2_pruitt.jpg

 

Need to change input to all lower case before custom addresses are created

 

See image for more detail.

 

Thanks

Lee

 

Website_pruitt.jpg

Link to comment
Share on other sites

What I was trying to say is that if they were "sent to the website" via a link in an e-mail then the link could contain the name or file-path, and they would not need to enter it.

 

Try something like...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>img{width:30%;border:2px solid #bbb;border-radius:3px;margin:3px;}#pics{display:none;margin:0 auto;width:91%;border:1px solid #bbb;border-radius:3px;text-align:center;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';window.onload = init;function init() {document.getElementById('btn1').onclick = put;}function put(){var name = document.getElementById('inname').value.trim().toLowerCase();//alert(name);document.getElementById('img1').src = 'http://www.customschooltumblers.com/samples/Image1/i1_' + name + '.jpg';document.getElementById('img1').alt = 'i1_' + name + '.jpg';document.getElementById('img2').src = 'http://www.customschooltumblers.com/samples/Image2/i2_' + name + '.jpg';document.getElementById('img2').alt = 'i2_' + name + '.jpg';document.getElementById('img3').src = 'http://www.customschooltumblers.com/samples/Image3/i3_' + name + '.jpg';document.getElementById('img3').alt = 'i3_' + name + '.jpg';document.getElementById('pics').style.display = 'block';}</script></head><body><input type="button" id="btn1" value="Enter"><input type="text" id="inname" placeholder="Name"/><div id="pics"><img src="#" id="img1" alt="p1"/><img src="#" id="img2" alt="p2"/><img src="#" id="img3" alt="p3"/></div></body>    </html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...