PDA

View Full Version : Realizzare un menù del genere...


Kriz
01-12-2004, 15:37
Salve,
sono rimasto impressionato dal menù utilizzato da OCZ sul suo sito. Sapreste dirmi se è difficile realizzarlo? Credo sia uno script java. Lascio a voi i commenti

OCZ Site Menù (http://www.ocztechnology.com/index.html)

kingv
01-12-2004, 17:06
e' un menu in javascript, generalmente vengono fatti con programmi come fireworks

cipi
01-12-2004, 17:40
Anch'io penso che sia qualcosa come:

onMouseOver="swap(...
onMouseOut="swap('...

cipi
01-12-2004, 17:44
Per la precisione (ma non so se sia "legale") ecco l'html:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<META NAME="description" CONTENT="OCZ Technology is committed to bringing to market the highest quality, highest performing computer products possible. OCZ Technology is one of the primary providers of premium computer products to discriminating PC enthusiasts.">
<META NAME="keywords" CONTENT="memory, ram, high, performance, quality, cooler, heatsinks, video, card, semiconductors, el-ddr, ddr, PC-3700, PC-3500, PC-3200, PC-2700, platinum, copper, heat, spreader, awards, dual channel, sodimm, rdram, sdr, gladiator, glacier, dominator, eliminator, reseller, distributor, emplyment, job, PC-4400, PC-4500, DDR, PC 4400, PC 4500, DDR2, DDR 2, DDR II, DDRII, PC2100, PC2700, PC3200, PC4000, PC4400, PC3700, PC3000, PC2400">
<meta name="robots" content="all">
<META NAME ="author" CONTENT="Amorphys Design - www.amorphys.com">
<META NAME="expires" CONTENT="never">
<META NAME="language" CONTENT="english">
<META NAME="distribution" CONTENT="Global">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<META NAME="email" CONTENT="office@ocztechnology.com">
<META NAME="publisher" CONTENT="Ocz Technology Inc.">
<META NAME="copyright" CONTENT="Copyright ©2003 - Ocz Technology Inc.">
<title>OCZ Technology | Welcome!</title>

</head>
<base href="http://www.ocztechnology.com/">
<script> zepath='http://www.ocztechnology.com/'; </script>

<link href="i/menu/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="i/menu/dropdownC.js"></script>
<script language="javascript" src="i/menu/dropdown_initialize.js"></script>

<script language="JavaScript" src="p/functions.js"></script>
<link rel="StyleSheet" href="p/style.css" type="text/css">
<body topmargin="0" leftmargin="0" marginheight=0 marginwidth=0 bgcolor="#FFFFFF" onload="init();">


<table border="0" cellpadding="0" cellspacing="0" width="752" align=center>
<tr><td background='i/dot.gif'><img src=i/b.gif height=1 width=1></td><td>

<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td><a href='index.html'><img border="0" src="i/logo.gif" width="158" height="56" hspace="50" vspace="20" alt="Home Page"></a></td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td align="right"><form method="GET" action="search/"><input type="text" name="q" size="15" class=box value=""><br>
<input type="image" border="0" src="i/search.gif" width="54" height="15"></td>

</form>
<td background="i/dot.gif"><img border="0" src="i/b.gif" width="1" height="50"></td>
<td>
<a href="http://www.ocztechnology.com/"><img border="0" src="i/home.gif" vspace="2" width="27" height="10"></a><br>
<a href="http://www.ocztechnology.com/sitemap/"><img border="0" src="i/sitemap.gif" vspace="2" width="46" height="10"><br>
<a href="http://www.ocztechnology.com/contact/"><img border="0" src="i/contactus.gif" vspace="2" width="57" height="11"></td>
<td>
<img border="0" src="i/b.gif" width="30" height="1"></td>
</tr>

</table>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td background="i/m/bk.gif">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td><img border="0" src="i/b.gif" width="53" height="1"><img border="0" src="i/m/d.gif" width="2" height="25"></td>

<td><a href="aboutocz/" onmouseover="swapImage('button1', preloaded[1][1].src)" onmouseout="swapImage('button1', preloaded[1][0].src)" id="menu1"><img name="button1" id="button1" border="0" src="i/m/about-1.gif" width="77" height="25"></a></td>
<td><img border="0" src="i/m/d.gif" width="2" height="25"></td>
<td><a href="products/" onmouseover="swapImage('button2', preloaded[2][1].src)" onmouseout="swapImage('button2', preloaded[2][0].src)" id="menu2"><img name="button2" id="button2" border="0" src="i/m/products-1.gif" width="75" height="25"></a></td>
<td><img border="0" src="i/m/d.gif" width="2" height="25"></td>
<td><a href="wheretobuy/" onmouseover="swapImage('button3', preloaded[3][1].src)" onmouseout="swapImage('button3', preloaded[3][0].src)" id="menu3"><img name="button3" id="button3" border="0" src="i/m/where-1.gif" width="96" height="25"></a></td>
<td><img border="0" src="i/m/d.gif" width="2" height="25"></td>
<td><a href="javascript:none()" onmouseover="swapImage('button4', preloaded[4][1].src)" onmouseout="swapImage('button4', preloaded[4][0].src)" id="menu4"><img name="button4" id="button4" border="0" src="i/m/communities-1.gif" width="83" height="25"></a></td>
<td><img border="0" src="i/m/d.gif" width="2" height="25"></td>
<td><a href="support/" onmouseover="swapImage('button5', preloaded[5][1].src)" onmouseout="swapImage('button5', preloaded[5][0].src)" id="menu5"><img name="button5" id="button5" border="0" src="i/m/support-1.gif" width="69" height="25"></a></td>

<td><img border="0" src="i/m/d.gif" width="2" height="25"></td>
<td><a href="javascript:none()" onmouseover="swapImage('button7', preloaded[7][1].src)" onmouseout="swapImage('button7', preloaded[7][0].src)" id="menu7"><img name="button7" id="button7" border="0" src="i/m/resources-1.gif" width="80" height="25"></a></td>
<td><img border="0" src="i/m/d.gif" width="2" height="25"></td>
<td><a href="contact/" onmouseover="swapImage('button6', preloaded[6][1].src)" onmouseout="swapImage('button6', preloaded[6][0].src)" id="menu6"><img name="button6" id="button6" border="0" src="i/m/contactus-1.gif" width="83" height="25"></a></td>
<td><img border="0" src="i/m/d.gif" width="2" height="25"></td>
</tr></table></td>
</tr>
</table>

<map name="sp_map"><area alt="OCZ DDR Booster Diagnostic Device" href="http://www.ocztechnology.com/products/power_management/ocz_ddr_booster_diagnostic_device" shape="polygon" coords="665, 154, 656, 164, 656, 176, 749, 176, 749, 154"></map>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img border="0" src="images/s/top/ocz_ddr_booster.jpg" width="750" height="177" usemap="#sp_map"></td>
</tr>
<tr>
<td><img border="0" src="images/s/bot/ocz_ddr_booster.jpg" width="300" height="30"></td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>

<td valign=top>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign=top>

<img border="0" src="i/t-news.gif" width="152" height="23"><br><table border="0" cellpadding="0" cellspacing="5" width="152" height=100%>

<tr>
<td valign="top"><img border="0" src="i/ar-1.gif" vspace="4" width="9" height="8"></td>
<td valign="top"><span class=I><a href="aboutocz/news/21" class=k>OCZ PowerStream 600 Earns Driver Heaven’s Gold Award</a></span></td>

<tr>
<td valign="top"><img border="0" src="i/ar-1.gif" vspace="4" width="9" height="8"></td>
<td valign="top"><span class=I><a href="aboutocz/news/20" class=k>OCZ Modules Selected for ATI Demo Debut of Half-Life® 2</a></span></td>
<tr>
<td valign="top"><img border="0" src="i/ar-1.gif" vspace="4" width="9" height="8"></td>
<td valign="top"><span class=I><a href="aboutocz/news/19" class=k>OCZ PC2-4200 Enhanced Bandwidth Receives Driver Heaven’s Gold Award</a></span></td>
<tr>
<td valign="top"><img border="0" src="i/ar-1.gif" vspace="4" width="9" height="8"></td>

<td valign="top"><span class=I><a href="aboutocz/news/18" class=k>OCZ Technology Group, Inc. Moves to New Corporate Headquarters</a></span></td>
<tr>
<td valign="top"><img border="0" src="i/ar-1.gif" vspace="4" width="9" height="8"></td>
<td valign="top"><span class=I><a href="aboutocz/news/17" class=k>OCZ Technology Group, Inc. Earns Supermicro Validation for DDR2-400</a></span></td> </tr><tr><td colspan=2 align=center><br>
<script language="JavaScript" type="text/javascript" src="http://www.ocztechnology.com/p/form.js"></SCRIPT>
<script>
function trimite(){
eroare="";
chkem(document.maillist.subscribe.value,"E-mail Address");
if (eroare != "") alerter (eroare); else document.maillist.submit();
}
</script>
<form method="POST" action="maillist.html" name="maillist">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img border="0" src="i/pp/t-l.gif" width="6" height="6"></td>
<td background="i/pp/t-b.gif"><img border="0" src="i/pp/t-b.gif" width="1" height="6"></td>
<td><img border="0" src="i/pp/t-r.gif" width="6" height="6"></td>
</tr>
<tr>
<td background="i/pp/m-l.gif"><img border="0" src="i/pp/m-l.gif" width="6" height="1"></td>
<td align="right"><img border="0" src="i/newsletter.gif" width="102" height="11"><br><img src=i/b.gif height=5><br><input type="text" name="subscribe" size="19" value="Your Email Address" class=box onclick="if (document.maillist.subscribe.value=='Your Email Address') document.maillist.subscribe.value='';"><br><img src=i/b.gif height=5><br><a href="javascript:trimite()"><img border="0" src="i/subscribe.gif" width="68" height="13"></a></td>

<td background="i/pp/m-r.gif"><img border="0" src="i/pp/m-r.gif" width="6" height="1"></td>
</tr>
<tr>
<td><img border="0" src="i/pp/d-l.gif" width="6" height="6"></td>
<td background="i/pp/d-b.gif"><img border="0" src="i/pp/d-b.gif" width="1" height="6"></td>
<td><img border="0" src="i/pp/d-r1.gif" width="6" height="6"></td>
</tr>
</table>
</form>

<br><a href="javascript: popup('http://www.ocztechnology.com/newsletter/', 780, 650, 1, 1)"><img src=i/news-logo-l.gif border=0></a><br><Br><br>
<a href="products/hall_of_fame/"><img src=i/halloffame-l.gif border=0></a>
<br><br><br><a href="http://www.bleedinedge.com/forum/forumdisplay.php?f=45" target="_blank"><img src=i/support_forum.gif border=0></a>
</td></tr></table></td>

<td background="i/dot-n.gif"><img border="0" src="i/b.gif" width="1" height="1"></td>

</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td>
<table cellspacing=0 cellpadding=0 border=0><tr><tr><td valign=top><img src="i/t-i-feature.gif" border=0 vspace=10 hspace=5><br><table cellspacing=5 cellpadding=0 border=0><tr><td valign=top><a href="products/memory/ocz_el_ddr_pc_3200_dual_channel_gold_vx" class="k"><img src=i/s/t.gif height=3 width=71 border=0 hspace=0 vspace=0><br><img src=i/s/l.gif height=55 width=3 border=0 hspace=0 vspace=0><img src="images/products/memory/t/GoldDC1th.jpg" border=0 width=65 height=55><img src=i/s/r.gif height=55 width=3 border=0 hspace=0 vspace=0><br><img src=i/s/d.gif height=3 width=71 border=0 hspace=0 vspace=0></a><img src=i/b.gif width=6 height=1><br></td>
<td valign=top><a href="products/memory/ocz_el_ddr_pc_3200_dual_channel_gold_vx" class="k"><font color=#0070BC size=2><b>OCZ EL DDR PC-3200 Dual Channel Gold VX</b></font></a><br><img src=i/b.gif height=5><br><span class=I22>OCZ EL DDR PC-3200 / 400MHz / Gold Series / Voltage eXtreme / Dual Channel <br />

<br />
OCZ Gold Series <font color=red>...</font><br></span><a href="products/memory/ocz_el_ddr_pc_3200_dual_channel_gold_vx"><img src=i/more.gif vspace=3 border=0 vspace=0 hspace=0></a><br><br></td>
</tr></table><br><img src="i/t-i-press.gif" border=0 vspace=10 hspace=10><br><table border='0' cellpadding='0' cellspacing='0'><tr><td width='10'></td><td><a href='aboutocz/press/2004/116' class=K>OCZ Announces EL PC-3200 Voltage eXtreme Gold Edition<img src=i/ar-1.gif border=0></a><br><img src=i/b.gif border=0 height=5><br><a href='aboutocz/press/2004/115' class=K>OCZ Announces PC-4200 EL DDR Platinum with 2.5-3-3 Timings<img src=i/ar-1.gif border=0></a><br><img src=i/b.gif border=0 height=5><br><a href='aboutocz/press/2004/114' class=K>OCZ Announces Introduction of OCZ Memtest86 v1.00<img src=i/ar-1.gif border=0></a><br><img src=i/b.gif border=0 height=5><br><a href='aboutocz/press/2004/113' class=K>OCZ Announces 600 Watt PowerStream Power Supply<img src=i/ar-1.gif border=0></a><br><img src=i/b.gif border=0 height=5><br><a href='aboutocz/press/2004/112' class=K>OCZ Announces PC2-4200 DDR2 Platinum Revision 2 with 3-2-2 Timings<img src=i/ar-1.gif border=0></a><br><img src=i/b.gif border=0 height=5><br></td></tr></table><a href="aboutocz/press/2003/"><img src="i/more.gif" hspace="11" border="0" width="61" height="16"></a><br><br><br><img src="i/t-i-recent_reviews.gif" border=0 vspace=10 hspace=10><br><table border='0' cellpadding='0' cellspacing='0' width='230'><tr><td width='10'><img src=i/b.gif border=0 height=1 width=10></td><td><a href='products/recent_reviews/' class=K>"OCZ PC3700 Gold Rev. 3 brings some real value to the high-speed arena..." <br>-Anandtech<img src=i/ar-1.gif border=0><br><img src=i/more.gif vspace=3 border=0 vspace=0></a></td></tr></table>
</td><td>&nbsp;&nbsp;&nbsp;</td><td valign=top><a href="survey_cpu/"><img src="images/logo_cpu.jpg" border="0" align="left" hspace="10"><span class=i22><font color=#0070BC size=2><b>"Power User" Survey</b></font><br>Participate in our "Power User" Survey and get a free 12 month subscription to CPU Magazine, and a chance to win your very own OCZ PowerStream Power Supply!<br>USA participants only.</span><br><img src=i/more.gif vspace=3 border=0 vspace=0 hspace=0></a>
<br><br><br><a href="http://www.newegg.com/app/ViewProductDesc.asp?description=13-998-301&depa=0" target="_blank"><img src="i/available-at-newegg-ddrboos.jpg" border=0 hspace=10></a><br><br><img src="i/t-i-testimonials.gif" border=0 vspace=10 hspace=10><br><a href="aboutocz/testimonials/"><img src=i/testimonials.jpg border=0 hspace=10 vspace=0 align=left></a><span class=i22>See what OCZ Customers are saying. <br>Send us your opinion <br>and let the world see it!</span><br><a href="aboutocz/testimonials/"><img src=i/more.gif vspace=3 border=0 vspace=0 hspace=0></a>

<br><br><img src="i/t-i-vendors.gif" border=0 vspace=10 hspace=10><br><a href="wheretobuy/"><img src=i/map-s.gif border=0 hspace=10 vspace=0 width="80" height="51" align=left></a><span class=i22>Locate an OCZ distributor, a store or <br>an online shop in your area.<br>Our products are available worldwide.</span><br><a href="wheretobuy/"><img src=i/more.gif vspace=3 border=0 vspace=0 hspace=0></a>
<br><br><img src="i/t-i-opportunities.gif" border=0 vspace=10 hspace=10><br><a href="opportunities/become_distributor/"><img src=i/opportunities.jpg borde=0 hspace=10 align=left border=0></a><span class=i22>If you want to become an OCZ <br>distributor please be sure to read about <br>our opportunities.</span><br><a href="opportunities/become_distributor/"><img src=i/more.gif vspace=3 border=0 vspace=0 hspace=0></a>
<br><br><img src="i/t-i-support.gif" border=0 vspace=10 hspace=10><br><a href="support/"><img src=i/support.jpg borde=0 hspace=10 align=left border=0></a><span class=i22>Find answers to your questions and <br>indepth information about our products <br>in our support section.</span><br><a href="support/"><img src=i/more.gif vspace=3 border=0 vspace=0 hspace=0></a>
</td></tr></table><br>&nbsp;&nbsp;&nbsp;&nbsp;<img src='i/email.gif' align=center border=0 hspace=5 vspace=2><a href='JavaScript://' onClick="stf('http://www.ocztechnology.com/send_to_colleague.html?link=http://www.ocztechnology.com/&page=Welcome!')" class=k>send to a colleague</a><br><img src='i/b.gif' height=15><br> </td>
</tr>

</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber8" width="750">
<tr>
<td background="i/dot.gif">
<img border="0" src="i/b.gif" width="1" height="1"></td>
</tr>
<tr>

<td bgcolor="#EDEDED">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber9">
<tr>
<td><a href="index.html"><img border="0" src="i/logo-g.gif" vspace="10" width="83" height="29" hspace="45"></a></td>
<td><span class=I><a href="aboutocz/" class=l>About OCZ</a> | <a href="products/" class=l>Products</a> | <a href="wheretobuy/" class=l>Where to buy</a> | <a href="support/" class=l>Support</a> | <a href="opportunities/" class=l>Opportunities</a> | <a href="contact/" class=l>Contact us</a></span><br><span class=j>Copyright © 2003 OCZ Technology Inc</span></td>

</tr>
</table>
</td>
</tr>
</table>
</td><td background='i/dot.gif'><img src=i/b.gif height=1 width=1></td></tr></table>
<!--<script>preload();</script>-->
<script language="javascript" src="i/menu/dropdown_content.js"></script>
</body></html>

kingv
01-12-2004, 17:52
la parte "interessante" è in un file esterno:

<script language="javascript" src="i/menu/dropdown_content.js"></script>


come penso tu abbia visto pensare di farlo a mano e' abbastanza improponibile ;)

cipi
01-12-2004, 18:01
Originariamente inviato da kingv
la parte "interessante" è in un file esterno:

<script language="javascript" src="i/menu/dropdown_content.js"></script>


come penso tu abbia visto pensare di farlo a mano e' abbastanza improponibile ;)

già... :O

Se Kriz invece vuole vedere qualche esempio di javascript vada su:
http://www.cgiscript.net/site_javascripts.htm
oppure zio Gooooooooooogle (Berto insegna ;) )

Kriz
01-12-2004, 23:13
a me servirebbe proprio una cosa simile a quella di OCZ, sapete se si riesce a trovare qualcosa in giro?