网站推广.NET

网站推广.NET

简单介绍关于前端的onmouseover事件(实例)

来源:互联网

修改别人的模板遇到一个问题,分类图的切换默认是五个,我想增加四个,一直没有增加成功。它使用的onmouseover 事件。

onmouseover怎么用?

去查了一下:

定义和用法

onmouseover 事件会在鼠标指针移动到指定的对象上时发生。

语法

onmouseover="SomeJavaScriptCode"
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, , <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <p>, </p><dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img  alt="简单介绍关于前端的onmouseover事件(实例)" >, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, </p><pre class="brush:php;toolbar:false">, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><h3 style="margin:20px 0px 0px; padding:0px; border:0px; font-size:12px">支持该事件的 JavaScript 对象:</h3><pre style="margin-top:10px; margin-bottom:0px; padding:10px; border:1px dotted rgb(119,136,85); font-family:Consolas," courier new width:685px background:rgb class="brush:php;toolbar:false;">layer, link

onmouseover用法实例 1

在下面的例子中,我们将在用户把鼠标指针移动到图像上时显示一个对话框:

<img  alt="简单介绍关于前端的onmouseover事件(实例)" >

输出:(请把鼠标移动图片上):


鼠标放上去会切换另外一个图。

立即学习“前端免费学习笔记(深入)”;

附上代码:

<html><head><script type="text/javascript">function mouseOver(){document.getElementById(&#39;b1&#39;).src ="/i/eg_mouse.jpg"}function mouseOut(){document.getElementById(&#39;b1&#39;).src ="/i/eg_mouse2.jpg"}</script></head><body><a href="http://www.w3school.com.cn" onmouseover="mouseOver()" onmouseout="mouseOut()"><img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" /></a></body></html>

我的业务代码:

<p class="wscp_t">     {dede:type typeid=11}<a href="[field:typelink/]" class="wscp_on" id="wscp_1" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;1&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);" >[field:typename/]</a> {/dede:type}    {dede:type typeid=12}<a href="[field:typelink/]" class="wscp_off" id="wscp_2" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;2&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a> {/dede:type}    {dede:type typeid=13}<a href="[field:typelink/]" class="wscp_off" id="wscp_3" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;3&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a> {/dede:type}    {dede:type typeid=14}<a href="[field:typelink/]" class="wscp_off" id="wscp_4" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;4&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a> {/dede:type}    {dede:type typeid=15}<a href="[field:typelink/]" class="wscp_off" id="wscp_5" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;5&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a>{/dede:type} {dede:type typeid=16}<a href="[field:typelink/]" class="wscp_off" id="wscp_6" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;6&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a>{/dede:type}{dede:type typeid=19}<a href="[field:typelink/]" class="wscp_off" id="wscp_7" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;7&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a>{/dede:type}    {dede:type typeid=20}<a href="[field:typelink/]" class="wscp_off" id="wscp_8" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;8&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a>{/dede:type} </p>

代码结束。其中:,'wscp_a','1','9' 代表的意思是1,第一个,9,一共九个

下面就是调用的html:

 <p class="wscp_c" id="wscp_a1" style="display:block;">    <ul>      {dede:arclist row=4 typeid=11}      <li> <a href="[field:arcurl/]" title="[field:title/]"><img src="[field:litpic/]"  alt="[field:title/]" title="[field:title/]" width="262"    style="max-width:90%"/></a>        <p><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></p>      </li>      {/dede:arclist}    </ul>  </p>

标签: onmouseover