View Full Version : Need Help to make this

12-07-2006, 09:50 PM
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

12-08-2006, 09:47 AM
HAlooooooooooooooooooooo i s enybody there?

12-08-2006, 10:17 AM
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";
// -->

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

<div id="messagingArea">
<script type="text/javascript" language="JavaScript">
if(imgRollEnabled && !singleRollImg){
} else if(!imgRollEnabled && !singleRollImg) { // random lockout messaging
} else if(!imgRollEnabled && singleRollImg) { // single image messaging
</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" />


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 :D

12-08-2006, 10:23 AM
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 (http://welcome.hp.com/country/jp/ja/welcome.html) :)

12-08-2006, 10:42 AM
ok I wll try to do something

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

12-08-2006, 12:12 PM
Yes, search.

12-09-2006, 12:41 PM
Dear Friends I can't do this plzzz guid me me how to make this ****ing mousover menu like HP have :confused:

12-09-2006, 12:54 PM
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.

12-09-2006, 01:08 PM
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

12-09-2006, 01:38 PM
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.

12-09-2006, 02:24 PM
ok I will put soon the structure of page

12-09-2006, 07:53 PM
Here I found some DD Tab menu

I integrate it im My web BUt now I dont understand how to change it as I want

see attached photo.


And same time see web page


here you can see sourse

PLEASE HELP ME to make this like HP.com has

12-10-2006, 08:13 AM
koba: That's all you wanted isn't it?? I don't get a bit what you're trying to do with that flowchart.

12-10-2006, 09:13 AM
Does this work?? *attached*

12-10-2006, 11:18 AM
Dear shachi

it works but main effect what I want is this look :

I want to have such effect : click on menus down? and look on hole page I want to make same effect with revolver mouse on them.


it is possible? how to make this one, I am trying many tiems to integrate DD tabs or jus Tabs mbut doesnot woks plzz help me,

somebody help me and I will send you for New Year Good Georgian Wine (http://www.gws.ge/eng/index.php), Red Wine plzzzzzzz come on help me.

12-11-2006, 10:37 AM
Haloooo anybodyyyy is there

12-11-2006, 01:23 PM
post either a link to your page or your source code. We can help from that a little more.

This can all be done easily using CSS, but first we need to see how you have your page set up. :D

12-11-2006, 02:35 PM
BLiZZaRD: I thought he already posted a link.

koba: I am sorry, I was a little busy with my other works.

12-11-2006, 03:59 PM
PLzzzzzzzzzzzzzzzzz boys plzzz just a small help, I link a sourse of page, it just simple one, I need thebasic how to start to make this

12-11-2006, 05:13 PM
koba: first thing, you don't give us enough resources to make it. The demo you gave me links to nothing but simply an image. Please chop off the images and then give us the link of the images. Not just the whole chunk of image that was supposed to be the site.

12-11-2006, 08:11 PM

ok tomorrow I will give you web source.

Thank you very much

12-12-2006, 11:17 AM
Yesterday was my Birthday :)

NOboby want to give me a gift one Javascript like Hp has? it is joke :lol: