Anna's Mambo Tips - Page 5 - Mambo

rgisa · June 13th, 2006, 03:52

For those interested, mouseover "graphics menus" in Mambo using the standard mos_menu component.

This will work with any W3C compliant browser (everything popular).

The script has several advantages.

1. It uses the mousein/mouseout events of the IMG (image) events of DOM rather than the "traditional" Link events. This means it is search engine friendly.

2. It can be applied to any mos_menu, vertical, horizontal... you can even use it with "interfaces" (custom menu looks like many sites have, do a google search for "web graphics interfaces" for example).

3. It preloads your images for the active menu images

4. In principle the same concepts can be utilzed to make many DHTML type functions for your web.

5. Your menu system will still work if the user has scripting turned off, it wont "mouseover" but the menu graphics will still appear and the links will work.

Heres the code/instructions:

1. Paste the following into your index.php file between the <HEAD> </HEAD> HTML statements.

<script>
var W3CDOM = (document.createElement && document.getElementsByTagName);
var mouseOvers = new Array();
var mouseOuts = new Array();
window.onload = init;
function init()
{
if (!W3CDOM) return;
var nav = document.getElementById('mouseovers');
var imgs = nav.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++)
{
imgs[i].onmouseover = mouseGoesOver;
imgs[i].onmouseout = mouseGoesOut;
var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
mouseOuts[i] = new Image();
mouseOuts[i].src = imgs[i].src;
mouseOvers[i] = new Image();
mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;
imgs[i].number = i;
}
}
function mouseGoesOver()
{
this.src = mouseOvers[this.number].src;
}
function mouseGoesOut()
{
this.src = mouseOuts[this.number].src;
}
</script>

----------

2. Upload your menu images to a directory on your server. The "mousein" (mouseover) graphic should be named the same as the mouseout graphics but with "_omo" added. ie, "1.jpg" is your mouseout graphic, then your mouseover graphic should be named "1_omo.jpg".

---------

3. Locate where in your index.php the menu injection happens such as:
<?php mosLoadModules('top',-1); ?>

Change this to:

<ul id="mouseovers">
<?php mosLoadModules('top',-1); ?>
</ul>

---------

4. Go into Mambo where the menu setup is. Change the text name to the actual IMAGE HTML, such as:

<IMG NAME width=70 height=30 border=0 SRC = "../../isagr/21.jpg">

You will see the "image appear" in Mambo vs the Text.

5. Upload your saved index.php to your template directory!

Thats it!

Mouseover menu graphics that are search engine friendly, browser friendly!

-----

Do note that the above uses the HTML <UL> tag, if your CSS sheet modifies the UL Tag attributes this will effect the look. To avoid this you can set up your CSS to use a specfic id for your own UL's.

alicejiang · June 20th, 2006, 12:48

It is easy to built static page in mambo. How to built a dynamic page?Could you show me a example?

rgisa · June 21st, 2006, 19:30

It really depends what you are trying to accomplish. Mambo uses a template file called index.php. All content is "injected" into that page. Just because the filename is ".PHP" does not mean you cannot used DHTML. The PHP extension simply means there is PHP code within. If you put PHP code in a normal HTML file the PHP interpreter will not transact the PHP code.

You can include Javascript, vbScript, CGI calls, Java App's or anything else you desire in the index.php file.

alicejiang · June 22nd, 2006, 11:55

Thank your reply. Index.php is one of the template file. I am going to do some function with php code. I mean can I make a php file in content? I don't want put many dynamic functions such a form in index.php.

Newbee22 · July 7th, 2006, 16:46

Anna-
I just read all of your 10 tips. I am a new admin to Mambo and really appreciate the time you put into your posts. You did a great job breaking things down as well as using vocabulary and humor that the average "newbee" could receive. I was very impressed by your layout and delivery of information.
Thanks
Newbee22

silicon1970 · August 19th, 2006, 23:48

This is an excellent article and should be really in the Mambo project document. I have been struggling for weeks and this alone gives me the comlete picture compared to all other docs which made be believe the whole thing were disconnected pieces that one has to figure how to join. I read this article and drew the little pieces of the puzzle and now has a good understanding about how to proceed. Thx for writing something like this.

thegent · August 22nd, 2006, 21:43

praisepalm

did you look at the beginning of this thread COS YOU ARE IN ANNAS TIPS

hazman · September 7th, 2006, 08:31

Quote:

Originally Posted by rgisa

For those interested, mouseover "graphics menus" in Mambo using the standard mos_menu component.

This will work with any W3C compliant browser (everything popular).

The script has several advantages.

1. It uses the mousein/mouseout events of the IMG (image) events of DOM rather than the "traditional" Link events. This means it is search engine friendly.

