编码以创建和更改图像 [英] coding to create and change an image
本文介绍了编码以创建和更改图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我将如何编写代码来创建名为border1.htm的网页，其中包含无边框的图像，并且当鼠标悬停在图像上时，图像的边框设置为1，这会导致在图像的边缘，当鼠标离开图像时，边框重新分配回0.
How would I write the code to create a web page called border1.htm that contains an image without a border and when the mouse goes over the image the border for the image is set to 1 which causes a line to appear around the edges of the image and when the mouse leaves the image the border is reassigned back to 0.
推荐答案
使用JavaScript，您可以实现相同的效果.
为图像定义OnmouseOver和OnMouseOut.在onmouseover中，定义一个向图像添加边框的JavaScript方法.在onmouseout中，定义一个JavaScript methof，它可以删除边框并将其重置为无边框.
试试吧！
Using JavaScript you can achieve the same.
DefineOnmouseOverandOnMouseOutfor the image. In onmouseover, define a JavaScript method that adds a border to the image. In onmouseout, define a JavaScript methof that removes the border and resets it to no border.
Try!
我建议为此使用jQuery:
http://en.wikipedia.org/wiki/JQuery [ http://jquery.com/ [ ^ ].
您所需要做的就是处理事件hover，该事件需要两个句柄:当鼠标指针移到图像上方时，调用第一个函数，而当鼠标指针移出图像时，调用第二个函数.要更改边框，可以使用功能.addClass和.removeClass.它看起来像这样:
I would advise to use jQuery for this purpose:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^].
All you need is to handle the eventhoverwhich requires two handles: the first function is called when a mouse pointer goes over the image, the second function — when it goes out. For changes in border, you can use the functions.addClassand.removeClass. It will look something like this:
<html>
<head>
<title>...</title>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<style type="text/css"><!--
img.border { border: solid black thin; }
--></style>
</head>
<body>
<img alt="Image" id="image" src = "someImage.png" />
<script type="text/javascript">
(document).ready(function(){ borderClass ="border"; imageElement =
(document).ready(function() { borderClass = "border"; imageElement =
这篇关于编码以创建和更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
