Categories > TinyButStrong general >

How to change images in a dynamic toolbar?

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: Howman
Date: 2005-07-05
Time: 04:49

How to change images in a dynamic toolbar?

I have a menu that spans the top of the page.  The menu consists of three "buttons" which are really images.  Each button has and image for On and Off.

If I am on the home page, the Home button should be set to image btn_home_on.  The other menu items should be set to btn_[page]_off.

Here is what my code looks like...

index.php
include_once('../common.php');
include_once('../tbs_class.php');

$home_btn_on = 'True' ;

$TBS = new clsTinyButStrong ;
$TBS->LoadTemplate(TPLDIR . 'header.htm') ;
$TBS->Show() ;
?>

In the template file, I am using a magnate to determine the correct image based on the parameter passed from index.php...

header.htm
    <a href="index.php">
      <img src="[var.home_btn_on;if [var.home_btn_on;noerr]='True'; then 'img/btn_home_on.jpg';else 'img/btn_home_off.jpg';noerr]" width="123" height="31" border="0"></a>


Is this the correct way to do this?

It doesn't look pretty in Dreamweaver.

If I give this template to one of my designers, he is not going to have a clue what this means.  Is there a way to do this without the if/else in the template.  For instance, could I have index.php detemine the buttons for EVERY menu item and then pass each button name to the template?

Thanks,
Howard
By: RwD
Date: 2005-07-05
Time: 12:51

Re: How to change images in a dynamic toolbar?

Well, first off, designers are meant to design not interpret the data, so you are ok there ;)

To your problem; you could use a block and merge in an array with three records. that will certainly solve the sloppy code problem. But the designer will till not see any pictures or whatever.

Some other things, offtopic again:
In the other thread you say you are interested in using css and elements in the correct way. But in your examples here you are using attributes like width="123", height="31" and border="0" which are all three deprecated and shouldn't be used anymore.
My main css file allways includes a statement alike this:
* {
    /* Set a default font */
    font-family: Arial;
    font-size: 11px;
    color: #000;
   
    /* Solve all padding & margin problems */
    padding: 0;
    margin: 0;
   
    /* Don't like standard borders */
    border: 0;
}

body {
    background-color: #fff;
}
This little code standardizes most styles into a form almost identical on IE and Firefox and for your example removes the border from the image (if there). Later on in the css you can specifically declare margins paddings and borders where YOU want them, rather then where MS/FF programmers put them. But the main advantage is better managable code which is closer to the standard as well...
By: Howman
Date: 2005-07-05
Time: 16:25

Re: How to change images in a dynamic toolbar?

Hi RwD,

Thanks again for answering one of my posts.

Ideally it would be nice if the designer could create the template as html only, and set all of the button images as "Off".  This way the designer can lay out the page in Dreamweaver and it looks okay.  In the img tags he could put some type of indicator that lets the php file "replace" the images with whatever I want.  So the designer would not need to understand if/then/else or other constructs.

Regarding css, again thanks for your input.  After reading your advice on my other post I read a few tutorials.  The Macromedia website has some good ones.  I agree with you that css is the way to go.  I will learn more and try to incorporate it in my next application.

Thanks!
Howard


By: RwD
Date: 2005-07-06
Time: 11:46

Re: How to change images in a dynamic toolbar?

Designers should not do any templates ideally. Designers should simply design what a website should look like and in many places they also make up some behaviour (usually within the limits of the specs). The reasons designers should stay away from the templates is because in doing so they get limited to whatever their tool allows them to. Using illustrator or photoshop or similair is really recommended. It is the programmers job to translate the design into a template because typically a programmer should be more skilled in this. It is possible a designer comes up with something hard, but you can also see that as a challenge...

Dreamweaver or any other wysiwyg tool I have tried do not work really well. They have no clue what using standards means and the are result driven not looking at more aspects at all. For example: If you want to change a template made by dreamweaver so it displays completely different the resulting template will look different from the old one as well... Propper hand coded html doesn't need to change at all as you have seen at www.csszengarden.com already.

I myself use textpad for both the php scripts as the html templates. The advantage is that I am in control of the elements and attributes used and I get syntax coloring for my php scripts as well (and the html)

Hopefully you can do something with my tips.