Resim üzerine yazı yazmak

06-10-2018, 22:24:57

#1

Misafir

selamlar html input text e yazdigim yazinin
resim uzerinde önizlemesini gostertmek istiyorum. bunu nasil yapabilirim?

06-10-2018, 22:33:21

#2

moss218

Bir tane katman oluşturup onun arkaplanına istediğiniz resmi vererek javascript ile üstüne yazabilirsiniz.

Örnek olarak:

<input type="text" id="metin" /><br /><br />

<div style="background:url('https://bilgi-sayar.net/wp-content/uploads/2014/01/javascript.jpg') no-repeat center;background-size:100%;width:450px;height:390px;position:relative">
<span style="position:absolute;bottom:10px;left:10px;font-size:20px;font-weight:600;text-align:center" id="resimyazisi"></span>
</div>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("#metin").keyup(function(){
$("#resimyazisi").text($(this).val());
});
});
</script>

07-10-2018, 16:05:05

#3

Misafir

moss218 adlı üyeden alıntı: mesajı görüntüle

Bir tane katman oluşturup onun arkaplanına istediğiniz resmi vererek javascript ile üstüne yazabilirsiniz.

Örnek olarak:

<input type="text" id="metin" /><br /><br />

<div style="background:url('https://bilgi-sayar.net/wp-content/uploads/2014/01/javascript.jpg') no-repeat center;background-size:100%;width:450px;height:390px;position:relative">
<span style="position:absolute;bottom:10px;left:10px;font-size:20px;font-weight:600;text-align:center" id="resimyazisi"></span>
</div>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("#metin").keyup(function(){
$("#resimyazisi").text($(this).val());
});
});
</script>

Hocam teşekkür ederim fakat kusura bakmayın biyerde takıldım. Örnek veriyorum: (buraya input yazılan yazı) - (burasıda sabit kalacak bir yazı) şeklinde yapamadım bi türlü. Örnek attım pm den size.

07-10-2018, 16:09:26

#4

moss218

Misafir adlı üyeden alıntı: mesajı görüntüle

Hocam teşekkür ederim fakat kusura bakmayın biyerde takıldım. Örnek veriyorum: (buraya input yazılan yazı) - (burasıda sabit kalacak bir yazı) şeklinde yapamadım bi türlü. Örnek attım pm den size.

Şu şekilde güncelleme yapabilirsiniz

$("#resimyazisi").text("input metni öncesi"+$(this).val()+"input metni sonrası");

07-10-2018, 16:43:30

#5

Misafir

moss218 adlı üyeden alıntı: mesajı görüntüle

Şu şekilde güncelleme yapabilirsiniz

$("#resimyazisi").text("input metni öncesi"+$(this).val()+"input metni sonrası");

hocam pm bakarmısınız?

11-10-2018, 15:47:21

#6

scout

Misafir adlı üyeden alıntı: mesajı görüntüle

selamlar html input text e yazdigim yazinin
resim uzerinde önizlemesini gostertmek istiyorum. bunu nasil yapabilirim?

Daha önce böyle bir şey yapmıştım. Al kullan.

https://yadi.sk/d/h7pJlQYF3UpP2r

1. Renk seç : https://i.hizliresim.com/WD5O72.png
2. Yazı yaz: https://i.hizliresim.com/DDZv76.png
3. Resim çıktısı: https://i.hizliresim.com/2aA0Jj.png