Bilgisayar » imge https://www.bilgisayar.me Wed, 29 Aug 2018 20:31:06 +0000 tr-TR hourly 1 https://wordpress.org/?v=4.2.29 JQuery ile seçenek menüsü ile imge değiştirilmesi https://www.bilgisayar.me/index.php/2015/06/23/jquery-kullanarak-secenek-menusu-ile-imge-degismesi/ https://www.bilgisayar.me/index.php/2015/06/23/jquery-kullanarak-secenek-menusu-ile-imge-degismesi/#comments Tue, 23 Jun 2015 19:25:51 +0000 http://www.bilgisayar.me/?p=866 YÜKLE DEMO]]> Jquery ile seçenek menüsünde bir değeri seçtiğimizde, <SPAN> veya <DIV> etikeninin içindeki imgeyi seçilen değere göre nasıl değiştirileceğini anlatmaya çalışağım.
 
 
Kodlamayı bitirdiğimde aşağıdaki resimde görüldüğü gibi bir sonuç elde etmiş olacağız.
demo

 

 
 
 
HTML kodunu <BODY> etikenin hemen altina kopyalayın.

<select id="cartturu" name="cartturu" style="font-size:36px" >
    <option value=""></option>
    <option value="axess">axess</option>
    <option value="bonuscard">Bonus Card</option>
    <option value="cardfinans">Card Finans</option>
    <option value="denizbank">Deniz Bank</option>
    <option value="finansbank">FinansBank</option>
</select>
<span id="kart"></span>

Aşağıdaki JQuery scriptini </BODY> etikeninin hemen üstüne kopyalayın.

<script>
// JQery' i yüklemeyi unutmayın
$(document).ready(function(){
$("#cartturu").change(function (e)
{ 
    var kart = $(this).val();
    $("#kart").html('<img src="img/loading.gif"/>');
    if ( kart == 'axess'){
        $("#kart").html('<img src="img/axess.jpg"/>');
    } else if (kart == 'bonuscard'){
        $("#kart").html('<img src="img/bonuscard.jpg"/>');
    } else if (kart == 'cardfinans'){
        $("#kart").html('<img src="img/cardfinans.jpg"/>');
    } else if (kart == 'denizbank'){
        $("#kart").html('<img src="img/denizbank.jpg" />');
    } else if (kart == 'finansbank'){
        $("#kart").html('<img src="img/finansbank.jpg" />');
    } else {
        $("#kart").html('');
    }
});
});			
</script>

Tümü bir arada

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<select id="cartturu" name="cartturu" style="font-size:36px" >
  <option value=""></option>
  <option value="axess">axess</option>
  <option value="bonuscard">Bonus Card</option>
  <option value="cardfinans">Card Finans</option>
  <option value="denizbank">Deniz Bank</option>
  <option value="finansbank">FinansBank</option>
</select>
<span id="kart"></span>
</div>
<script>
$(document).ready(function(){
$("#cartturu").change(function (e)
{ 
	var kart = $(this).val();
	 $("#kart").html('<img src="img/loading.gif"/>');
    if ( kart == 'axess'){
        $("#kart").html('<img src="img/axess.jpg"/>');
    } else if (kart == 'bonuscard'){
        $("#kart").html('<img src="img/bonuscard.jpg"/>');
    } else if (kart == 'cardfinans'){
        $("#kart").html('<img src="img/cardfinans.jpg"/>');
    } else if (kart == 'denizbank'){
        $("#kart").html('<img src="img/denizbank.jpg" />');
    } else if (kart == 'finansbank'){
        $("#kart").html('<img src="img/finansbank.jpg" />');
	} else {
        $("#kart").html('');
    }
});
});			
</script>
</body>
</html>

Sadece Kart imgelerini yüklemek isterseniz, buradan yükleyebilirsiniz.

]]> https://www.bilgisayar.me/index.php/2015/06/23/jquery-kullanarak-secenek-menusu-ile-imge-degismesi/feed/ 0