2016-10-14 16 views
-2

私はHTMLとJavascriptを学んでいますが、私は何か間違っていると思われます。マウスでマウスを移動すると画像のサイズが変更されるはずです。私は物事をする方法を学ぶために調査中です。私のサイトのHTMLコードで動作しない単純なスクリプト

<!doctype html> 
<html> 
    <head> 
     <title> Kikito's Sprites </title> 
    </head> 
    <body style="background-color:#ffc299"> 
     <div> 
       <h1 style="color:white"> Kikito Loco Sprite Showcaserino </h1> 


       <img onmouseover="descriptiveTextImg(this)" onmouseout="normalImg(this)" src="monigoteTransparencia.png" alt="Amicable Anthony" style="position:absolute;top:100px;left:-50px;width:300px;height:300px;">    
       <img src="ballinBob.png" alt="Ballin Bob" style="position:absolute;top:90px;left:130px;width:300px;height:300px;"> 

       <img src="severedArm.png" alt="just some pixel gore" style= "position:absolute;top:350px;left:-40px;width:300px;height:300px;"> 
       <img src="shinySkin.png" alt="Shiny Skin" style="position:absolute;top:350px;left:200px;width:300px;height:300px;"> 
       <img src="bigBall.png" alt="a cannonball" style= "position:absolute;top:640px;left:-40px;width:300px;height:300px;"> 
       </div> 


     <script> 
      function descriptiveTextImg(x) 
      { 
      x.style.width = 400px; 
      x.style.height = 400px; 
      } 

      function normalImg(x) 
      { 
      x.style.width = 300px; 
      x.style.height = 300px; 
      } 

     </script> 

    </body> 
</html> 
+1

ビューエラーのために使用JSコンソールの必要はありません。 – imbearr

+0

ありがとう!私はそのことを知らなかった – KikePeris

答えて

3

変更300px'300px'へのすべての出現など

style.widthstyle.heightは、文字列値を期待しています。 300pxは有効なjavascriptコードではありません。あなたは、番号を使用する必要がある場合、すなわち、あなたは変数を使用している場合は、文字列にこれを連結する必要があります:

x.style.width = someIntWidth + 'px'; 
+0

OMG、それは働いて、ありがとうございました。問題は、ホバリング時に画像が大きくなりますが、動きも大きくなりますが、大きくなると実際には「滞在」することが可能なのでしょうか? – KikePeris

0

単にそれのためのCSSを使用しています。ブラウザのほとんどの `はCtrl + Shiftキー+ J`:JS

Jsfiddle

img:hover { 
    transform: scale(1.4,1.4); 
} 
+0

あなたの答えに感謝します!あなたのコードはどこに行きますか?申し訳ありませんが、私はスーパーnoobです – KikePeris

関連する問題