Currently working on a website where I want to incorporate multiple rollovers using the same base image (distributed black pixels all over the page to create a popup effect). I decided that the best way to approach this is to use an array with all the rollover images and another array with the base image (pixel.png). I encountered many difficulties in getting the images to display, and even after successfully displaying the background image, I am struggling to make the rollover function work. Despite trying to troubleshoot using Chrome developer tools, I couldn't find any error message. I suspect it may be a simple issue like not calling the functions correctly, but I just can't seem to pinpoint it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var revert = new Array('pixel.png');
var inames = new Array('black1off.jpg', 'black2off.jpeg');
//preload
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i] = "media/"+inames[i];
}
}
function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]];
document.images[inames[num]] = flipped[num];
}
}
function out(num) {
if(document.images) {
document.images[inames[num]] = revert[num];
}
}
</script>
</head>
<body>
<body bgcolor="#000000">
<img src="media/pixel.png" name="pixel" height="50px" width="50px" style="position:absolute; top:30px; left:50px;" onMouseOver="over(0)" onMouseOut="out(0)">
<img src="media/pixel.png" name="pixel" height="50px" width="50px" style="position:absolute; top:30px; left:200px;" onMouseOver="over(1)" onMouseOut="out(1)">
</body>
</html>