[英]How do I implement JavaScript onmouseover in CakePHP?
我想要做的是将以下内容转换为与 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
事件行。 我需要告诉蛋糕以某种方式使用辅助方法,否则它不会选择任何图像。 我不想将整个地址放入其中,因为这是一个导航菜单,并且在不同位置会有多个应用程序实例。
这篇文章可能会帮助您解决问题。
在 CakePHP 中添加“onmouseover”事件时,如何防止 $html-link() 删除单引号?
例子:
echo $html->link("Dashboard", "/dashboard/index", array("onmouseover" => "Tip('Test');"), array('escape' => false));
我设法围绕使用 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 执行此操作的任何想法。
echo $html->link($this->Html->image("animalhealth.png", array("alt" => "Animal Health")), array('controller' => 'records', 'action' => 'index'),array("onmouseover" => "Tip('Test');"), null, false);
您可以指定带有图像的链接,并为该链接提供 onmouseover
Html->image('edit.png',['url'=> ['action' => 'edit', $playerEventRegistration->id]],array("onmouseover" => "提示('测试'); ")?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.