JavaScript | Butona tıklandığında resim yüklemek

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Java JavaScript | Butona tıklandığında resim yüklemek

Bu konudaki kullanıcılar: 1 misafir

2
Cevap 2767
Tıklama 0
Öne Çıkarma

1. sayfa

JavaScript | Butona tıklandığında resim yüklemek

Cevap Yaz

cildiriyorum

7 yıl

Konu Sahibi

Herkese merhabalar,Javascript'e herkes kolay dediği için sonradan öğrendiğim dillerden birisi oldu.(olay çok trajedi)

Sıkıntı şu ki bir yazı kısmı oluşturdum ve yanına da bir buton koydum.Bu kısma yazı yazılıp butona tıklandığında,ekranda uyarı olarak yazdığın yazı çıkabiliyor.İnternette araştırdığım bir kısım araştırma sonrasında,butona tıklandığında ekrana resim çıkartacak bir proje bulamadım.
Mantık şu:

function yazim() {
var yazi = document.getElementById("deger").value
if(yazi == "forum"){ forumcu(); return false;}
}
function forumcu() {
   //Burası zurnanın zirt dedigi yer
   //document.getElementById("resim").src="y.png"; bu kod islemiyor
   //document.getElementById("resim").innerHTML = "<img src='y.png'>"; bu kod da islemiyor
}

Şimdiden herkese çok teşekkür ederim.İyi forumlar

< Bu mesaj bu kişi tarafından değiştirildi cildiriyorum -- 15 Ağustos 2018; 13:30:29 >

hitman80

7 yıl

Teğmen

Biraz karmaşık ama 5 dakika içinde bunu bulabildim belki bişeyler ifade eder incelersen

 
  
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <style> 
 body {font-family: Arial, Helvetica, sans-serif;} 
  
 #myImg { 
     border-radius: 5px; 
     cursor: pointer; 
     transition: 0.3s; 
 } 
  
 #myImg:hover {opacity: 0.7;} 
  
 /* The Modal (background) */ 
 .modal { 
     display: none; /* Hidden by default */ 
     position: fixed; /* Stay in place */ 
     z-index: 1; /* Sit on top */ 
     padding-top: 100px; /* Location of the box */ 
     left: 0; 
     top: 0; 
     width: 100%; /* Full width */ 
     height: 100%; /* Full height */ 
     overflow: auto; /* Enable scroll if needed */ 
     background-color: rgb(0,0,0); /* Fallback color */ 
     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
 } 
  
 /* Modal Content (image) */ 
 .modal-content { 
     margin: auto; 
     display: block; 
     width: 80%; 
     max-width: 700px; 
 } 
  
 /* Caption of Modal Image */ 
 #caption { 
     margin: auto; 
     display: block; 
     width: 80%; 
     max-width: 700px; 
     text-align: center; 
     color: #ccc; 
     padding: 10px 0; 
     height: 150px; 
 } 
  
 /* Add Animation */ 
 .modal-content, #caption {     
     -webkit-animation-name: zoom; 
     -webkit-animation-duration: 0.6s; 
     animation-name: zoom; 
     animation-duration: 0.6s; 
 } 
  
 @-webkit-keyframes zoom { 
     from {-webkit-transform:scale(0)}  
     to {-webkit-transform:scale(1)} 
 } 
  
 @keyframes zoom { 
     from {transform:scale(0)}  
     to {transform:scale(1)} 
 } 
  
 /* The Close Button */ 
 .close { 
     position: absolute; 
     top: 15px; 
     right: 35px; 
     color: #f1f1f1; 
     font-size: 40px; 
     font-weight: bold; 
     transition: 0.3s; 
 } 
  
 .close:hover, 
 .close:focus { 
     color: #bbb; 
     text-decoration: none; 
     cursor: pointer; 
 } 
  
 /* 100% Image Width on Smaller Screens */ 
 @media only screen and (max-width: 700px){ 
     .modal-content { 
         width: 100%; 
     } 
 } 
 </style> 
 </head> 
 <body> 
  
 <input type="Button" id = "myButton" value = "resim çıkar"/> 
 <img id="myImg"  src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px;display:none"> 
  
 <!-- The Modal --> 
 <div id="myModal" class="modal"> 
   <span class="close">&times;</span> 
   <img class="modal-content" id="img01"> 
   <div id="caption"></div> 
 </div> 
  
 <script> 
 // Get the modal 
 var modal = document.getElementById('myModal'); 
  
 // Get the image and insert it inside the modal - use its "alt" text as a caption 
 var button = document.getElementById('myButton'); 
 var img = document.getElementById('myImg'); 
 var modalImg = document.getElementById("img01"); 
 var captionText = document.getElementById("caption"); 
 button.onclick = function(){ 
     modal.style.display = "block"; 
     modalImg.src = img.src; 
     captionText.innerHTML = this.alt; 
 } 
  
 // Get the <span> element that closes the modal 
 var span = document.getElementsByClassName("close")[0]; 
  
 // When the user clicks on <span> (x), close the modal 
 span.onclick = function() {  
     modal.style.display = "none"; 
 } 
 </script> 
  
 </body> 
 </html>

orcnd

7 yıl

Yarbay


function forumcu() {
    var resimurl="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png";
    var image = document.getElementById("resim");
    var downloadingImage = new Image();
    downloadingImage.onload = function(){
        image.src = this.src;   
    };
    downloadingImage.src = resimurl;
}

resimurl düzenlersin

çalışır hali
https://jsbin.com/duwotoyupo/edit?html,console,output

< Bu mesaj bu kişi tarafından değiştirildi orcnd -- 16 Ağustos 2018; 5:48:44 >

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Java JavaScript | Butona tıklandığında resim yüklemek