Resim Değiştirme Uygulamaları / Event
<select name="schemesel" onChange="document.getElementById('DegisecekResim').src=this.value" size="1">
<option value="cicek2.jpg" selected>SİYAH </option>
<option value="cicek3.jpg">MAVİ </option>
<option value="c1.jpg">GRİ </option>
<option value="c2.jpg">SARI </option>
<option value="c3.jpg">ŞAFAK MAVİSİ </option>
<option value="c4.jpg">KIRMIZI </option>
<option value="cicek1.jpg">AÇIK SARI </option>
<option value="cicek2.gif">İNCİ BEYAZI</option>
<option value="b1.gif">MOR </option>
</select>
<img src="cicek.gif" id="DegisecekResim" />
<option value="cicek2.jpg" selected>SİYAH </option>
<option value="cicek3.jpg">MAVİ </option>
<option value="c1.jpg">GRİ </option>
<option value="c2.jpg">SARI </option>
<option value="c3.jpg">ŞAFAK MAVİSİ </option>
<option value="c4.jpg">KIRMIZI </option>
<option value="cicek1.jpg">AÇIK SARI </option>
<option value="cicek2.gif">İNCİ BEYAZI</option>
<option value="b1.gif">MOR </option>
</select>
<img src="cicek.gif" id="DegisecekResim" />
Örnek
<p>Durum: <meter id="DurumCubugu" min="0" low="40" high="95" max="100" value="5"></meter></p>
<button onclick="Islem('-')">-</button>
<button onclick="Islem('+')">+</button>
<br /><br />
<img id="Resim" src="https://hips.hearstapps.com/hmg-prod/images/bright-forget-me-nots-royalty-free-image-1677788394.jpg?crop=0.535xw:1.00xh;0.359xw,0&resize=980:*" style="width:0px; height:0px" />
<p id="demo"></p>
<script>
var Artim=0;
function Islem(Is) {
switch(Is) {
case '+' : Artim = 10; break;
case '-' : Artim = -10; break;
}
ResimEn = parseInt(document.getElementById("Resim").style.width);
ResimBoy = parseInt(document.getElementById("Resim").style.width);
document.getElementById("Resim").style.width = ResimEn + Artim +"px";
document.getElementById("Resim").style.height = ResimBoy + Artim + "px";
document.getElementById("DurumCubugu").value +=Artim;
}
</script>
<button onclick="Islem('-')">-</button>
<button onclick="Islem('+')">+</button>
<br /><br />
<img id="Resim" src="https://hips.hearstapps.com/hmg-prod/images/bright-forget-me-nots-royalty-free-image-1677788394.jpg?crop=0.535xw:1.00xh;0.359xw,0&resize=980:*" style="width:0px; height:0px" />
<p id="demo"></p>
<script>
var Artim=0;
function Islem(Is) {
switch(Is) {
case '+' : Artim = 10; break;
case '-' : Artim = -10; break;
}
ResimEn = parseInt(document.getElementById("Resim").style.width);
ResimBoy = parseInt(document.getElementById("Resim").style.width);
document.getElementById("Resim").style.width = ResimEn + Artim +"px";
document.getElementById("Resim").style.height = ResimBoy + Artim + "px";
document.getElementById("DurumCubugu").value +=Artim;
}
</script>
Örnek
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#Secim {
z-index: 20;
position: absolute;
top: 0;
right: 0;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#Siyah {
width: 100%;
height: 100%;
background-color: black;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
color:white;
opacity: 1;
transition: opacity 10s ease-out;
}
</style>
</head>
<body>
<div id="Siyah"><h1> Yükleniyor...</h1></div>
<form>
<select id="Secim">
<option value="1">Resim1</option>
<option value="2">Resim2</option>
<option value="3">Resim3</option>
<option value="4">Resim4</option>
<option value="5">Resim5</option>
</select>
<img id="Resim" style="display: none" /> < resimlerin yüklenmesini kontrol etmek için gizli resim>
</form>
<script>
Resimler = [
"https://images8.alphacoders.com/591/thumb-1920-591850.jpg",
"https://images.alphacoders.com/533/thumb-1920-533992.jpg",
"https://images6.alphacoders.com/602/thumb-1920-602804.jpg",
"https://images7.alphacoders.com/662/thumb-1920-662948.jpg",
"https://images7.alphacoders.com/552/thumb-1920-552180.jpg"
];
//document.getElementById('Secim').addEventListener('change', FonksiyonAdi);
document.getElementById('Secim').addEventListener('change', function () { //her select degeri degistiginde
ResimNo = document.getElementById('Secim').value - 1; //dizi elemanlari sifirdan baslar
document.getElementsByTagName('body')[0].style = 'background-image:Url(' + Resimler[ResimNo] + ')';
document.getElementById('Siyah').style.cssText= "display:flex; opacity:1;"; //siyah ekrani kaplasin, gorunsun
document.getElementById('Resim').src = Resimler[ResimNo];
document.getElementById('Resim').addEventListener('load', function() {
//document.getElementById('Resim').onload = function () {
//alert("resim yuklendi");
document.getElementById('Siyah').style.cssText= "display:none; opacity:0;";
//document.getElementById('Siyah').style="display:none"; //siyah kaplamayi kaldir
});
});
</script>
</body>
</html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#Secim {
z-index: 20;
position: absolute;
top: 0;
right: 0;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#Siyah {
width: 100%;
height: 100%;
background-color: black;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
color:white;
opacity: 1;
transition: opacity 10s ease-out;
}
</style>
</head>
<body>
<div id="Siyah"><h1> Yükleniyor...</h1></div>
<form>
<select id="Secim">
<option value="1">Resim1</option>
<option value="2">Resim2</option>
<option value="3">Resim3</option>
<option value="4">Resim4</option>
<option value="5">Resim5</option>
</select>
<img id="Resim" style="display: none" /> < resimlerin yüklenmesini kontrol etmek için gizli resim>
</form>
<script>
Resimler = [
"https://images8.alphacoders.com/591/thumb-1920-591850.jpg",
"https://images.alphacoders.com/533/thumb-1920-533992.jpg",
"https://images6.alphacoders.com/602/thumb-1920-602804.jpg",
"https://images7.alphacoders.com/662/thumb-1920-662948.jpg",
"https://images7.alphacoders.com/552/thumb-1920-552180.jpg"
];
//document.getElementById('Secim').addEventListener('change', FonksiyonAdi);
document.getElementById('Secim').addEventListener('change', function () { //her select degeri degistiginde
ResimNo = document.getElementById('Secim').value - 1; //dizi elemanlari sifirdan baslar
document.getElementsByTagName('body')[0].style = 'background-image:Url(' + Resimler[ResimNo] + ')';
document.getElementById('Siyah').style.cssText= "display:flex; opacity:1;"; //siyah ekrani kaplasin, gorunsun
document.getElementById('Resim').src = Resimler[ResimNo];
document.getElementById('Resim').addEventListener('load', function() {
//document.getElementById('Resim').onload = function () {
//alert("resim yuklendi");
document.getElementById('Siyah').style.cssText= "display:none; opacity:0;";
//document.getElementById('Siyah').style="display:none"; //siyah kaplamayi kaldir
});
});
</script>
</body>
</html>
Yorumunuzu Ekleyin
