Javascript 将鼠标上方的中心img更改为较小的img_Javascript_Html_Css_Image

Javascript 将鼠标上方的中心img更改为较小的img

javascript html css image

Javascript 将鼠标上方的中心img更改为较小的img,javascript,html,css,image,Javascript,Html,Css,Image,需要代码方面的帮助我需要在中间有一个大的img和一排6个小的img。这是我到目前为止所做的，因为某些原因我无法改变它 <!DOCTYPE html> <html> <head> <title>Assignment 5</title> </head> <body onload="conv()"> <img id="img1" style="height:1000px;" src="http://www.alb

需要代码方面的帮助我需要在中间有一个大的img和一排6个小的img。这是我到目前为止所做的，因为某些原因我无法改变它

<!DOCTYPE html>
<html>
<head>
<title>Assignment 5</title>
</head>
<body onload="conv()">
<img id="img1" style="height:1000px;" src="http://www.albany.edu/~ds857942/Images/globemain.jpg"         alt="taiwan">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globemain.jpg" alt="taiwan">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe2.jpg" alt="car">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe3.jpg" alt="globeC">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe4.jpg" alt="globeD">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe5.jpg" alt="globeE">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe6.jpg" alt="globeF">

<script>
function conv() {
var a = document.getElementById("img1");
var b = document.getElementsByTagName("img");
a.style.height=0.6* screen.availHeight + "px";
a.style.height= 0.6* screen.availWidth + "px";

for (var x = 1;x<=6;x++) {
b[x].style.height=0.15* screen.availHeight + "px";
b[x].style.height=0.15* screen.availwidth + "px";
}
}
function new(img1){
document.getElementById("img1").src = eval( img1 + b[x].src );  
}
</script>


</body>
</html>


任务5
函数conv（）{
var a=document.getElementById（“img1”）；
var b=document.getElementsByTagName（“img”）；
a、 style.height=0.6*screen.availHeight+px；
a、 style.height=0.6*screen.availWidth+“px”；
对于（var x=1；xCSS3转换将非常适合于此。只需在CSS中执行以下操作：
body > img {
    height:100px;
    transition:height .5s;
}
body > img:hover {
    height:50px;
}

您目前似乎没有CSS文件，因此我建议您创建一个CSS文件，或者将样式添加到style标记中的head标记中。
“New”是JS中的一个关键字