تغيير صورة إلى صورة أخرى عند حدث Click

**مبرمج إنترنت** · 14-06-2005

مثلاً عندي صورتين :

pic1.gif
pic2.gif

وعندي صفحة change_pic.html

وفيها هذا الـ tag :

<IMG src='pic1.gif'></IMG>

أريد عند النقر على الصورة pic1 تظهر لي الصورة pic2 بدلاً عنها .. وعند النقر على pic2 ترجع الصورة pic1 مرة أخرى .. وهكذا

**إنترنت بلس** · 14-06-2005

أوكي استخدم الستايلات CSS لإخفاء الصورة الجديدة ثم إظهارها وإخفاء القديمة عند الضغط عليها .. هذه إحدى الطرق ..

**مبرمج إنترنت** · 14-06-2005

إنترنت بلس :

لو أعرف الطريقة ماكان حطيت سؤال !!!!

وياريت يكون كود JAVA SCRIPT مو CSS

**moslem_tk** · 14-06-2005

السلام عليكم

اخى الكريم تحية طيبة

ممكن عمل هذه العملية من خلال برنامج Adobe ImageReady شريط الادوات بأداة rectangle image map tool
ومن خلال صندوق تحكم الاداة تقدر تستنتج الشكل المطلوب
وتستخرجها بصيغة gif بصفحة ويب

خالص التحية

**مبرمج إنترنت** · 14-06-2005

moslem_tk : أنا ماقلت أبغا اسوي صورة متحركة من نوع gif !!!!

أنا عندي صورة وأردت عند الـ Click Event الصورة تتغير إلى صورة أخرى ..

السالفة مو سالفة تصميم أو غيره .. السالفة سالفة برمجة بحته

ايش فيكم يا اخواني .. لهالدرجة سؤالي مو واضح ؟؟؟؟

**moslem_tk** · 14-06-2005

افهم ردك جيدا وهذه الاداة تعمل الامر المطلوب بشكل كامل
Adobe ImageReady مفهوم عند الكثير انه يعمل بنرات وصور متحركة وخلاص
هذا البرنامج له option و تحكم قوى جداا الكثير يجهله

المهم

اخى الكريم لو تملك برنامج Adobe ImageReady اى اصدار
يمكنك ان عمل ما تريد من خلال هذه الاداة rectangle image map tool
يمكنك وضع رابط للصفحة من الصورة وايضا

على فكره ممكن تعمل نفس الفكرة ببرنامج دريم ويفر او فورنت بيج بس انا وضعتلك الاسهل والافضل بالنسبة لك

وابضا يمكنك فعلها بـ css
ولكن الصورة لو كانت بحجم كبير بتكون بطيئه لحد ما

وايضا يوجد اكواد java script بتعمل نفس العملية ولكن لا تستطيع التحكم بها بالشكل الملطلوب

خالص التحية

**KuwaitNET** · 14-06-2005

كود:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

و الكود للرابط مثلا ابو صوره تتغير يكون:

كود:

<a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/home_mouseover.jpg',1)"><img src="images/home_normal.jpg" name="Image10" width="82" height="20" border="0"></a>

الصراحه انا مو مصمم مواقع ولكن شفت الكود بأحد المواقع اللي مصممينها

**2600ma** · 15-06-2005

نفس المشكلة التي كانت عندي لغاية ان راسلت حبيبنا زيزوار و أعطاني هذا الكود
//////////////

كود:

<IMG
src="pic1.gif" 
title="Click4Change"
onclick="wino(this)"
id="no"
>
<SCRIPT LANGUAGE="JavaScript">
<!--
wino = function(obj){
if(obj.id=='yes'){
	obj.src='pic1.gif';
	obj.id="no";
	}else{
	obj.src='pic2.gif';
	obj.id="yes";
	}
}
//-->
</SCRIPT>

زبط معي مية مية :nice:

**all-the-vb** · 15-06-2005

شاهد هذا الملف

كود PHP:


<html>

<head>

<title>Chobi Dekha 1.0</title>

<style type="text/css">

<!--



A

{

  font-family: arial, helvetica, verdana;

  font-size: 11pt;

  text-decoration: none;

  color: #E9D000;

  padding: 1px;

}



A:hover

{

  font-family: arial, helvetica, verdana;

  font-size: 11pt;

  text-decoration: none;

  color: #009900;

  background-color: #F0F0F0;

  padding: 1px;

}



TD

{

  padding: 6px;

}



-->

</style>



<script language=javascript type="text/javascript">

<!--



/*

 * Program - Chobi Dekha

 * File Name - chobi_dekha.html

 * Author - Shovon

 * Web site - http://www.shuvorim.tk

 * Email - ahsanul_haque_shovon@yahoo.com

 * (C) http://www.shuvorim.tk

 * All rights reserved.

 */





var img = new Image(); /* NEW IMAGE OBJECT */

var newWin; /* VARIABLE FOR A NEW WINDOW */

var url = "images/river1.jpg"; /* STARTING IMAGE */





/****************************************/

/* FUNCTION: loadImage(arg1, arg2)      */

/* arg1 TAKES THE URL OF THE THUMBNAIL  */

/* arg2 TAKES THE ORIGINAL IMAGE'S URL  */

/****************************************/



