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

مبرمج إنترنت · 14-06-2005, 04:10 AM

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

pic1.gif
pic2.gif

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

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

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

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

إنترنت بلس · 14-06-2005, 07:22 AM

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

مبرمج إنترنت · 14-06-2005, 02:32 PM

إنترنت بلس :

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

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

moslem_tk · 14-06-2005, 02:55 PM

السلام عليكم

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

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

خالص التحية

مبرمج إنترنت · 14-06-2005, 06:27 PM

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

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

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

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

moslem_tk · 14-06-2005, 08:16 PM

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

المهم

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

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

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

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

خالص التحية

KuwaitNET · 14-06-2005, 09:06 PM

كود:

<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, 12:23 AM

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

كود:

<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>

زبط معي مية مية

all-the-vb · 15-06-2005, 05:10 AM

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

كود 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, 01:29 PM

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

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

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

مبرمج إنترنت · 15-06-2005, 02:58 PM

كود:

<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, 03:19 PM

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

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

كود بلغة 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, 05:12 PM

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

كود:

wino = function(obj)

فهي نفسها

كود:

function wino(obj)

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

كود:

this.src = "pic1.gif"

فإني عوضتها ب

كود:

obj.src="pic1.gif"

مبرمج إنترنت · 15-06-2005, 11:33 PM

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

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

Zizwar · 16-06-2005, 03:20 PM

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

كود:

onclick="wino(this)"

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

مبرمج إنترنت · 18-06-2005, 01:41 AM

اها .. صحيح

بس أنا لخبطت شوي .. أتذكر مرة شفت كود جافاسكريبت وفيه كلمة wino أيضاً .. فتهيأ لي بأنها كلمة محجوزة

مبرمج إنترنت · 18-06-2005, 01:42 AM

تذكرت وين شفت الكلمة ..

شفتها في توقيعك >>> ;(Wino(Script

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق