យើងមានរូបនៅក្នុង Google drive ដោយយើងចាប់បាន ID វាមករួចហើយ បង្ហាញវានៅក្នុង HTML។ នៅក្នុងនោះយើងមានដូចជា CSS JavaScript។
CSS
<style>
body{
background-color: rgba(0, 0, 0, 0.41);
}
.btn-form, .main-view{
width: 80%;
margin-left: auto;
margin-right: auto;
}
.text-input{
width: 85%;
padding: 10px;
border-radius: 8px;
}
.btn{
padding: 10px;
border-radius: 8px;
}
.main-view{
text-align: center;
}
img{
position: relative;
width: 50%;
}
</style>
HTML
<body>
<div class="btn-form">
<input type="text" class="text-input" id="inputValue">
<input type="button" value="Search" class="btn" id="btn1">
</div>
<div class="main-view">
<img src="" alt="" id="image">
</div>
</body>
JavaScript
<script>
var URL = 'https://drive.google.com/uc?export=view&id='
const btnSearch = document.getElementById('btn1')
var inValu = document.getElementById("inputValue")
inValu.focus()
btnSearch.addEventListener('click',function(){
let image = URL+inValu.value
document.getElementById('image').setAttribute('src', image)
})
</script>
Full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background-color: rgba(0, 0, 0, 0.41);
}
.btn-form, .main-view{
width: 80%;
margin-left: auto;
margin-right: auto;
}
.text-input{
width: 85%;
padding: 10px;
border-radius: 8px;
}
.btn{
padding: 10px;
border-radius: 8px;
}
.main-view{
text-align: center;
}
img{
position: relative;
width: 50%;
}
</style>
<body>
<div class="btn-form">
<input type="text" class="text-input" id="inputValue">
<input type="button" value="Search" class="btn" id="btn1">
</div>
<div class="main-view">
<img src="" alt="" id="image">
</div>
</body>
<script>
var URL = 'https://drive.google.com/uc?export=view&id='
const btnSearch = document.getElementById('btn1')
var inValu = document.getElementById("inputValue")
inValu.focus()
btnSearch.addEventListener('click',function(){
let image = URL+inValu.value
document.getElementById('image').setAttribute('src', image)
})
</script>
</html>
0 Comments