Question

我想要做的是转换以下内容以使用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>

到目前为止，我有以下内容：

<?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'
    )
)); ?>

问题在于onmouseover＆amp; onmouseout个事件行。我需要告诉蛋糕以某种方式使用辅助方法，否则它只选择没有图像。我不想将整个地址放在导航菜单中，并且应用程序的不同位置会有多个实例。

Answer 1

这篇文章可以帮助您解决问题。

How do I prevent $html-link() from removing the single quotes when adding an 'onmouseover' event in CakePHP?

示例：

echo $ html-＆gt; link（“信息中心”， “/仪表板/索引”， array（“onmouseover”=＆gt;“Tip（'Test'）;”）， array（'escape'=＆gt; false））;

Answer 2

我已经设法构建了一个使用CSS的工作。

为按钮Icon制作了自定义图像。

这是视图/布局页面中的内容：

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

如果你没有使用cakePHP，你可以在普通的HTML页面中这样做：

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

这使文本和图标都可以点击。

然后是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;}

这是一个漂亮的按钮，有2个圆角顶角。当您将鼠标悬停在按钮上时，背景和文本颜色之间会相互转换。即：文本从蓝色变为橙色，背景从橙色变为蓝色。

关于#button_name的注意事项：hover a：如果将其设置为“button_name a：hover”，则必须将其设置为指定，文本将保持与背景颜色相同。

希望这会帮助别人。

仍然希望听到有关用JS做这件事的任何想法。

Answer 3

echo $html->link($this->Html->image("animalhealth.png", array("alt" => "Animal Health")), array('controller' => 'records', 'action' => 'index'),array("onmouseover" => "Tip('Test');"), null, false);

您可以指定与图像的链接，并使用该链接提供onmouseover

Answer 4

Html-＆gt; image（'edit.png'，['url'=＆gt; ['action'=＆gt;'edit'，$ playerEventRegistration-＆gt; id]]，array（“onmouseover”=＆gt; “提示（'测试'）;”）？＆gt;

如何在CakePHP中实现JavaScript onmouseover？

4 个答案: