با رفتن موس روي يه هايپرلينك

makan

New Member
سلام و من مي خواستم بدونم چطوري مي شه كه وقتي ميريم توي يه سايت و روي يه كلمه موس رفته مي شه يه پنجره كوچك باز مي شه توش ليست زير مجموعه ي اون لينك هستش مثل سايت پارس آنلاين كه وقتي ميريم روي يك كلمه (‌هايپر لينك شده ) يه زير مجموعه براش باز مي شه و ...
 

Negin_ET

Member
سلام;
اين منوهايي كه شما منظورتونه با Java Script نوشته شده...حالا توي نرم افزار Dreamweaver
براي راحتي كار شما اين امكان رو بهتون داده كه با استفاده از اين نرم افزار و Java همين منوها رو طراحي كنيد ... اگه خواستيد بگيد تا يه نمونه از اين منوها رو به صورت كد براتون بفرستم.

موفق باشي
 

Ali_ix

Well-Known Member
سلام

در ادامه صحبتهاي نگين خانوم :

شما ميتوني با DHTML منوهاي خيلي قشنگ و جالب ايجاد كنيد ! البته من زياد به DHTML وارد نيستم ...

مثلا ميتونيد انيميشن كار كنيد يا Fade بديد و ....

موفق باشيد....

علي.
cool.gif
 

Negin_ET

Member
سلام:
اينم نمونه اي كه قولش رو داده بودم...ساختن يك منو توسط Dreaweave:

اول كار بايد وارد قسمت Insert شده و از دستور Common گزينه Drow Layer رو انتخاب كنيد و در همون قسمت اول Menu و بعد از اون زير مجموعه اي كه اين منو در بر داره دقيقا زير همين منو رسم كنيد...بعد براي هر كدوم از اين لايه ها در قسمت Properties يك اسم انتخاب كنيد( Properties در پايين صفحه اصلي dreamweaver قرار داره در صورتيكه وجود نداشت بايد از منويModify گزينه Selection Properties رو انتخاب كنيم تا در پايين صفحه فعال بشه).
بعد از گذاشتن اسم روي منو و زيرمجموعه ان دكمه F12 رو بزنيد ! حالا در سمت راست صفحه در قسمت Advanced Layout گزينه Layers كليك كنيد در اين جا شما بايد اسمهايي رو كه روي منو و زير مجموعا هاي اون گذاشتيد رو مشاهده كنيد به همراه يكي يك عكس چشم در گوشه سمت چپ اين اسمها! حالا تمام اون زير مجموعه هاي منو رو خاموش كنيد( با كليك كردن روي هر علامت چشم باز اون چشم بسته ميشه يعني خاموش ميشه)
حالا وارد Behavior كه يكي از tabهاي موجود در ليست Advanced ماست بشيدم و روي علامت + كليك كنيد و از ليست موجود گزينه Show Events For رو انتخاب كنيد و از ليستي كه باز ميشه گزينه IE5 رو كليك كنيد تا فعال بشه.
حالا دوباره در قسمتBehavior رفته و اينبار گزينه Show-Hide Layers رو انتخاب كنيد ... در اين قسمت يك پنجره باز ميشه كه اساميه همه لايه هاي شما در اون قسمت قرار گرفته حالا شما بايد با توجه به لايه اي كه انتخاب مي كنيد اين دستور رو با استفاده از دكمه هايShow و Hide وارد كنيد كه كدوم لايه ها هنگام نمايش لايه مورد نظرتون مخفي باشه و كدومش مشاهده بشه!
وقتي كه كار اين مرحله هم تموم شد بايد به كل منو دستور اين رو بدين(اين دستور اخر رو بايد روي body وارد كرد كه كل منو رو شامل بشه به همين منظور قبل از شروع مرحله اخر يكبار روي صفحه اصلي كليك كنيد) كه وقتي روي منوي اصلي ميريد اتوماتيك باز بشه و زير مجموعه خودش رو بهتون نشون بده...براي اين كار بايد از همون ليست Behavior علامت + رو انتخاب كنيم و از اونجا گزينه مربوطه رو انتخاب كنيد( در اين مرحله حالتهاي مختلفي ميشه به منوداد مثلا فرمان داد كه وقتي روي منو كليك ميكنم ليست رو برام باز كن يا خيلي موارد ديگه كه بسته به علاقه طراح داره.)


اميدوارم اين توضيحات كافي باشه و مشكلي ايجاد نكنه بين كار...با اين حال اگه خواستيد بگيد تا يك نمونه براتون درست كنم كه باهاش روي dreamweaver خودتون كار كنيد و جزييات دستتون بياد...خبرم كنيد فقط :wink:

موفق باشي
 

saman_sweden

Active Member
makan گفت:
سلام و من مي خواستم بدونم چطوري مي شه كه وقتي ميريم توي يه سايت و روي يه كلمه موس رفته مي شه يه پنجره كوچك باز مي شه توش ليست زير مجموعه ي اون لينك هستش مثل سايت پارس آنلاين كه وقتي ميريم روي يك كلمه (‌هايپر لينك شده ) يه زير مجموعه براش باز مي شه و ...
نوشته هاي دوستمون Negin_ET بسيار عاليه و در ادامه بحثهاي ايشون سوال شما از دو قسمت است طريقه باز كردن صفحه ويندوز
اين كد زير را توي HEAD قرار ميدهيد
کد:
<SCRIPT LANGUAGE="JavaScript">



<!-- Begin
function win() {
msg=window.open("","msg","height=200,width=200,left=80,top=80");
msg.document.write("<html><title>Windows!</title>");
msg.document.write("<body bgcolor='white' onblur=window.close()>");
msg.document.write("<center>page content here</center>");
msg.document.write("</body></html><p>");

// If you just want to open an existing HTML page in the 
// new window, you can replace win()'s coding above with:
// window.open("page.html","","height=200,width=200,left=80,top=80");

}
// End -->
</script>

اين كد توي BODY است
کد:
<center>
<form>
<input type="button" value="Open Window" onclick="win()">
</form>
</center>

<!-- Or you may use: <a href="javascript:win()">Open Window</a> -->

دو تا كد بالا براتون يه صفحه حداگانه ويندوز باز ميكند
حالا يه صفحه ديگري بنام page.html درست ميكنيد و اسامي و لينكهايتان را توش مينويسيد توحه داشته باشيد target صفحه اي را كه ميخواهيد لينكها سايت را توش نشون بده را فراموش نكنيد
مانند مثال

کد:
<a href="http://xxxxxxxxx/xxxxxxxxxx.html" target="xxxxx.html"></a>

در مورد يه زير مجموعه براش

اون فايل page.html را كه ساخته ايد اين كد ها را قرار ميدهيد

باز توي Head
کد:
<style>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--


var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

function change(){
   if(!document.all)
      return
   if (event.srcElement.id=="foldheader") {
      var srcIndex = event.srcElement.sourceIndex
      var nested = document.all[srcIndex+1]
      if (nested.style.display=="none") {
         nested.style.display=''
         event.srcElement.style.listStyleImage="url(open.gif)"
      }
      else {
         nested.style.display="none"
         event.srcElement.style.listStyleImage="url(fold.gif)"
      }
   }
}

document.onclick=change

//-->
</script>

و حالا توي BODY كد هاي زير را قرار ميدهيد
کد:
<ul>
   <li id="foldheader">News</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.xxx1.com">x1</a></li>
      <li><a href="http://www.xxxxxx2.com">x2</a></li>
      <li><a href="http://www.xxxxxxxxxx3.com">x3</a></li>
   </ul>

   <li id="foldheader">Games</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.bbbb1t.com">b1</a></li>
      <li><a href="http://www.bbbbbbb2.com">b2</a></li>
      <li><a href="http://www.bbbbbb3.com">b3</a></li>
   </ul>

   <li id="foldheader">Software</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.cccccccc.com">C 1</a></li>
      <li><a href="http://wwwccccccccccc.com">C 2</a></li>
      <li id="foldheader">Nested</li>
      <ul id="foldinglist" style="display:none" style=&{head};>
         <li><a href="http://www.ffffffff.com">F 1</a></li>
         <li><a href="http://www.ffffff.com">F 2</a></li>
      </ul>
      <li><a href="http://www.g.com">Fr 3</a></li>
      <li><a href="http://www.gggggggg.com">F4</a></li>
   </ul>
</ul>
 

جدیدترین ارسال ها

بالا