function loadImage(fileName, url)

{



  this.url = url; /* LOCATION OF THE ORIGINAL IMAGE */

  img.src = fileName;

  document.preview.src = img.src; /* SETS THE THUMBNAIL */



}





/********************************/

/* FUNCTION: bigImage()         */

/* DOES NOT TAKE ANY ARGUMENTS  */

/********************************/



function bigImage()

{



  newWin = window.open(url, "enlarge", "menubar = 0, toolbar = 0, status = 0, resizable = 1, scrollbars=1, width = 600, height = 400");



}



//-->

</script>



</head>

<body>



<table align=center align=center bgcolor=#216450 cellpadding=0 cellspacing=0>



<tr>

<td colspan=2 valign=top align=center>

<font size=6 color=#d0d0d0><b>Chobi Dekha</b></font>

</td>

</tr>



<tr>

<td valign=top>



<a href="javascript: bigImage()" title="Click on the image to enlarge">

<img src="thumbnail/river1.jpg" style="border: 1px solid #E9D000;" name="preview" border=0 width=150 height=100 alt="Click on the image to enlarge"></a>



<br><font color=#d0d0d0>

<i>Click on the image to enlarge</i>

</font>

</td>



<td valign=top align=center>

<ul type=circle>



<li><a href="#" onclick="loadImage('./thumbnail/river1.jpg', './images/river1.jpg')">Bangladeshi River 1</a>



<li><a href="#" onclick="loadImage('./thumbnail/river2.jpg', './images/river2.jpg')">Bangladeshi River 2</a>



<li><a href="#" onclick="loadImage('./thumbnail/river3.jpg', './images/river3.jpg')">Bangladeshi River 3</a>



<li><a href="#" onclick="loadImage('./thumbnail/river4.jpg', './images/river4.jpg')">Bangladeshi River 4</a>



<li><a href="#" onclick="loadImage('./thumbnail/river5.jpg', './images/river5.jpg')">Bangladeshi River 5</a>



</ul>

</td>

</tr>



<tr>

<td colspan=2 valign=top align=center>

<!-- You are not authorized to remove the code below -->

<font size=1>

<a href="http://www.shuvorim.tk" target="_new">(C) http://www.shuvorim.tk</a>

</font>

<!-- You are not authorized to remove the code above -->

</td>

</tr>



</table>

</body>

</html>

**مبرمج إنترنت** · 15-06-2005

ياسلام عليك يا 2600ma

هذا هو بالضبط اللي أبغاه .. كود صغير ومفهوم ويفي بالغرض بنسبة 100%

باقي الأخوان : مشكورين على المساعدة .. ماجربت أكوادكم .. بس إن شاء الله أجربها من باب الإستفادة لا أكثر !!
لأنها بصراحة أكواد أطول من كود الأخ زيزوار

**مبرمج إنترنت** · 15-06-2005

كود:

<IMG src="pic1.gif" title="Click4Change" onclick="wino(this)" id="no">

<SCRIPT LANGUAGE="JavaScript">
<!--
     wino = function(obj)
            {
                      if(obj.id=='yes')
                                {
                                     	obj.src='pic1.gif';
 	                                obj.id="no";
                	}
                      else
                                {
                                    	obj.src='pic2.gif';
                                        	obj.id="yes";
                      	}
           }
//-->
</SCRIPT>

انا استخدمت الكود هذا .. وفهمته كله .. بس فيه نقطة غريبة ومافهمتها

وهي هذا السطر

كود:

     wino = function(obj)

**هادي جدا** · 15-06-2005

متأخر شوي زي العاده

لاكم للفائده جرب هذا الكود

كود HTML:

<html dir="rtl">

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
</head>

<body onload="dynAnimation()" language="Javascript1.2">

<p><a href="Javascript:clickSwapImg(document['fpAnimswapImgFP1'])">
<img border="0" src="001.jpg" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="002.jpg" width="400" height="256"></a></p>

</body>

</html>

وفي ملف بالمرفق حمله وحطه مع الصور

ولو حبيت في طريقة بمجرد مرور الماوس تتغير الصورة

**Zizwar** · 15-06-2005

شكرا 2600مغرب
مادا لم تفهم بالضبط
اذا كنت تقصد هذه

كود:

wino = function(obj)

فهي نفسها

كود:

function wino(obj)

و ال المتغير ال obj تحمل قيمة This يعني عوض أن اقول

كود:

this.src = "pic1.gif"

فإني عوضتها ب

كود:

obj.src="pic1.gif"

**مبرمج إنترنت** · 16-06-2005

طيب ..
ليش الدالة اسمها wino ؟؟؟
جربت اخليها wino1 وما اشتغل الكود

معناها wino كلمة محجوزة

**Zizwar** · 16-06-2005

لا ليست محجوزة لكنها دالة تستدعى من طرف الصورة عند الضغط عليها

كود:

onclick="wino(this)"

غير هنا و هناك و سترى النتيجة

الموضوع: تغيير صورة إلى صورة أخرى عند حدث Click

أدوات الموضوع

بحث في الموضوع

تغيير صورة إلى صورة أخرى عند حدث Click

المواضيع المتشابهه

هل يمكن تغيير صورة كل خبر في نيوك

ضوابط المشاركة