javascript - Change center img to smaller ones on mouseover -


need code need big img in center , row of 6 smaller ones. here did far cant change reason ...

<!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 = 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;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> 

css3 transitions work this. in css:

body > img {     height:100px;     transition:height .5s; } body > img:hover {     height:50px; } 

it seems not have css file advise make 1 or add styles head tag inside style tags.


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -