Navagation Tabs - using roll over images

johnglobal · November 12, 2002

Hi all

I have created a set of navagation tabs with dreamweaver.

Everything works fine, click on a tab and a new image swaps in etc.

(all the tabs are images)

How do I implement this into header.php

If I paste in the html it will work in principal, however when it goes to the new page the tab will not stay down.. (if you know what I mean) as the entire page gets refreshed.

Also the path to the tab images will be different when I switch to secure server and the images will not show. How do I fix this ?

How do I maintain session ID

Anyone implemented navagation tabs using rollover images ??

Thanks

John

November 12, 2002

I dont know if this helps, I am working on a simlar thiing using fireworks. I pasted all the code including javasript from the html page into header.php just below this

?>

<!--

function MM_findObj(n, d) { //v3.0

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d

etc etc etc

</script>

now all html body code code goes here (it worked for me, perhaps a coder could help here.

Some of the code looks like this

<td><a href="http://www.show-it.com/about.php" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('MyFilepng_r2_c5','','images/MyFile.png_r2_c5_f2.gif','MyFilepng_r4_c3','','images/MyFile.png_r4_c3_f2.gif',1);" ><img name="MyFilepng_r2_c5" src="images/MyFile.png_r2_c5.gif" width="142" height="20" border="0"></a></td>

<td><a href="http://www.show-it.com/showmain.php" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('MyFilepng_r2_c6','','images/MyFile.png_r2_c6_f2.gif','MyFilepng_r4_c3','','images/MyFile.png_r4_c3_f3.gif',1);" ><img name="MyFilepng_r2_c6" src="images/MyFile.png_r2_c6.gif" width="142" height="20" border="0"></a></td>

<td rowspan="2"><img name="MyFilepng_r2_c7" src="images/MyFile.png_r2_c7.gif" width="1" height="30" border="0"></td>

To make the swap stick when the user moves over the object I removed this code from the relevant button:

onMouseOut="MM_swapImgRestore();"

I am still working on it, mine is more a disjointed rollover in that it targets other pictures and not just the nav button, but it is probably a similar prrinciple used

For an example on www.show-it.com i made the 'Agent Tour' button and related image stick on mousover.

This is using the showmain contribution, I divert here but all the showmain pages in explorer show an error on the status bar. I cant track down why yet, I am not a programmer. To efficiently use MS Agent I need to use frames, however this error does not affect the function, but does not look good for visitors.

If any one knows the answer please let me know. The advantage of showmain is that it encloses html pages in a frame, but does not affect keywords etc or meta tags using the header tags contribution. This module is great for MS Agent tours etc, which often uses frames to target information and text etc. Any kinks in the page pop up in a new window, so I only use this to enlose my own web pages, for any anti-framers among us..:)

regards

JamesMac

November 12, 2002

goodness i only clicke this once and about six versions appeared?

johnglobal · November 14, 2002

Thanks for your replies :-)

It looks like your swap in image does not stick either

Anyone else implement something like this ?

Thanks

John

Ajeh · November 14, 2002

goodness i only clicke this once and about six versions appeared?

Mouse go crazy? :wink:

johnglobal · November 15, 2002

Some progress

Managed to implement the tabs, links work fine and image swaps.

However when taken to the new page the swapped in image does not stay down.

Looks like the javascript variables are not being stored (being refreshed)

Anyone know how to do this ?

Thanks

Jonh

hatimad · November 18, 2002

Hi,

can we somehow make the menu code load from rest of the .php files insted of header.php?

i tried to put some html in default.php on top of <header> but it didnt work

can anyone help please?

johnglobal · November 19, 2002

Can anyone please help with this ?

