PDA

View Full Version : Need Help to make this



koba
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

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

BLiZZaRD
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";
// -->
</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 :D

Twey
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) :)

koba
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 ?

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

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

shachi
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.

koba
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

shachi
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.

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

koba
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

http://nssc.caucasus.net/logo/

here you can see sourse

PLEASE HELP ME to make this like HP.com has

shachi
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.

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

koba
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.

http://nssc.caucasus.net/logo/

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.

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

BLiZZaRD
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

shachi
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.

koba
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

shachi
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.

koba
12-11-2006, 08:11 PM
shachi

ok tomorrow I will give you web source.

Thank you very much

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