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イベントラインです。どういうわけかヘルパーメソッドを使用するようにケーキに指示する必要があります。そうしないと、画像が選択されません。はナビゲーションメニューであり、さまざまな場所にアプリの複数のインスタンスがあるため、アドレス全体を入力する必要はありません。

4

4 に答える 4

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

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_namea：hover」として設定する場合は、指定どおりに設定する必要があります。テキストは背景と同じ色のままになります。

うまくいけば、これは他の誰かを助けるでしょう。

JSでそれを行うことについてのアイデアを聞くことにまだ熱心です。

于 2012-11-06T05:02:54.737 に答える
0 
echo $html->link($this->Html->image("animalhealth.png", array("alt" => "Animal Health")), array('controller' => 'records', 'action' => 'index'),array("onmouseover" => "Tip('Test');"), null, false);

画像とのリンクを指定し、そのリンクをマウスオーバーに提供できます

于 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 に答える