2. It can be applied to any mos_menu, vertical, horizontal... you can even use it with "interfaces" (custom menu looks like many sites have, do a google search for "web graphics interfaces" for example).

3. It preloads your images for the active menu images

4. In principle the same concepts can be utilzed to make many DHTML type functions for your web.

5. Your menu system will still work if the user has scripting turned off, it wont "mouseover" but the menu graphics will still appear and the links will work.

Heres the code/instructions:

1. Paste the following into your index.php file between the <HEAD> </HEAD> HTML statements.

<script>
var W3CDOM = (document.createElement && document.getElementsByTagName);
var mouseOvers = new Array();
var mouseOuts = new Array();
window.onload = init;
function init()
{
if (!W3CDOM) return;
var nav = document.getElementById('mouseovers');
var imgs = nav.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++)
{
imgs[i].onmouseover = mouseGoesOver;
imgs[i].onmouseout = mouseGoesOut;
var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
mouseOuts[i] = new Image();
mouseOuts[i].src = imgs[i].src;
mouseOvers[i] = new Image();
mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;
imgs[i].number = i;
}
}
function mouseGoesOver()
{
this.src = mouseOvers[this.number].src;
}
function mouseGoesOut()
{
this.src = mouseOuts[this.number].src;
}
</script>

----------

2. Upload your menu images to a directory on your server. The "mousein" (mouseover) graphic should be named the same as the mouseout graphics but with "_omo" added. ie, "1.jpg" is your mouseout graphic, then your mouseover graphic should be named "1_omo.jpg".

---------

3. Locate where in your index.php the menu injection happens such as:
<?php mosLoadModules('top',-1); ?>

Change this to:

<ul id="mouseovers">
<?php mosLoadModules('top',-1); ?>
</ul>

---------

4. Go into Mambo where the menu setup is. Change the text name to the actual IMAGE HTML, such as:

<IMG NAME width=70 height=30 border=0 SRC = "../../isagr/21.jpg">

You will see the "image appear" in Mambo vs the Text.

5. Upload your saved index.php to your template directory!

Thats it!

Mouseover menu graphics that are search engine friendly, browser friendly!

-----

Do note that the above uses the HTML <UL> tag, if your CSS sheet modifies the UL Tag attributes this will effect the look. To avoid this you can set up your CSS to use a specfic id for your own UL's.

Hello folks,

Has anyone made this work?

Silo24X · December 22nd, 2006, 02:57

I'm commending you on a great 10 tips. These are awesome helpers, and I think it will help me along the way to being a knowledgable admin.

Thanks!

sa_designer · December 29th, 2006, 00:43

Hi Anna

I really like ur tutorial but still as being new to mambo I am not able to figure out how to place different content in a web page at different locations.

Please Help!!!!

Regards
S

swiftmed · February 9th, 2007, 17:56

ive gotta comment, im new here but ive just read through this whole post and there is a lot of helpful information here for the user who is new to mambo. personally i use it all the time now as ive seen it to be the ideal solution for most of my needs.

The 10 tips you've provided here even taught me a thing or two that i didn't know about mambo so thank you for taking the time to write it.

