www.VahidOffline.Blogfa.Com کدهای جاوا اسکریپت تصویر و عکس

برای امتحان باید ابتدا کد را کپی کرده و سپس در یک ویرایشگر مانند نوت پد پیست کنید و سپس با پسوند htm ذخیره کنید و بعد فایل ذخیره شده را اجرا کنید.

تذکر:اگر بعد از اجرا کردن فایل مورد نظر در بالای مرورگرتان یک نوار زرد رنگ اومد ابتدا روی نوار کلیک کرده و بعد از کلیک روی گزینه اول گزینه بلی را انتخاب کنید.

Java Script __Image

1.تغيير تصوير هنگام نشانه گيري موس 1 <h1> <a href="URL WEB SITE" onMouseover="document.arrow.src='URL IMG1'" onMouseout="document.arrow.src='URL IMG2'"><img border=1 src="URL IMG3" name="arrow"></a> </h1>

2.تغيير تصوير هنگام نشانه گيري موس 2 <html> <head> <script language="javascript" type="text/javascript"> if(document.images) { arrowRed = new Image arrowBlue = new Image arrowRed.src = "URL IMG1" arrowBlue.src = "URL IMG2" } else { arrowRed = "" arrowBlue = "" document.arrow = "" } </script> </head> <body> <h1> <a href="URL WEB SITE" onMouseover="document.arrow.src=arrowRed.src" onMouseout="document.arrow.src=arrowBlue.src"><img border="0" src="URL IMG2" name="arrow"></a> </h1> </body> </html>

3.منوي باز شو در كنار تصوير كه با حركت و كليك موس بر روي ان تصوير تغيير مي كند <html> <head> <style> .curhand{cursor:hand} </style> <script language="javascript"> function displayit(paragraph,title,imgmenu){ if (document.all[paragraph].style.display=='none') {document.all[paragraph].style.display="block"; document.all[imgmenu].src="URL PIC 2"} else {document.all[paragraph].style.display="none"; document.all[imgmenu].src="URL PIC 2"} } function setoverstyles(paragraph,imgmenu,title){ if (document.all[paragraph].style.display=='none') {document.all[imgmenu].src="URL PIC 2"; document.all[title].style.textDecorationUnderline='true'} else {document.all[imgmenu].src="URL PIC 2"; document.all[title].style.textDecorationUnderline='true'} } function setoutstyles(paragraph,imgmenu,title){ if (document.all[paragraph].style.display=='none') {document.all[title].style.textDecoration='none'; document.all[imgmenu].src="URL PIC 1"} else {document.all[imgmenu].src="URL PIC 2"; document.all[title].style.textDecoration='none'} } sw=0; function displayall(){ if (sw==0) {swall.innerText="Hide all";document.all['x'].style.display='block';sw=1; for (i=1;i<=5;i++) { xmenu='menu'+i ; ximg='imgmenu'+i ; if (document.all[xmenu].style.display=='none') {document.all[xmenu].style.display="block";document.all[ximg].src="URL PIC 2"}}} else {swall.innerText="Show all";document.all['x'].style.display='none';sw=0; for (i=1;i<=5;i++) {xmenu='menu'+i;ximg='imgmenu'+i; if (document.all[xmenu].style.display=='block') {document.all[xmenu].style.display="none";document.all[ximg].src="URL PIC 1"}}} } function displayinline(text){ if (document.all[text].style.display=="none"){document.all[text].style.display="inline"} else {document.all[text].style.display="none"} } </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1"> <tr> <td> <p align="center"> <span id="swall" onmouseover="this.style.textDecorationUnderline='true'" onmouseout="this.style.textDecoration='none'" class="curhand" onclick="displayall()"> Show All</span></td><br> </tr> </table><br> <p id='x' style="display:none"></p> <div onmouseover="setoverstyles('menu1','imgmenu1','title1')" onmouseout="setoutstyles('menu1','imgmenu1','title1')" class="curhand" onclick="displayit('menu1','title1','imgmenu1')" id="title1" style="position:static; width:150; height:15"> <img id="imgmenu1" border="0" src="URL PIC 1" width="12" height="12"> Persian Musics</div> <blockquote> <span id="menu1" style="display:none;">Item 1<br> Item 2<br> Item 3<br> Itrm 4<br> Item 5<br> Item 6<br> Item 7</span> </blockquote> <p></p> <div onmouseover="setoverstyles('menu2','imgmenu2','title2')" onmouseout="setoutstyles('menu2','imgmenu2','title2')" class="curhand" onclick="displayit('menu2','title2','imgmenu2')" id="title2" style="position:static; width:150; height:15"> <img id="imgmenu2" border="0" src="URL PIC 1" width="12" height="12"> Kharegi Musics</div> <p></p> <blockquote> <span id="menu2" style="display:none;">Item 1<br> Item 2<br> Item 3<br> Item 4<br> Item 5<br> Item 6<br> Item 7</span> </blockquote> <p></p> <div onmouseover="setoverstyles('menu3','imgmenu3','title3')" onmouseout="setoutstyles('menu3','imgmenu3','title3')" class="curhand" onclick="displayit('menu3','title3','imgmenu3')" id="title3" style="position:static; width:150; height:15"> <img id="imgmenu3" border="0" src="URL PIC 1" width="12" height="12"> Persian Videos</div> <p></p> <blockquote> <span id="menu3" style="display:none;">Item 1<br> Item 2<br> Item 3<br> Item 4<br> Item 5<br> Item 5<br> Item 6</span> </blockquote> <p></p> <div onmouseover="setoverstyles('menu4','imgmenu4','title4')" onmouseout="setoutstyles('menu4','imgmenu4','title4')" class="curhand" onclick="displayit('menu4','title4','imgmenu4');" id="title4" style="position:static; width:150; height:15"> <img id="imgmenu4" border="0" src="URL PIC 1" width="12" height="12"> Kharegi Videos</div> <p></p> <blockquote> <span id="menu4" style="display:none;"> Item 1<br> Item 2<br> Item 3<br> Item 4<br> Item 5<br> Item 6</span> </blockquote> <p></p> <div onmouseover="setoverstyles('menu5','imgmenu5','title5')" onmouseout="setoutstyles('menu5','imgmenu5','title5')" class="curhand" onclick="displayit('menu5','title5','imgmenu5')" id="title5" style="position:static; width:150; height:15"> <img id="imgmenu5" border="0" src="URL PIC 1" width="12" height="12"> Funyy Videos</div> <p></p> <blockquote> <span id="menu5" style="display:none;"> Item 1<br> Item 1<br> Item 2<br> Item 3<br> Item 4<br> Item 5</span> </blockquote> </body> </html>

4.نمايش تصوير به صورت شيشه اي كه با قرار گرفتن نشانگر موس بر روي ان تصوير حالت شيشه اي را از دست مي دهد <head> <script language="JavaScript1.2"> function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.opacity=20 } </script> </head> <body> <a href="HTTP://BADBOYSIRAN4.BLOGSPOT.COM"> <img src=" http://www.sharemation.com/VAHIDVAHIDVAHID/soper/lopez.JPG?uniq=9w5c7a" border=0 style="filter:alpha(opacity=20)" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a> </body>