preload images using javascript then increase the size using mouseover

Asked Dec 16 '15 at 13:48

Active Dec 16 '15 at 13:48

Viewed 44 times

i have an array has preloaded pictures in it. Then i want to load the picture and when the mouse is over that small picture i want it big. but when i try with the functions nothing happens...

I am really new to Javascript so dont judge me :)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
var MyPics = new Array ("pic1.bmp", "pic2.png", "pic3.bmp", "pic4.bmp",   "pic5.bmp");

var Preload = new Array();

var $i = 0;

for($i; $i < MyPics.length; $i++) {
Preload[$i] = new Image();
Preload[$i].src = MyPics[$i];
}

</script>
</head>
<body>

<a href="" onmouseover="IncSize()" onmouseout="imgDecr()"> </a>
<img id="pictureone" src="pic1.bmp" width="100">
<script>

function IncSize() {
document.getElementById("pictureone").style.width="200px";
}

function imgDecr() {
document.getElementById("pictureone").style.width="100px";
}
</script>
</body>
</html>

asked Dec 16 '15 at 13:48

BeginnerJavascript

1

So which bit isn't working then? – ggdx Dec 16 '15 at 13:49
http://stackoverflow.com/questions/476679/preloading-images-with-jquery Preloading images with jquery - do you saw this one? – silverfighter Dec 16 '15 at 13:50
– Olencha Dec 16 '15 at 13:54
when i try the first picture it wont get bigger when the mouse is over it. No silverfighter, i have not seen that one, and i cant do jquery, i never read it – BeginnerJavascript Dec 16 '15 at 13:54
ah ty @Andrii Olenchenko.. i missed the – BeginnerJavascript Dec 16 '15 at 13:55

preload images using javascript then increase the size using mouseover

0 Answers0