JQuery ile seçenek menüsü ile imge değiştirilmesi
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.
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.
