圖像定位不起作用

我想爲我的侄女做一個網站，有點像她的主頁。我有一些編碼經驗，並且我被卡住了定位圖像。我不知道它有什麼問題。圖像定位不起作用

這裏是我的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的鏈接」的工作一樣！我讓其他選項完美無缺，除此之外。我試着用Margin-Top:163px;和CSS Margin-Right:275px;但剛搬都記錄下來......我想它，當你在它懸停，也爲它的規模不斷增長變化的畫面......

來源

2014-09-27 Holy Man

CSS值都是小寫，TOP =壞。頂部=好 – 2014-09-27 16:41:09

通常是一個好主意要注意的情況。請參見[this]（http://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive）。 – vch 2014-09-27 16:41:14

你的意思是你不能打開facebook.com？ – Satya 2014-09-27 16:42:57

您的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>

來源

2014-09-27 16:49:25 Xenos

是的，關閉錨點標記缺少它。要在徵求建議之前發現這樣的錯誤，您可以通過http://validator.w3.org運行您的HTML。這將幫助您找到許多錯誤，包括這裏的錯誤。 – Edward 2014-09-27 17:45:28

@Edward使用IDE或具有語法顏色的任何軟件（甚至N ++）可以更快地找出這些錯誤。 – Xenos 2014-09-27 19:52:53

好點。我總是假設每個人都已經這樣做了。 – Edward 2014-09-28 04:15:31

你不需要使用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'); 
    }

來源

2014-09-27 16:52:08 Ferdin

不要忘了將「width」和「height」都設置爲「」標籤。因此，你不應該留下任何''''標籤爲空：把'我的Facebook'（例如）放在它裏面，如果需要的話通過CSS隱藏它''#fbimage span {display：none; }''。 – Xenos 2014-09-27 19:55:17

<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>

來源

2014-09-27 17:35:40 TVD

圖像定位不起作用

回答

相關問題