(Problem: Tabs work fine, but when clicked they don't stay down on new page)

Do you need to put the javascript info outside header.php and use a link within header.php or does that make any difference

e.g

Do I need to have cache setting turned on ?

tobz · November 19, 2002

(Problem: Tabs work fine, but when clicked they don't stay down on new page)

I think the problem you are experiencing is because your graphics and script are called every time each page loads - effectively resetting your menu.

The only way I have implemented this type of navigation bar before is to have it in a static frame.

johnglobal · November 19, 2002

Hi tobz

Thanks for the reply

I have seen other sites where this does actually work without using frames.

e.g http://www.warmwoman.com

This must be possible, but I just dont know how to do it.

[/url]

burt · November 19, 2002

You'll need to do a "switch" based on the page the person is on:

www.php.net/switch

It's not straightforward but is really quite simple once you get your head around it.

You'll need to somehow assign the page name, using a mixture of maybe parse_url (probably on the path or othe query) and/or perhaps $PHP_SELF

switch($page) {

   case "a_page.php":

       echo "do stuff";

       break;

   case "b_page.php":

       echo "do something else";

       break;

   case "c_page.php":

       echo "something else";

       break;

   default: echo "normal stuff here";

}

hatimad · November 19, 2002

http://www.warmwoman.com does not have mouse rollover, it is using category for the tabs, it can be done by the contribution

http://www.oscommerce.com/downloads.php/co...ions,516/type,3

same thing is on www.amazon.com , it is using html

i have got mouse rollover and also tab stays down

http://bindionline.com/echocart/default.php

check the navigation on right corner, if this is what you want then you will have to replace header.php in all .php files with the actual code , the only change will be in the image file of the button

as i dont know PHP, i cant make it work with the SWITCH, if someone has done it please let me know also

Thank you

Hatim

P.S: site is still under construction, any sugessions are welcome

johnglobal · November 19, 2002

Hi Hatim

Thanks for the reply.

The contribution does not use images for the tabs, it works a little different to what I am looking for.

The way yours works is what I am looking for.

When you say "have to replace header.php in all .php files with the actual code , the only change will be in the image file of the button "

What do you mean, there is only one header.php file ?

Also I notice that the session id on your card is always displayed in the address bar of the browser, that may have something to do with it.

hatimad · November 19, 2002

whereever you find

<!-- header //-->

<?php require(DIR_WS_INCLUDES . 'header.php'); ?>

<!-- header_eof //-->

replace it with the code in header.php, you will have to replace the image file names

example: when you are on "default.php"

"home" = red.gif

"About" = yellow.gif

when you are on "About.php"

"home" = yellow.gif

"About" = red.gif

am i making sense?

about session ID, i saw session ID on some of the links before i was logged in, isnt it suppose to be like that? or due to making changes in all the files, this has happen?

if you know more on this please tell me

thank you

Hatim

johnglobal · November 20, 2002

Thanks Hatim, I know what you mean. (good idea)

However that is fine when you are on a specific page e.g About.php

What about when you want to view a category ?

I do not want to use the category tab module as I cannot use my specific images. e.g I want to have a welcome page, want to use tabs for specific categories etc.

Burt thanks for your comments also, however I would not have a clue where to start with that.

Anyone else ?

Thanks

John

johnglobal · November 20, 2002

I think I have a solution, but will take me some time to test

1st tab "welcome" link to /catalog/default.php (include normal header.php with welcome tab down)

2nd tab "gifts" link to /catalog/gifts/default.php (include headergift.php with gift tab down)

2nd tab "flowers" link to /catalog/flowers/default.php (include headerflowers.php with flowers tab down)

etc etc

Not sure if this will work

Anyone know if you can have multiple versions of default.php ?

Thanks

John

dreamscape · November 23, 2002

Hi Hatim
The contribution does not use images for the tabs, it works a little different to what I am looking for.

true it does not use images, but text of the names of the categories... but the main thing is they stay down... if you know PHP, it shouldn't be too hard to modify the contribution to display an image instead of text.

alougher · November 23, 2002

Here's the answer which you can see working at www.hogplum.com.

You need to modify catalog/default.php, header.php and all catalog/php files that you want on the nav tab bar at the top. I will post the code and image links for my site so all you need to do is change the links and tabs. The rest is simple.

Step 1:

Create your tabs. I stole mine from amazon and then just changed the color scheme. You need two tabs for each tab, each a different color to show the selected/non-selected state.

Step 2:

This is presuming your first tab is home (catalog/default.php). Modify the code by inserting the follwing after the first line (require('includes/application_top.php');):

// the following sets the menu tab index to 1 or 2

if ($TAB_INDEX = "") {

session_start();

session_register("TAB_INDEX");

}

if ($HTTP_GET_VARS['cPath'] == "") {

$TAB_INDEX = "1";

} else {

$TAB_INDEX = "2";

}

Step 3:

Add this to you header.php file after the line <tr class="header"> which is near the top:

/* Home Tab or no tab */

if ($TAB_INDEX == "") {

?>

<?php

} else {

/* Home Tab (1) */

if ($TAB_INDEX == "1") {

?>

<?php

} else {

/* Catalog Tab (2) */

if ($TAB_INDEX == "2") {

?>

<?php

} else {

/* Catalog Tab (3) */

if ($TAB_INDEX == "3") {

?>

<?php

} else {

/* Catalog Tab (4) */

if ($TAB_INDEX == "4") {

?>

<?php

} else {

/* Catalog Tab (5) */

if ($TAB_INDEX == "5") {

?>

<?php

} else {

/* Catalog Tab (6) */

if ($TAB_INDEX == "6") {

?>

<?php

}

?>

Remember, the above code is taken directly from my site so you will need to modify the links and image names accordingly.

Step 4:

Now, all you have to do is add the following code to each of the catalog/php files you want your buttons to link to. But first of all, if your second tab is a link to the category page (not the home page) then that is already taken care of in the deafult.php (TAB_INDEX 2).

For tabs 3,4,5 and 6 insert code as follows directly after the line require('includes/application_top.php');:

// the following sets the menu tab index to <button number>

$TAB_INDEX = "<button number>";

Where <button number> is equal to the occurence of the tab on the bar. So if you tabs are Home, Categories, Catalog (allprods.php), specials, contact and My cart (as is ours), the modification would look like this:

default.php includes tab_index 1 & 2

allprods.php tab_index 3

specials.php tab_index 4

contactus.php tab_index 5

shopping_cart.php tab_index 6

that's it! Looks complicated byt honestly it's not. Also the beauty of doing it this way is that the tabs change even if you are drilling down the cateogry hierarchy. Which is nice.

thanks.

hatimad · November 24, 2002

thats awesome!

i will give it a shot

thanks a lot

Hatim

johnglobal · November 25, 2002

Thanks for that Al

Will give it a try also.

John

CC · November 25, 2002

Al...

HogPlum ???

Where the hell did that name come from?

You must have a vivid imagination dude. :lol:

Or your a little tapped.

The site logo is well funny.

CC.

alougher · November 25, 2002

He aint no normal plum..he's a genetically altered plum!

CC · November 25, 2002

LOL :lol:

What can you say to that! :lol: :lol:

CC.

johnglobal · November 25, 2002

Hi Al

Would you be kind enough to post your header.php file as a text file again.

I tried to follow your instructions but I get errors in header.php

Thanks

John

alougher · November 25, 2002

Sure, you go (I had the descriptions wrong so have corrected them):

<?php

/*

$Id: header.php,v 1.32 2002/06/05 21:03:46 dgw_ Exp $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Released under the GNU General Public License

*/

?>

<tr>

<td>

<?php

/* Home Tab or no tab */

if ($TAB_INDEX == "") {

?>

<?php

} else {

/* Home Tab (1) */

if ($TAB_INDEX == "1") {

?>

<?php

} else {

/* Gifts Tab (2) */

if ($TAB_INDEX == "2") {

?>

<?php

} else {

/* Catalog Tab (3) */

if ($TAB_INDEX == "3") {

?>

<?php

} else {

/* Specials Tab (4) */

if ($TAB_INDEX == "4") {

?>

<?php

} else {

/* Contact Tab (5) */

if ($TAB_INDEX == "5") {

?>

<?php

} else {

/* My Cart Tab (6) */

if ($TAB_INDEX == "6") {

?>

<?php

}

?>

</tr>

</table>

<?php

if ($cPath) {

if (!ereg('_', $cPath)) {

$cPath_array = array($cPath);

}

$cPath_new = '';

for($i=0; $i<sizeof($cPath_array); $i++) {

if ($cPath_new == '') {

$cPath_new .= $cPath_array[$i];

} else {

$cPath_new .= '_' . $cPath_array[$i];

}

$categories_query = tep_db_query("select categories_name from " . TABLE_CATEGORIES_DESCRIPTION . " where categories_id = '" . $cPath_array[$i] . "' and language_id='" . $languages_id . "'");

$categories = tep_db_fetch_array($categories_query);

echo ' » <a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $cPath_new, 'NONSSL') . '" class="headerNavigation">' . $categories['categories_name'] . '</a>';

}

} elseif ($HTTP_GET_VARS['manufacturers_id']) {

$manufacturers_query = tep_db_query("select manufacturers_name from " . TABLE_MANUFACTURERS . " where manufacturers_id = '" . $HTTP_GET_VARS['manufacturers_id'] . "'");

$manufacturers = tep_db_fetch_array($manufacturers_query);

echo ' » <a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'], 'NONSSL') . '" class="headerNavigation">' . $manufacturers['manufacturers_name'] . '</a>';

}

if ($HTTP_GET_VARS['products_id']) {

$model = tep_db_query("select products_model from " . TABLE_PRODUCTS . " where products_id = '" . $HTTP_GET_VARS['products_id'] . "'");

$model_values = tep_db_fetch_array($model);

echo ' » <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=' . $cPath . '&products_id=' . $HTTP_GET_VARS['products_id'], 'NONSSL') . '" class="headerNavigation">' . $model_values['products_model'] . '</a>';

}

if ($location) {

echo $location;

}

?>

</td>

<td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a> | <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a> | <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_PAYMENT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a> </td>

</tr>

</table>

<tr>

<td>

</td>

</tr>

<?php

if ($HTTP_GET_VARS['error_message'] != '') {

?>

</tr>

</table>

<?php

}

if ($HTTP_GET_VARS['info_message'] != '') {

?>

</tr>

</table>

<?php

}

?>

Navagation Tabs - using roll over images

Recommended Posts

johnglobal

Guest

Guest

johnglobal

Ajeh

johnglobal

hatimad

johnglobal

tobz

johnglobal

burt

hatimad

johnglobal

hatimad

johnglobal

johnglobal

dreamscape

alougher

hatimad

johnglobal

CC

alougher

CC

johnglobal

alougher

Archived

Browse

Activity