如何在CakePHP中实现JavaScript onmouseover？

我想要做的就是转换与CakePHP的工作如下：如何在CakePHP中实现JavaScript onmouseover？

<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事件行。我需要告诉蛋糕以某种方式使用辅助方法，否则它只会选择没有图像。我不想将整个地址作为导航菜单，并且在不同位置会有多个应用程序实例。

来源

2012-11-05 agit

我已经设法构建了一个使用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的注意事项a：如果将其设置为“button_name a：hover”，则必须将其设置为指定的文本将保持与背景相同的颜色。

希望这会帮助别人。

仍然渴望听到有关使用JS做任何想法。

来源

2012-11-06 05:02:54 agit

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

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

实施例：

回声$ HTML->链接（ “仪表板”， “/仪表板/索引”，阵列（ “的onmouseover”=>“提示（ '试验'）; “）， array（'escape'=> false））;

来源

2012-11-05 09:17:46

不是我所需要的，但感谢您的时间一样，谢谢。 – agit

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-02 10:04:02 Jhanvi

HTML->图像（ 'edit.png'，[ 'URL'=> [ '动作'=>“编辑'，$ playerEventRegistration-> id]]，array（“onmouseover”=>“Tip（'Test'）;”）？>

来源

2015-05-18 13:30:05

如何在CakePHP中实现JavaScript onmouseover？

回答

相关问题