Question

What I want to do is convert the following to work with CakePHP:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

I have the following so far:

<?php echo $this->Html->image("animalhealth.png", array(
    "alt" => "Animal Health",
    "onmouseover" => "this.src='animalhealthhover.png'",
    "onmouseout" => "this.src='animalhealth.png'",
    'url' => array('controller' => 'records', 'action' => 'index'
    )
)); ?>

The problem are the onmouseover & onmouseout event lines. I need to tell cake to somehow use the helper method otherwise it just selects no image. I don’t want to have to put the entire address in as the is a navigation menu and there will be multiple instances of the app at different locations.

Answer 1

I have managed to build a work around using CSS.

Made a custom image for the button Icon.

This is what goes in the view/layout page:

<ul class="menu">
<li>
                        <div id="button_name"><?php
                    echo $this->Html->image("name_of_img.png", array(
                        "alt" => "Animal Health",
                        'url' => array('controller' => 'controllerName', 'action' => 'index')));
                    ?>
<?php echo $this->Html->link(__('Link Text'), array('controller' => 'controllerName', 'action' => 'index')); ?> 
                        </div>
                    </li> 
</ul>

If your not using cakePHP you could do it like this in a normal HTML page:

<ul class="menu">
<li>
                        <div id="button_name"><a href="/path/to/page.html"><img src="/path/to/img/imagename.png" alt="Animal Health" /></a><a href="/path/to/page.html">Animal Health</a> 
                        </div>
                    </li>
<ul>

This Makes both the text and the icon clickable.

Then the CSS:

.menu li {padding:0px; border: 0px; margin: 0px; list-style: none;
          float: left; margin-left: 0px; display: block; height: 36px;} //remove any stlying and set up for the menu.

#button_name{background-color: darkorange;
               float: left;
              margin-right: 5px;
               margin-top: 1px;
               margin-bottom: 0px;
               padding: 1px 3px 1px 3px;
               -webkit-border-radius: 5px 5px 0px 0px;
               border-radius: 5px 5px 0px 0px;
               border: 1px black;
               text-align: right;
               color: #6495ED;
               font-weight: bold;
               -webkit-transition: all 1000ms;
               -moz-transition: all 1000ms;
               -o-transition: all 1000ms;
               -ms-transition: all 1000ms;
               transition: all 1000ms;}
#button_name a {
    -webkit-transition: all 1000ms;
    -moz-transition: all 1000ms;
    -o-transition: all 1000ms;
    -ms-transition: all 1000ms;
    transition: all 1000ms;
    font-weight: bold;
    color: #6495ED; 
}
    #button_name:hover
 {background-color: #6495ED;}
    #button_name:hover a // VERY IMPORTANT see note
{
        font-weight: bold;
        color: darkorange;}

This makes a nice button with 2 rounded top corners. When you hover over the button anywhere the background and text colours transition between each other. ie: text goes from blue to orange and background goes from orange to blue.

Note about #button_name:hover a:
You must set it as specified if you set it as “button_name a:hover” the text will stay the same color as the background.

Hopefully this will help someone else.

Still keen to hear any ideas about doing it with the JS.