Question

我正在为一个免费的工作朋友建立一个网站，显然我的知识和经验有限，这就是我在这里寻求帮助的原因。

我不确定我是否需要.js文件或.css文件才能使onmouseover工作;我现在完全没有想法了。

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>

    <head>
        <!-- CHANGE THE NEXT THREE LINES -->
        <title>Parkley Visual Arts</title>
        <meta name="Description" content="Parkley Visual Arts. Graphic Design & Art">
        <meta name="KeyWords" content="Graphic Design, Graphic Arts, Frame Pictures, Frame Pics, Photopgraphy, Leamington Arts, Leamington Graphics, Leamington Designs, Warwickshire Graphic Arts">
        <!-- CHANGE THE ABOVE THREE LINES -->
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <META name="Copyright" content="Copyright 2013 Parkley Visual Arts">
        <META http-equiv="Content-Language" content="en">
        <META name="revisit-after" content="15 days">
        <META name="robots" content="index, follow">
        <META name="Rating" content="General">
        <META name="Robots" content="All">
        <!-- InstanceBeginEditable name="head" -->
        <!-- InstanceEndEditable -->
        <link rel=StyleSheet href="corporatestyle.css" type="text/css" media="screen">
        <script language="JavaScript" src="javascripts.js"></script>
        <script language="JavaScript" src="pop-closeup.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                "use strict";
                var Minilogo, Eyewinker, LearnMore;
                Minilogo = document.getElementById('Minilogo');
                Eyewinker = document.getElementById('Eyewinker');

                Minilogo.onmouseover = function() {
                    Minilogo.src = 'Minilogo.gif';
                };
                Eyewinker.onmouseover = function() {
                    TW.src = 'Eyewinker.gif';
                };

                Minilogo.onmouseout = function() {
                    Minilogo.src = 'Minilogo.gif';
                };
                Eyewinker.onmouseout = function() {
                    Eyewinker.src = 'Eyewinker.gif';
                };
            };

            if (browser == "Microsoft Internet Explorer") {
                countryListItem.attachEvent('onmouseover', sp.showPanel('item' + x), false);
            } else {
                countryListItem.addEventListener('mouseover', sp.showPanel('item' + x), false);
            }

            function swapImage(imgID, imgSrc) {
                var theImage = document.getElementById(imgID)
                theImage.src = imgSrc;
            }

            function preLoadImages() {
                for (var i = 0; i < arguments.length; i++) {
                    var tmpImage = new Image();
                    tmpImage.src = arguments[i];
                }
            }
        </script>
    </head>

    <body onload="preLoadImages('Eyewinker.gif');">
        <div style="text-align: center;">
            <center><a href="http://www.parkleyvisualarts.com/construction.htm"><img id="imgToSwap" src="Minilogo.gif" alt="animated gif" onmouseover="swapImage('imgToSwap', 'Eyewinker.gif')" onmouseout="swapImage('imgToSwap', 'Minilogo.gif')" /></a>

        </div>
    </BODY>

</HTML>

Answer 1

如果你是新手，你应该尽量避免使用冗长的JavaScript，因为你很难管理。相反，我建议您先从onmouseover和onmouseout等图片属性开始。请考虑以下事项：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hover-Fading Buttons</title>
        <base href="http://parkleyvisualarts.com/" />
        <style>
            img.logo {
                width: 300px;
                height: 300px;
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <img src="Minilogo.gif" class="logo"
             onmouseover=" this.src = 'Eyewinker.gif' " 
             onmouseout=" this.src = 'Minilogo.gif' " />
    </body>
</html>

Onmouseover IE问题

1 个答案: