تغییر عکس با کلیک بر روی آن (جی کوئری)

M.Javad · آبان 93

سلام

من یه کد دارم که میخوام با کلیک زدن روی اون عکسش عوض شه


<li id="layout"><a href=""><img src="images/00006.png" /></a></li>

اینم کدیه که خودم نوشتم ولی عمل نمیکنه


$(function(){
$('li #layout').click(function(){
  $('li #layout img').attr('src','images/6.png');
});
});

پلیز هلپ

A-fshin · آبان 93


http://jsfiddle.net/maniator/Sevdm/

M.Javad · آبان 93

داداش دمت گرم درست شد فقط چیکار کنم که وقتی روی یه چیز دیگه کلیک زد این برگرده به عکس اولش؟!!

M.Javad · آبان 93


<div class="menu-base">
		 <ul>
			 <li class="layout"><a href=""><img src="images/00006.png" id="layout"/></a></li>
			    <li class="sing"><a href=""><img src="images/00005.png" id="sing"/></a></li>
			    <li class="cover"><a href=""><img src="images/00004.png" id="cover"/></a></li>
			    <li class="poster"><a href=""><img src="images/00003.png" id="poster"/></a></li>
			    <li class="home"><a href=""><img src="images/00001.png" id="home"/></a></li>
			    <li class="bio" style="margin-left:50px"><a href=""><img src="images/00002.png" id="bio"/></a></li>
			    <li class="pro"><a href=""><img src="images/00007.png" id="pro"/></a></li>
			    <li class="mis"><a href=""><img src="images/00008.png" id="mis"/></a></li>
			    <li class="link"><a href=""><img src="images/00009.png" id="link"/></a></li>
			    <li class="contact"><a href=""><img src="images/000010.png" id="contact" /></a></li>
		    </ul>
	    </div>

اینم کد جی کوئری


<!--menu-->
  $('.menu-base ul>li .layout').click(function(e){
	 e.preventDefault();
   $("#layout").attr('src',"images/6.png");
});
$('.menu-base ul>li .sing').click(function(e){
	 e.preventDefault();
   $("#sing").attr('src',"images/5.png");
});
$('.menu-base ul>li .cover').click(function(e){
	 e.preventDefault();
   $("#cover").attr('src',"images/4.png");
});
$('.menu-base ul>li .poster').click(function(e){
	 e.preventDefault();
   $("#poster").attr('src',"images/3.png");
});
$('.menu-base ul>li .home').click(function(e){
	 e.preventDefault();
   $("#home").attr('src',"images/1.png");
});
$('.menu-base ul>li .bio').click(function(e){
	 e.preventDefault();
   $("#bio").attr('src',"images/2.png");
});
$('.menu-base ul>li .pro').click(function(e){
	 e.preventDefault();
   $("#pro").attr('src',"images/7.png");
});
$('.menu-base ul>li .mis').click(function(e){
	 e.preventDefault();
   $("#mis").attr('src',"images/8.png");
});
$('.menu-base ul>li .link').click(function(e){
	 e.preventDefault();
   $("#link").attr('src',"images/9.png");
});
$('.menu-base ul>li .contact').click(function(e){
	 e.preventDefault();
   $("#contact").attr('src',"images/10.png");
});

بازم نشد

EmadGh · آبان 93

نمی دونم کلا چیه !

ولی کد جاوااتو به این شکل اولا خلاصه کن.

کدو تست نکردم، فقط نوشتم

امیدوارم درست باشه.


var list = {
layout: 'images/6.png',
sing: 'images/5.png',
cover: 'images/4.png',
poster: 'images/3.png',
home: 'images/1.png',
bio: 'images/2.png',
pro: 'images/7.png',
mis: 'images/8.png',
link: 'images/9.png',
contact:'images/10.png',
}
$('.menu-base ul>li a').click(function(e){
e.preventDefault();
var c = $(this).parent().attr('class');
var img = '';
if(!$(this).hasData('default_image')){
  img = $('img',this).attr('src');
  $(this).data('default_image',img);
}else
  img = list[c];
$("#"+c).attr('src',img);
});

M.Javad · آبان 93

نمی دونم کلا چیه !

ولی کد جاوااتو به این شکل اولا خلاصه کن.

کدو تست نکردم، فقط نوشتم

امیدوارم درست باشه.


var list = {
layout: 'images/6.png',
sing: 'images/5.png',
cover: 'images/4.png',
poster: 'images/3.png',
home: 'images/1.png',
bio: 'images/2.png',
pro: 'images/7.png',
mis: 'images/8.png',
link: 'images/9.png',
contact:'images/10.png',
}
$('.menu-base ul>li a').click(function(e){
e.preventDefault();
var c = $(this).parent().attr('class');
var img = '';
if(!$(this).hasData('default_image')){
img = $('img',this).attr('src');
$(this).data('default_image',img);
}else
img = list[c];
$("#"+c).attr('src',img);
});

مرسی از جوابت

ببین من یه منو دارم که میخوام برای هر لینکش که یه عکسه وقتی روش کلیک میکنم یه عکس دیگه لود بشه به جاش و وقتی روی یه لینک دیگه اش کلیک میکنم لینک قبلی برگرده به عکس قبلیش و لینک جدید عکسش عوض شه

EmadGh · آبان 93

اگه درست متوجه شده باشم

فقط کافیه اینطور کدی به ادامه تابع اضافه کنی تا عکسا بازگردونده بشن.


$(".menu-base ul>li a").each(function(){
	    if($(this).hasData('default_image')) {
		    $('img', this).attr('src',$(this).data('default_image'));
	    }
    });

کمپلت میشه این...


$('.menu-base ul>li a').click(function(e){
    e.preventDefault();
    var c = $(this).parent().attr('class');
    var img = '';
    if(!$(this).hasData('default_image')){
	    img = $('img',this).attr('src');
	    $(this).data('default_image',img);
    }else
	    img = list[c];
    $("#"+c).attr('src',img);
    $(".menu-base ul>li a").each(function(){
	    if($(this).hasData('default_image')) {
		    $('img', this).attr('src',$(this).data('default_image'));
	    }
    });
});

بازم امیدوارم اجرا بشه چون تست نکردم :-/

M.Javad · آبان 93

اگه درست متوجه شده باشم فقط کافیه اینطور کدی به ادامه تابع اضافه کنی تا عکسا بازگردونده بشن.
 $(".menu-base ul>li a").each(function(){ if($(this).hasData('default_image')) { $('img', this).attr('src',$(this).data('default_image')); } }); 
کمپلت میشه این...
 $('.menu-base ul>li a').click(function(e){ e.preventDefault(); var c = $(this).parent().attr('class'); var img = ''; if(!$(this).hasData('default_image')){ img = $('img',this).attr('src'); $(this).data('default_image',img); }else img = list[c]; $("#"+c).attr('src',img); $(".menu-base ul>li a").each(function(){ if($(this).hasData('default_image')) { $('img', this).attr('src',$(this).data('default_image')); } }); });
بازم امیدوارم اجرا بشه چون تست نکردم :-/

ببخشید پس آدرس عکسارو که اون بالا شما تعریف کردین چی؟!لازم نیست؟!

M.Javad · آبان 93

اگه به کدی که اول پست گذاشتم دقت بکنی متوجه میشی که مثلا لینک اول آدرس عکسش 00006.png هستش و عکسی که قراره با کلیک بر روی اون تغییر کنه 6.png هستش و به ترتیب برای سایر عکسا همینطوره.اون دوست خوبم بالا یه کد داد که برای لینک اول درست انجام شد ولی دیگه حالت برعکسشو نذاشت و من اومدم از اون کد کپی کردم برای لینکای که که دیگه کلا جوالب نداد

فرحان · آبان 93

سلام

می تونید از یک دستور if استفاده کنید و کلیک رو در مرحله دوم نسبت به داکیومنت بسنجید. یعنی این که بگید اگر فلان متغییر صفر بود این تصویر رو بیار و متغییر رو یک کن ، و یک دستور جدا هم بنویسید که اگر اون متغییر 1 بود هر کلیکی که توی داکیومنت شد دستور مخفی کردن تصویر دوم و نمایش تصویر اول و همچنین صفر کردن اون متغییر اجرا بشه.

همچنین دقت کنید که این دو دستوری که گفتم از هم مستقل هستن یکی کلیک بر روی المنت رو میسنجه و دومی کلیک بر روی هر جای داکیومنت ، همچنین دومی نباید اجرا بشه مگر این که اولی اجرا شده باشه.

امیدوارم متوجه شده باشید.

موفق باشید.

M.Javad · آبان 93

سلام
می تونید از یک دستور if استفاده کنید و کلیک رو در مرحله دوم نسبت به داکیومنت بسنجید. یعنی این که بگید اگر فلان متغییر صفر بود این تصویر رو بیار و متغییر رو یک کن ، و یک دستور جدا هم بنویسید که اگر اون متغییر 1 بود هر کلیکی که توی داکیومنت شد دستور مخفی کردن تصویر دوم و نمایش تصویر اول و همچنین صفر کردن اون متغییر اجرا بشه.
همچنین دقت کنید که این دو دستوری که گفتم از هم مستقل هستن یکی کلیک بر روی المنت رو میسنجه و دومی کلیک بر روی هر جای داکیومنت ، همچنین دومی نباید اجرا بشه مگر این که اولی اجرا شده باشه.
امیدوارم متوجه شده باشید.
موفق باشید.

سلام.خوبی جی کوئری اینه که نیازی به شرط های متعدد نداره و فکر نکنم کدش انقدر سخت باشه که بخوام برای هر لینک یه شرط بزارم!!!!!

من مشکلم اینجاست که وقتی عمل انجام میشه چطوری برش گردونم به حالت اول

علی زینلی · آبان 93

من فکر کردم با افکت و اینا میخوای انجامش بدی گفتم باید سی اس اس هم قاطیش کنی سخت میشه...

فقط با هر کلیک عکس عوض بشه؟

ببین به دردت میخوره:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb

M.Javad · آبان 93

نمی دونم کلا چیه ! ولی کد جاوااتو به این شکل اولا خلاصه کن. کدو تست نکردم، فقط نوشتم امیدوارم درست باشه.

 var list = { layout: 'images/6.png', sing: 'images/5.png', cover: 'images/4.png', poster: 'images/3.png', home: 'images/1.png', bio: 'images/2.png', pro: 'images/7.png', mis: 'images/8.png', link: 'images/9.png', contact:'images/10.png', } $('.menu-base ul>li a').click(function(e){ e.preventDefault(); var c = $(this).parent().attr('class'); var img = ''; if(!$(this).hasData('default_image')){ img = $('img',this).attr('src'); $(this).data('default_image',img); }else img = list[c]; $("#"+c).attr('src',img); });

امتحان کردم ولی نشد

M.Javad · آذر 93

عزیزان متخصص من هنوز جواب نگرفتم

میخوام برای هر کدوم از عکس های منو که قرار دادم وقتی روش کلیک میشه عکس دیگه ای که ازش وجود داره به رنگ دیده نمایش داده بشه و وقتی روی یکی دیگه از منو ها کلیک میشه عکس قبل به حالت اول برگرده و عکس جدید تغییر کنه و همینطور تا آخر...

ممنون میشم کمک کنید

SM-Mahdavi · آذر 93

یه نمونه مشابه چیزی که می خوای قرار بده یا با تصویر نشون بده.

علی زینلی · آذر 93

دوست عزیز بهت نشون دادم دیگه:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb

کافیه سورس ها رو عوض کنی و همین کد رو بذاری تو سایتت! با جاوااسکریپت هم نوشته شده

اگه اینو نمیخوای بگو دقیقاً چی میخوای تا بگیمت.

M.Javad · آذر 93

دوست عزیز بهت نشون دادم دیگه: http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb کافیه سورس ها رو عوض کنی و همین کد رو بذاری تو سایتت! با جاوااسکریپت هم نوشته شده اگه اینو نمیخوای بگو دقیقاً چی میخوای تا بگیمت.

