Question

我正在为我的侄女创建一个网站，有点像她的主页。我有一点编码经验，我卡住了定位图像。我不知道它有什么问题。

这是我的HTML代码：

<html>
<head>
<title>MWM</title>
<h1>Welcome to ---- HomePage!</h1>
<link rel="stylesheet" type="text/css" href="C:\Style.css">
<script language="javascript">
        function MouseRollover(MyImage) 
        {MyImage.src = "C:\N2.png";}

        function MouseOut(MyImage)
        {MyImage.src = "C:\N1.png";}

        function MouseRollover2(MyImage)
           {MyImage.src = "C:\C2.png";}

        function MouseOut2(MyImage)
            {MyImage.src = "C:\C1.png";}

            function MouseRollover3(MyImage)
           {MyImage.src = "C:\Y2.png";}

        function MouseOut3(MyImage)
            {MyImage.src = "C:\Y1.png";}

            function MouseRollover4(MyImage)
           {MyImage.src = "C:\H2.png";}

        function MouseOut4(MyImage)
            {MyImage.src = "C:\H1.png";}
</script>
</head>
<body>
<!--Cartoons-->
<a class="Dec" href="C:\Cartoons.html">
<img class="border size" src="C:\C1.png" onMouseOver="MouseRollover2(this)" onMouseOut="MouseOut2(this)">
</a>
<!--Google-->
<a Class="Dec" href="http://www.Google.com">
<img id="N" class="border size" src="C:\N1.png" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
</a>
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<!---->
</body>
</html>

这是我的CSS：

body {Background-color: lime;}
h1 {text-align: center;Color: Black;}
/**/
.Border {border-style: inset;border-width: 10px;border-bottom-color: #454545;border-right-color: #454545; border-top-color: #DEDEDE; border-left-color: #DEDEDE;}
.Dec {text-decoration: None;}
.Size {height: 57px;width: 227px;}
.SY {height:77px;Width: 227px}
/*
Postion Equation: (Height+20Border+IconLeft+20Image growth)="Height"
                  (Width+20Border+IconLeft+20Image growth)="Width"
*/
#C {position:absolute;}
#N {position:absolute; TOP:163px; LEFT:275px;}
#Y {position:absolute; TOP:260px; LEFT:542px;}
#H {position:absolute; TOP:163px; RIGHT:275px;}
/**/
img:link {}
img:visited {}
img:hover {height: 77px;width: 247px;}
img:hover.SY {height: 97px;Width: 247px;}
/**/

即使我做了所有相同的事情，我仍然无法使“Facebook Link”工作！除了那个之外，我让其他所有选项都完美无缺。我尝试在CSS中使用Margin-Top:163px;和Margin-Right:275px;，但这只是将所有内容都移动了...我希望它在您将鼠标悬停在其上时更改图片，并且还要使其大小增加...

Answer 1

你根本不需要使用JavaScript 根据我的理解，你只希望图片在悬停时改变。所以这就是你需要做的。

HTML

<a href ="http://www.facebook.com" id="fbimage"></a>

CSS

#fbimage{
    background-image:url('fbimage.png');
}

    #fbimage:hover{
        background-image:url('fbhoverimage.png');
    }

Answer 2

您忘记了Youtube链接后的>：

<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a>
<!-- Right up ^ here-->

<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>

Answer 3

<html>
    <head>
        <title>MWM</title>
        <style>
            .container{
                background-color: lime;
                width:100%;
                height:100%;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
                position:absolute;

            }
            h1 {text-align: center;color: black;font-size:3em;}

            ul{
                list-style-type:none;
            }
            a{
                display:block;
                border-style: inset;
                border-width: 10px;
                border-bottom-color: #454545;
                border-right-color: #454545; 
                border-top-color: #DEDEDE; 
                border-left-color: #DEDEDE;
                height:100px;
                width:200px;
                position:absolute;
                background:red;
                float:left;
                text-align: center;
                vertical-align: middle;
                color:white;
                font-size:2em;
                line-height:100px;
            }
            a.cartoon{
                top:0;
                left:0;
                background:url(C:\C1.png) blue;
            } 
            a.cartoon:hover{
                background:url(C:\C2.png)aqua;
            }
            a.google{
                top:200;
                left:200;
                background:url(C:\G1.png) yellow;
            } 
            a.google:hover{
                background:url(C:\G2.png)gold;
            }
            a.youtube{
                top:400;
                left:400;
                background:url(C:\Y1.png) red;
            } 
            a.youtube:hover{
                background:url(C:\Y2.png)darkred;
            }
            a.facebook{
                top:600;
                left:600;
                background:url(C:\F1.png) green;
            } 
            a.facebook:hover{
                background:url(C:\F2.png)lawngreen;
            }
        </style>
    </head>
<body>
    <div class="container">
    <h1>Welcome to ---- HomePage!</h1>
        <a href="#" class="cartoon link">Cartoon</a>
        <a href="#" class="google link">Google</a>
        <a href="#" class="youtube link">Youtube</a>
        <a href="#" class="facebook link">Facebook</a>
    </div>
</body>
</html>

图像的定位不起作用

3 个答案: