Need Help to make this

[koba]

Hallo My name is Koba. I was trying all day to biuld same menu as www.hp.com has but I cant; then I found your forum and dicided to reply all of you for help, I have design and want to add same effect as Hp page have, can you helpme ?


what kind of effect I am talking about

look: when you are making mouseover on down menu the hole colours nad picture is changing


plzz heeelp

[koba]

HAlooooooooooooooooooooo i s enybody there?

[BLiZZaRD]

Look in the source: it is a LOT of coding:

first in the head section you need to class each option and tell it what it should change/do when hovered. Here is one example:

<script type="text/javascript" language="JavaScript">
<!--
theme_color[HHO] = "#4FAF00";
border_color[HHO] = "#84C74D";
src_primary[HHO] = "http://welcome.hp-ww.com/country/us/en/img/n4_welcome/hho/primary_hho_notebook_1205.jpg";
src_secondary[HHO] = "http://welcome.hp-ww.com/country/us/en/img/n4_welcome/hho/secondary_hho_desktop_msg1_1127.jpg";
msgMap[HHO] = "<map name=\"msgImgMap_hho\"><area shape=\"rect\" coords=\"352,81,625,97\" href=\"http://www.shopping.hp.com/webapp/shopping/computer_can_series.do?storeName=computer_store&category=notebooks&a1=Brand&v1=HP+Pavilion&series_name=dv6000t_series&jumpid=re_R602_b1l1/hpcom/psg/dv6000t\" alt=\"The 'Make Mine Mobile' HP dv6000t Notebook\" title=\"The 'Make Mine Mobile' HP dv6000t Notebook\" onClick=\"s_objectID='OV2 L1 - gw|us|en|welcomeOV2|var|msg-1|hho|l1|dv6000t-notebook|20061205'; setCookie('hp_cust_seg_sel',0,90)\" onmousedown=\"s_hp_sendLinkEvent('o','OV2 L1 - gw|us|en|welcomeOV2|var|msg-1|hho|l1|dv6000t-notebook|20061205')\" tabindex=\"1\" /><area shape=\"rect\" coords=\"352,98,727,114\" href=\"http://www.shopping.hp.com/webapp/shopping/computer_can_series.do?storeName=computer_store&category=desktops&a1=Brand&v1=HP+Pavilion&series_name=a1410y_series&jumpid=re_R602_b1l2/hpcom/psg/a1410y\" alt=\"Make your photos even more amazing - Pavilion a1410y Desktop\" title=\"Make your photos even more amazing - Pavilion a1410y Desktop\" onClick=\"s_objectID='L2 - gw|us|en|welcomeOV2|var|msg-1|hho|l2|pavilion-a1410y-desktop|20061205'; setCookie('hp_cust_seg_sel',0,90)\" onmousedown=\"s_hp_sendLinkEvent('o','L2 - gw|us|en|welcomeOV2|var|msg-1|hho|l2|pavilion-a1410y-desktop|20061205')\" tabindex=\"1\" /></map>";
promoMap[HHO] = "<map name=\"promoImgMap_hho\"><area shape=\"rect\" coords=\"121,47,263,60\" href=\"http://www.shopping.hp.com/webapp/shopping/computer_can_series.do?storeName=computer_store&category=desktops&a1=Usage&v1=Everyday+computing&series_name=a1410y_series&jumpid=re_R602_b2l1/hpcom/psg/a1410y\" alt=\"Pavilion a1410y Desktop\" title=\"Pavilion a1410y Desktop\" onClick=\"setCookie('hp_cust_seg_sel',0,90); s_objectID='gw|us|en|welcomeOV2|var|msg-2|hho|l1|pavilion-a1410|20061127'\" tabindex=\"10\" ><area shape=\"rect\" coords=\"121,63,248,77\" href=\"http://www.hp.com/united-states/voodoopc/index.html?jumpid=re_R602_b2l2/hpcom/psg/voodoopc\" alt=\"VoodooPC for gaming\" title=\"VoodooPC for gaming\" onClick=\"setCookie('hp_cust_seg_sel',0,90); s_objectID='gw|us|en|welcomeOV2|var|msg-2|hho|l2|voodoPC-for-gaming|20061127'\" tabindex=\"10\" ></map>\n";
// -->
</script>

Then in the body section you need to actually call each script when needed, an example:

<div id="messagingArea">
    <div>
	<script type="text/javascript" language="JavaScript">
	<!--
	if(imgRollEnabled && !singleRollImg){
	document.write(priImgSrc);
	document.write(msgMap[HHO]);
	document.write(msgMap[SMB]);
	document.write(msgMap[LEB]);
	document.write(msgMap[GHE]);
	document.write(msgMap[GA]);
	} else if(!imgRollEnabled && !singleRollImg) { // random lockout messaging
	document.write(randPriSrc);
	document.write(randMapPri);
	} else if(!imgRollEnabled && singleRollImg) { // single image messaging
	document.write(s_ImgPrimary);
	document.write(s_MapPrimary);
	}
	//-->
	</script><noscript><img src="http://welcome.hp-ww.com/country/us/en/img/n4_welcome/hho/primary_hho_msg_1030.jpg" alt="" name="msgImg" width="740" height="190" border="0" usemap="#msgImgMap_hho" id="msgImg">
<map name="msgImgMap_hho">
<area shape="rect" coords="0,0,739,189" href="http://www.shopping.hp.com/webapp/shopping/computer_series.do?series_name=dv2000t_series&catLevel=3&category=notebooks/hp_pavilion/dv2000_series&storeName=computer_store&aoid=32605&mtxs=home-hho&mtxb=B1&mtxl=L1" alt="Customized for you - Customize an HP Pavilion dv2000t Entertainment Notebook $150* off plus free shipping *after instant and mail-in rebates" tabindex="1" />
</map></noscript></div>

  </div>

I don't know JS well at all. but this is what I got from the source. There is CSS involved as well, and a lot of it. Start reading the source there and get what you can learn from

[Twey]

See the multi-part content script here, I think a little adaption of that should do what you need. I wouldn't take design tips from HP though

[koba]

ok I wll try to do something

Twey what is multi-part content script ? were I can find it ? on Dynamicdrive ?

[Twey]

Yes, search.

[koba]

Dear Friends I can't do this plzzz guid me me how to make this ****ing mousover menu like HP have

[shachi]

koba: I am sure there was a tab-content script around here somewhere. Just change it's onclick event to onmouseovers. And that's all. You've gotta try it yourself.

[koba]

Dear all I understand that I am week in Jvascript but I urgently need to make this effect on my design, here see my design

just guide me how to strat to make this effect on my page. and I will follow step by step and at last I will mke it. plzzz I found your forum very helpfyl so dont say that you all c ant help me I am sure you can

[shachi]

Well, just add an onclick or onmouseover attribute on the "Banking and technologies" part and create a function change the background-color and the contents when the onclick/onmouseover event is triggered.

AND it would be really helpful if you could give us the link of the page so that we can see the structure of your page.