داداش اینو گذاشتم فقط برای یکیش جواب میداد :|

علی زینلی · آذر 93

داداش اینو گذاشتم فقط برای یکیش جواب میداد :|

خب اشتباه گذاشتی دیگه اخوی

اینجوری بذار:

<img id="myImage" onclick="changeImage()" src="آدرس عکس اوّلی">
<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("آدرس عکس دومی")) {
	    image.src = "آدرس عکس اوّلی";
    } else {
	    image.src = "آدرس عکس دومی";
    }
}
</script>

شما اون قسمت if رو درستش نکردی واسه همین با مشکل بر خوردی

اینجوری کاملش کن درست میشه

برای مثال:

<img id="myImage" onclick="changeImage()" src="http://gdl.naslno.com/Abstract-Flowers-300x300.jpg">
<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("http://gdl.naslno.com/bloom-flowers-nature-pink-awesome-wallpaper-300x300.jpg")) {
	    image.src = "http://gdl.naslno.com/Abstract-Flowers-300x300.jpg";
    } else {
	    image.src = "http://gdl.naslno.com/bloom-flowers-nature-pink-awesome-wallpaper-300x300.jpg";
    }
}
</script>

موفّق باشی.

ozvha · اردیبهشت 96

در در 11/24/2014 at 11:34، علی زینلی گفته است :

خب اشتباه گذاشتی دیگه اخوی

اینجوری بذار:


<img id="myImage" onclick="changeImage()" src="آدرس عکس اوّلی">
<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("آدرس عکس دومی")) {
	    image.src = "آدرس عکس اوّلی";
    } else {
	    image.src = "آدرس عکس دومی";
    }
}
</script>

شما اون قسمت if رو درستش نکردی واسه همین با مشکل بر خوردی

اینجوری کاملش کن درست میشه

برای مثال:


<img id="myImage" onclick="changeImage()" src="http://gdl.naslno.com/Abstract-Flowers-300x300.jpg">
<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("http://gdl.naslno.com/bloom-flowers-nature-pink-awesome-wallpaper-300x300.jpg")) {
	    image.src = "http://gdl.naslno.com/Abstract-Flowers-300x300.jpg";
    } else {
	    image.src = "http://gdl.naslno.com/bloom-flowers-nature-pink-awesome-wallpaper-300x300.jpg";
    }
}
</script>

موفّق باشی.

سلام

دوستان من این کد را چند بار میخوام در یک صفحه انجام بشه . ولی متاسفانه با تکرار این کد فقط عکس اولی تغییر میکنه

چه تغییری باید صورت بگیره ؟

علی زینلی · اردیبهشت 96

در 5 ساعت قبل، ozvha گفته است :

سلام

دوستان من این کد را چند بار میخوام در یک صفحه انجام بشه . ولی متاسفانه با تکرار این کد فقط عکس اولی تغییر میکنه

چه تغییری باید صورت بگیره ؟

سلام، مقدار var image رو تغییر بدید، مثلاً: var image1 یا var image2 و برای هر بار اجرا یه اسم جداگانه بذارید براش

تغییر عکس با کلیک بر روی آن (جی کوئری)

پست های پیشنهاد شده

M.Javad 684

لینک به ارسال

A-fshin 1936

لینک به ارسال

M.Javad 684

لینک به ارسال

M.Javad 684

لینک به ارسال

EmadGh 4

لینک به ارسال

M.Javad 684

لینک به ارسال

EmadGh 4

لینک به ارسال

M.Javad 684

لینک به ارسال

M.Javad 684

لینک به ارسال

فرحان 997

لینک به ارسال

M.Javad 684

لینک به ارسال

علی زینلی 2114

لینک به ارسال

M.Javad 684

لینک به ارسال

M.Javad 684

لینک به ارسال

SM-Mahdavi 5427

لینک به ارسال

علی زینلی 2114

لینک به ارسال

M.Javad 684

لینک به ارسال

علی زینلی 2114

لینک به ارسال

ozvha 0

لینک به ارسال

علی زینلی 2114

لینک به ارسال

به گفتگو بپیوندید