Adding dynamic text on image

Report · Dec 25, 2016

I'm making a website for users where they can creat customize logos. For this I need a facility to add dynamic text from text boxes which the user will fill in and the text should then appear on the the selected image. Is there any way, say for Javascript, through which I can fulfill the above scenario? Would appreciate any suggestions of how i could do this.

My HTML so far is:

<html>

<body>

<img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" />

</body>

and my jQuery:

$('#submit').change(function() {

$('#toChange').text( $('#submit').val());

});

but I haven't been succeed so far.

Report · Dec 26, 2016

Does this help:

<!DOCTYPE html>

<html>

<head>

<title>Untitled Document</title>

$(document).ready(function(){

$('.submit').click(function(){

var text = $('.text').val();

$('.product_text').html('<p>' + text + '</p>');

return false;

});

</script>

<style>

* {

box-sizing: border-box;

}

img {

max-width: 100%;

height: auto;

}

body {

font-family: helvetica, sans-serif;

font-size: 14px;

color: #999;

}

.product_wrapper {

width: 300px;

margin: 0 auto;

}

.product_image {

background-color: #f2f2f2;

width: 300px;

margin: 0 auto;

position: relative;

}

.product_text {

position: absolute;

bottom: 20px;

width: 100%;

text-align: center;

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

}

.product_text p {

margin: 0;

padding: 15px 20px;

}

.input_text {

margin: 0;

background-color: #f2f2f2;

padding: 20px;

border: 1px solid #ccc;

}

label {

font-size: 16px;

padding: 0 0 15px 0;

}

.text {

width: 100%;

padding: 10px;

font-size: 14px;

margin: 15px 0;

}

.submit {

background-color: #666;

border: none;

padding: 10px 15px;

color: #fff;

text-transform: uppercase;

}

</style>

</head>

<body>

</div>

<label for="text">Insert Text<br />

</label>

</form>

</div>

</body>

</html>

Adding dynamic text on image

1 Correct answer

Photos