June 13th, 2006, 03:52	#81
rgisa Join Date: Jun 2006 Posts: 3	A "Tip" I am working on - MouseOver Graphics Menus With Standard Mambo Menu Component For those interested, mouseover "graphics menus" in Mambo using the standard mos_menu component. This will work with any W3C compliant browser (everything popular). The script has several advantages. 1. It uses the mousein/mouseout events of the IMG (image) events of DOM rather than the "traditional" Link events. This means it is search engine friendly. 2. It can be applied to any mos_menu, vertical, horizontal... you can even use it with "interfaces" (custom menu looks like many sites have, do a google search for "web graphics interfaces" for example). 3. It preloads your images for the active menu images 4. In principle the same concepts can be utilzed to make many DHTML type functions for your web. 5. Your menu system will still work if the user has scripting turned off, it wont "mouseover" but the menu graphics will still appear and the links will work. Heres the code/instructions: 1. Paste the following into your index.php file between the <HEAD> </HEAD> HTML statements. <script> var W3CDOM = (document.createElement && document.getElementsByTagName); var mouseOvers = new Array(); var mouseOuts = new Array(); window.onload = init; function init() { if (!W3CDOM) return; var nav = document.getElementById('mouseovers'); var imgs = nav.getElementsByTagName('img'); for (var i=0;i<imgs.length;i++) { imgs[i].onmouseover = mouseGoesOver; imgs[i].onmouseout = mouseGoesOut; var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.')); mouseOuts[i] = new Image(); mouseOuts[i].src = imgs[i].src; mouseOvers[i] = new Image(); mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix; imgs[i].number = i; } } function mouseGoesOver() { this.src = mouseOvers[this.number].src; } function mouseGoesOut() { this.src = mouseOuts[this.number].src; } </script> ---------- 2. Upload your menu images to a directory on your server. The "mousein" (mouseover) graphic should be named the same as the mouseout graphics but with "_omo" added. ie, "1.jpg" is your mouseout graphic, then your mouseover graphic should be named "1_omo.jpg". --------- 3. Locate where in your index.php the menu injection happens such as: <?php mosLoadModules('top',-1); ?> Change this to: <ul id="mouseovers"> <?php mosLoadModules('top',-1); ?> </ul> --------- 4. Go into Mambo where the menu setup is. Change the text name to the actual IMAGE HTML, such as: <IMG NAME width=70 height=30 border=0 SRC = "../../isagr/21.jpg"> You will see the "image appear" in Mambo vs the Text. 5. Upload your saved index.php to your template directory! Thats it! Mouseover menu graphics that are search engine friendly, browser friendly! ----- Do note that the above uses the HTML <UL> tag, if your CSS sheet modifies the UL Tag attributes this will effect the look. To avoid this you can set up your CSS to use a specfic id for your own UL's. Last edited by rgisa : June 13th, 2006 at 21:23.

June 20th, 2006, 12:48	#82
alicejiang Join Date: Apr 2006 Posts: 2	How to built a dynamic page? It is easy to built static page in mambo. How to built a dynamic page?Could you show me a example?

June 21st, 2006, 19:30	#83
rgisa Join Date: Jun 2006 Posts: 3	Dynamic HTML In Mambo It really depends what you are trying to accomplish. Mambo uses a template file called index.php. All content is "injected" into that page. Just because the filename is ".PHP" does not mean you cannot used DHTML. The PHP extension simply means there is PHP code within. If you put PHP code in a normal HTML file the PHP interpreter will not transact the PHP code. You can include Javascript, vbScript, CGI calls, Java App's or anything else you desire in the index.php file.

July 7th, 2006, 16:46	#85
Newbee22 Join Date: Jul 2006 Posts: 3	Thank you Anna for your tips!! Anna- I just read all of your 10 tips. I am a new admin to Mambo and really appreciate the time you put into your posts. You did a great job breaking things down as well as using vocabulary and humor that the average "newbee" could receive. I was very impressed by your layout and delivery of information. Thanks Newbee22

August 19th, 2006, 23:48	#86
silicon1970 Join Date: Aug 2006 Posts: 7	The right information for mambo beginners This is an excellent article and should be really in the Mambo project document. I have been struggling for weeks and this alone gives me the comlete picture compared to all other docs which made be believe the whole thing were disconnected pieces that one has to figure how to join. I read this article and drew the little pieces of the puzzle and now has a good understanding about how to proceed. Thx for writing something like this.

June 22nd, 2006, 11:55	#84
alicejiang Join Date: Apr 2006 Posts: 2	Thank your reply. Index.php is one of the template file. I am going to do some function with php code. I mean can I make a php file in content? I don't want put many dynamic functions such a form in index.php.

August 22nd, 2006, 21:43	#87
thegent Join Date: Mar 2006 Location: Johannesburg Posts: 2,174	praisepalm did you look at the beginning of this thread COS YOU ARE IN ANNAS TIPS __________________ My Mambo www.f1za.co.za Help us Help you. Please give all relevant information For addons go to mamboxchange

December 22nd, 2006, 02:57	#89
Silo24X Join Date: Dec 2006 Posts: 2	I'm commending you on a great 10 tips. These are awesome helpers, and I think it will help me along the way to being a knowledgable admin. Thanks!

December 29th, 2006, 00:43	#90
sa_designer Join Date: Dec 2006 Posts: 3	Hi Anna Hi Anna I really like ur tutorial but still as being new to mambo I am not able to figure out how to place different content in a web page at different locations. Please Help!!!! Regards S

February 9th, 2007, 17:56	#91
swiftmed Join Date: Feb 2007 Posts: 1	ive gotta comment, im new here but ive just read through this whole post and there is a lot of helpful information here for the user who is new to mambo. personally i use it all the time now as ive seen it to be the ideal solution for most of my needs. The 10 tips you've provided here even taught me a thing or two that i didn't know about mambo so thank you for taking the time to write it. __________________ <please read forum rules>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
You can now use Mambo Components on NON MAMBO sites!!!!!	PhilTaylor (aka PrazGod)	Open Source Products for Mambo	32	April 2nd, 2008 03:46
What is mambo...	pixelsoul	General Discussion	23	October 22nd, 2007 15:55
NZMac.com goes Mambo	Philip Roy	Sites using Mambo	14	July 21st, 2005 22:03
Mambo Architecture	eschen	4.5.x	26	April 16th, 2005 14:12
An extensive listing of Mambo security problems	afaton	Security & Performance	4	December 8th, 2004 19:51