如何在CakePHP中实现鼠标悬停时的JavaScript？

pdtvr36n 于 2022-11-11 发布在 PHP

关注(0)|答案(4)|浏览(152)

我想做的是转换以下代码以使用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以某种方式使用helper方法，否则它只会选择没有图像。我不想把整个地址，因为这是一个导航菜单，将有多个应用程序的示例在不同的位置。

cakephp

来源：https://stackoverflow.com/questions/13229011/how-do-i-implement-javascript-onmouseover-in-cakephp

4条答案

按热度按时间

n8ghc7c11#

此帖子可能会帮助您解决问题。
How do I prevent $html-link() from removing the single quotes when adding an 'onmouseover' event in CakePHP?
示例：
“/dashboard/index”，数组（“onmouseover”=〉“提示（'测试'）;“），数组（'转义' =〉false））;

赞(0）回复(0）举报 2022-11-11

taor4pac2#

我已经设法建立了一个工作周围使用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做这件事的想法。

赞(0）回复(0）举报 2022-11-11

5w9g7ksd3#

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

您可以指定图像链接并提供onmouseover链接

赞(0）回复(0）举报 2022-11-11

mbjcgjjk4#

如果你想在一个网站上做一个测试，请点击这里，然后点击这里。“）？〉

赞(0）回复(0）举报 2022-11-11