Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Need Help to make this

  1. #1
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need Help to make this

    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

  2. #2
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need help plzzzzzz

    HAlooooooooooooooooooooo i s enybody there?

  3. #3
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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:

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

    Code:
    <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
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok I wll try to do something

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

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Yes, search.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Dec 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •