Text to Image than Send to Friend |
Text to Image than Send to Friend |
richsale |
Sep 18 2019, 05:43 PM
Post
#1
|
Group: Members Posts: 4 Joined: 14-January 17 Member No.: 26,264 |
I have a css/javascript that lets a user by way of a form input a name on an image, they can than send the web page via email to a friend.
The problem I'm having is when the web page is sent the name the user input is missing. I don't know how to work around this. https://happy-birthday-ecards.com/new14.htm <!DOCTYPE html> <html> <head> </head> <body> <center> <div class="main"> <link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css" > <style> H3.testfont,P.testfont{ font-family: 'Reenie Beanie', serif; font-size: 47px; font-style: normal; font-weight: 400; text-shadow: 4px 4px 4px #bbb; text-decoration: none; text-transform: none; letter-spacing: 0.073em; word-spacing: 0.034em; line-height: 0em; } </style> <P class="testfont"><font color="red">Happy Birthday Ecards</font></p> <!--Prompt the user to enter the string--> Add Name<input type="text" id="myText" onfocus="this.value=''" value="Enter Text Here" maxlength="15"> <!--When the button is clicked accept the string--> <button onclick="myFunction()">Submit</button> <div class="container"> <img src="https://happy-birthday-ecards.com/boss-baby1a.jpg" width="400" alt="alt image" /> <p class="centered" id="demo"></p> </div> <!--A Function that take the users text input and places it on the image--> <script> function myFunction() { var x = document.getElementById("myText").value; document.getElementById("demo").textContent = x; } </script> </body> <style> /*Begin css*/ /* Container holding the image and the text */ .container { margin-top: 50px; margin-bottom: 20px; margin-right: 600px; margin-left: 600px; position: relative; text-align: center; border-style: solid; border-color:black; border-width: thick; } /* Centered text */ .centered { position: absolute; /*Moves the default text to the center of the page*/ top: 80%; left: 48%; /*Sets the inputted text to the center of the image horizontally*/ transform: translate(-50%, -50%); Color:gold; /*Sets the font for the text*/ font-family: industry, sans-serif; font-style: normal; font-weight: 700; Font-Size:50px; /*Remove upon completion*/ border-style: ; border-color:; } /*end css*/ </style> <p> <!----------------Send to Friend-----------------------------------------------> <a href="sendtofriend/sendtofriend.php?title=<?php echo urlencode('kung-fu-panda'); ?>"><font color="black"><font size="5px">Click Here to Send this Card</a> <!---------------End Send to Friend--------------------------------------------> </html> |
Lo-Fi Version | Time is now: 31st May 2024 - 11:14 PM |