مثلاً عندي صورتين :
pic1.gif
pic2.gif
وعندي صفحة change_pic.html
وفيها هذا الـ tag :
<IMG src='pic1.gif'></IMG>
أريد عند النقر على الصورة pic1 تظهر لي الصورة pic2 بدلاً عنها .. وعند النقر على pic2 ترجع الصورة pic1 مرة أخرى .. وهكذا
مثلاً عندي صورتين :
pic1.gif
pic2.gif
وعندي صفحة change_pic.html
وفيها هذا الـ tag :
<IMG src='pic1.gif'></IMG>
أريد عند النقر على الصورة pic1 تظهر لي الصورة pic2 بدلاً عنها .. وعند النقر على pic2 ترجع الصورة pic1 مرة أخرى .. وهكذا
__________________
نحن أمة إقرأ التي لا تقرأ
أوكي استخدم الستايلات CSS لإخفاء الصورة الجديدة ثم إظهارها وإخفاء القديمة عند الضغط عليها .. هذه إحدى الطرق ..
__________________
....
محمد حسام
انترنت بلس
إنترنت بلس :
لو أعرف الطريقة ماكان حطيت سؤال !!!!
وياريت يكون كود JAVA SCRIPT مو CSS
__________________
نحن أمة إقرأ التي لا تقرأ
السلام عليكم
اخى الكريم تحية طيبة
ممكن عمل هذه العملية من خلال برنامج Adobe ImageReady شريط الادوات بأداة rectangle image map tool
ومن خلال صندوق تحكم الاداة تقدر تستنتج الشكل المطلوب
وتستخرجها بصيغة gif بصفحة ويب
خالص التحية
__________________
ماشاء الله و لا حولا و لاقوة إلا بالله .
ويب إيفوليوشن WEC : عندما تمتلك العصا التي تفعل بها كل شيء
معاينة الإصدارة 1.0.6
moslem_tk : أنا ماقلت أبغا اسوي صورة متحركة من نوع gif !!!!
أنا عندي صورة وأردت عند الـ Click Event الصورة تتغير إلى صورة أخرى ..
السالفة مو سالفة تصميم أو غيره .. السالفة سالفة برمجة بحته
ايش فيكم يا اخواني .. لهالدرجة سؤالي مو واضح ؟؟؟؟
__________________
نحن أمة إقرأ التي لا تقرأ
افهم ردك جيدا وهذه الاداة تعمل الامر المطلوب بشكل كامل
Adobe ImageReady مفهوم عند الكثير انه يعمل بنرات وصور متحركة وخلاص
هذا البرنامج له option و تحكم قوى جداا الكثير يجهله
المهم
اخى الكريم لو تملك برنامج Adobe ImageReady اى اصدار
يمكنك ان عمل ما تريد من خلال هذه الاداة rectangle image map tool
يمكنك وضع رابط للصفحة من الصورة وايضا
على فكره ممكن تعمل نفس الفكرة ببرنامج دريم ويفر او فورنت بيج بس انا وضعتلك الاسهل والافضل بالنسبة لك
وابضا يمكنك فعلها بـ css
ولكن الصورة لو كانت بحجم كبير بتكون بطيئه لحد ما
وايضا يوجد اكواد java script بتعمل نفس العملية ولكن لا تستطيع التحكم بها بالشكل الملطلوب
خالص التحية
__________________
ماشاء الله و لا حولا و لاقوة إلا بالله .
ويب إيفوليوشن WEC : عندما تمتلك العصا التي تفعل بها كل شيء
معاينة الإصدارة 1.0.6
و الكود للرابط مثلا ابو صوره تتغير يكون:كود:<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>
__________________
بشار عبدالله العبدالهادي
شركة كويت نت, مسجّل معتمد من الآيكان
أقسم بالله العظيم لأساعد كل مسلم بخدمات النطاقات إن شاء الله لا تتردد بمراسلتي
تابعني بتويتر
نفس المشكلة التي كانت عندي لغاية ان راسلت حبيبنا زيزوار و أعطاني هذا الكود
//////////////
زبط معي مية مية :nice:كود:<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>
شاهد هذا الملف
كود 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>
__________________
المغردون العرب
ياسلام عليك يا 2600ma
هذا هو بالضبط اللي أبغاه .. كود صغير ومفهوم ويفي بالغرض بنسبة 100%
باقي الأخوان : مشكورين على المساعدة .. ماجربت أكوادكم .. بس إن شاء الله أجربها من باب الإستفادة لا أكثر !!
لأنها بصراحة أكواد أطول من كود الأخ زيزوار
__________________
نحن أمة إقرأ التي لا تقرأ
انا استخدمت الكود هذا .. وفهمته كله .. بس فيه نقطة غريبة ومافهمتهاكود:<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)
__________________
نحن أمة إقرأ التي لا تقرأ
متأخر شوي زي العاده
لاكم للفائده جرب هذا الكود
وفي ملف بالمرفق حمله وحطه مع الصوركود 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>
ولو حبيت في طريقة بمجرد مرور الماوس تتغير الصورة
شكرا 2600مغرب
مادا لم تفهم بالضبط
اذا كنت تقصد هذهفهي نفسهاكود:wino = function(obj)و ال المتغير ال obj تحمل قيمة This يعني عوض أن اقولكود:function wino(obj)فإني عوضتها بكود:this.src = "pic1.gif"كود:obj.src="pic1.gif"
طيب ..
ليش الدالة اسمها wino ؟؟؟
جربت اخليها wino1 وما اشتغل الكود
معناها wino كلمة محجوزة
__________________
نحن أمة إقرأ التي لا تقرأ
لا ليست محجوزة لكنها دالة تستدعى من طرف الصورة عند الضغط عليها
غير هنا و هناك و سترى النتيجةكود:onclick="wino(this)"