ホームページ >ウェブフロントエンド >jsチュートリアル >マウスオーバー画像変換効果を実装する JavaScript メソッド_JavaScript スキル
マウスオーバー画像変換効果を実装する JavaScript メソッド_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 16:03:401117ブラウズ
この記事の例では、JavaScript を使用して画像上にマウスを置くと変形効果を実現する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。
<html>
<head>
<title>Swap Images with onMouseOver and onMouseOut</title>
</head>
<body bgcolor="#FFFFCC" text="#3300FF">
<CENTER>
<FORM NAME = form1>
<H2>
Move the mouse across to swap the image ...
</H2>
<A HREF="" name= link1
onMouseOver = "ImgOver()" onMouseOut = "ImgOut()">
<IMG NAME = "IMG1"
SRC = "images/follow.jpg" WIDTH = 800 HEIGHT = 600>
</A>
</CENTER>
<SCRIPT LANGUAGE= JavaScript>
function ImgOver()
{
// use an image file you have or use one of XP's wallpaper
document.form1.IMG1.src = 'images/home.jpg';
}
function ImgOut()
{
// use an image file you have or use one of XP's wallpaper
document.form1.IMG1.src = 'images/follow.jpg';
}
</SCRIPT>
</body>
</html>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。