Giriş Yap / Kayıt Ol

WM Aracı'na üyelikler tekrar açıldı! Kayıt olmak için TIKLAYIN!


Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   Forum > > Javascript

Js resim değiştirme onclik hata alıyorum nasıl düzeltebilirim?

  #1  
Okunmamış 01 Mayıs 2019, 11:57
petrona Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 13 Ağustos 2017
Cinsiyet: Erkek
Konum: Kastamonu
Ad, Soyad: Er... Ta...
Mesajlar: 98
Beğeniler: 2 / 23
Ticaret: 0, 0%
sorun çözüldü..
Konu petrona tarafından (04 Mayıs 2019, 01:40 ) değiştirilmiştir.
  #2  
Okunmamış 01 Mayıs 2019, 12:57
KaganSa Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 15 Nisan 2014
Cinsiyet: Erkek
Meslek: Web Developer
Konum: Kastamonu
Ad, Soyad: Ka... Sa...
Mesajlar: 11
Beğeniler: 4 / 2
Ticaret: 0, 0%
https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp

sayfasında ki örnekten yararlanabilirsin kolay gelsin

Kod:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
</style>
</head>
<body>

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div class="row">
  <div class="column">
    <img src="img_nature.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_lights.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>

</body>
</html>
  #3  
Okunmamış 01 Mayıs 2019, 14:41
petrona Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 13 Ağustos 2017
Cinsiyet: Erkek
Konum: Kastamonu
Ad, Soyad: Er... Ta...
Mesajlar: 98
Beğeniler: 2 / 23
Ticaret: 0, 0%
ben kendi yaptığım örnekteki sorunu düzetmek istiyorum
  #4  
Okunmamış 01 Mayıs 2019, 15:24
Avatar Seçilmemiş
Javascript & Cordova
 
Üyelik Tarihi: 28 Mart 2018
Yaş / Cinsiyet: 21 / Erkek
Meslek: Bilişim
Konum: Denizli
Ad, Soyad: Se... Ka...
Mesajlar: 297
Beğeniler: 49 / 47
Ticaret: 0, 0%
HTML Kodu:
        <script language="javascript">
function imageReflesh(imageName)
{
document.getElementById(""+imageName+"").src='a2.jpg';
}
</script>
<image src='a1.jpg' name='Resim' id='Resim' onClick='imageReflesh("Resim")'>
<button type="button" onclick="imageReflesh('Resim')"><img src="a2.jpg" width="150px" height="45px"; ></button>
bune dene
  #5  
Okunmamış 01 Mayıs 2019, 15:39
petrona Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 13 Ağustos 2017
Cinsiyet: Erkek
Konum: Kastamonu
Ad, Soyad: Er... Ta...
Mesajlar: 98
Beğeniler: 2 / 23
Ticaret: 0, 0%
o bendede çalışıyor ama 2. bir alternatif ekleyince çalışmıyor.şunun gibi aternatif resim kırmızı isaretledim.onun üzerine tıklayınca resim değismiyor

<script language="javascript">
function imageReflesh(imageName)
{
document.getElementById(imageName).src='a2.jpg';
}
</script>
<image src='a1.jpg' name='Resim' id='Resim' onClick='imageReflesh("Resim")'>
<button type="button" onclick="imageReflesh('Resim')"><img src="a2.jpg" width="150px" height="45px"; ></button>
<button type="button" onclick="imageReflesh('Resim')"><img src="a3.jpg" width="150px" height="45px"; ></button>
Cevap Yaz Favorilerime Ekle


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   Forum > Javascript


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı




Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şu anki Zaman: 13:39.