0

我想要做的是将以下内容转换为与 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&onmouseout事件行。我需要告诉 cake 以某种方式使用辅助方法，否则它只会选择没有图像。我不想输入整个地址，因为它是一个导航菜单，并且在不同位置会有多个应用程序实例。

4

4 回答 4

0

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

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

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

<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 进行此操作的任何想法。

于 2012-11-06T05:02:54.737 回答
0

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

在 CakePHP 中添加“onmouseover”事件时，如何防止 $html-link() 删除单引号？

例子 ：

echo $html->link("Dashboard", "/dashboard/index", array("onmouseover" => "Tip('Test');"), array('escape' => false));

于 2012-11-05T09:17:46.890 回答
0 
echo $html->link($this->Html->image("animalhealth.png", array("alt" => "Animal Health")), array('controller' => 'records', 'action' => 'index'),array("onmouseover" => "Tip('Test');"), null, false);

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

于 2013-02-02T10:04:02.653 回答
0

Html->image('edit.png',['url'=> ['action' => 'edit', $playerEventRegistration->id]],array("onmouseover" => "Tip('Test'); ") ?>

于 2015-05-18T13:30:05.497 回答