方式有多种
这里提供两个简单的案例,
一、使用图片标签按钮
< input name=”submit” type=”image” src=”图片存放路径” />
二、使用button按钮,为之加上图片样式
< input type=”submit” name=”button” id=”button” value=”” />
为按钮加上样式
#button{
background:url(图片存放路径) no-repeat;
width:100px;
height:50px;
border:0px;
cursor:pointer;
}
三、在a标签里加上图片,呈现出图片按钮的效果
< a href=’#’ taget=”_blank”> < img src=”图片存放路径” alt=”这是个图片按钮” /> < a/>
< img> 插入图片标签。 src是这个图片标签的属性,意思为地址 images/top_14.jpgimages是文件夹,一般都用这个名字作为图片的文件夹 top_14.jpg就是图片名称,看名字应该是头部的图片。 还有width是宽度height是高度border=0边框粗细。
可以用js事件“onmouseover”和“onmouseout”来实现。
1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:
2、添加“onmouseover”js事件,首先使用“document.getElementById”获取到图片标签,然后定义鼠标移动到图片上时发生的事件,这时图片将会放大:
3、添加“onmouseout”js事件,首先获取图片标签,然后定义鼠标移开图片时发生的事件,这时图片将会缩小: