Forgive me I'm a total noob but I'm making an effort - the errors I get seem to be syntactical. I've been working on this for over 10 days and have got it functioning virtually they way that I want it to. However, what I want (ideally) is to have it so that when an element is mousedOver the function then initiates the image rollover on a different element. eg. points 1,2,3. mouseOver point1 initiates a rollover at a random selection from points 1,2 or 3. So for instance the mouse might be at 'demo1' but initiates a rollover at 'demo3'. Hopefully this makes sense. Edit: found this page wich has similar effect except changes the background instead of the other element (eg. mouseOver square results in color/image change on circle) http://ift.tt/1VTkfyt
The first example returns getElementById(..) null, which I think means that the variable pointed has not been defined yet (because it can't be defined until all the elements are loaded). But if it works will it also provide the effect I am hoping for?
<head>
<script>
//preload
window.onload = function(){
var pixel= ("black.png")
inames= ["black1.jpg", "black2.jpeg", "black3.jpg", "black4.jpg", "black5.jpg", "black6.jpg", "black7.jpg", "black8.jpg", "black9.jpg", "black10.jpg", "black11.jpg", "black12.jpg", ,"black.png", "black13.jpg", "black14.jpg", "black15.jpg", "black16.jpg", "black17.jpg", "black18.jpg", "black19.jpg", "black20.jpg", "black21.jpg", "black22.jpg", "black23.jpg", "black.png", "black24.jpg", "black25.jpg", "black26.jpg", "black27.jpg", "black28.jpg", "black29.jpg", "black30.jpg", "black31.jpg", "black32.jpg", "black33.jpg", "black34.jpg", "black35.jpg", "black36.jpg", "black37.jpg", "black38.jpg", "black39.jpg", "black40.jpg", "black41.jpg", "black.png", "black42.jpeg", "black43.jpg", "black44.jpg", "black45.jpg", "black46.jpg", "black47.jpg", "black48.jpg", "black49.jpg", "black50.jpg", "black51.jpg", "black52.jpg", "black53.jpg", "black54.jpg", "black55.jpg", "black56.jpg", "black57.jpg", "black58.jpg"]
var selected
var myImage
var selImage
points= ["demo", "demo1", "demo2", "demo3"]
var pointed
//do not delete
document.getElementById(pointed).onmouseover = function() {mouseOver()};
document.getElementById(pointed).onmouseout = function() {mouseOut()};
document.getElementById(pointed).onmouseover = function() {mouseOver1()};
document.getElementById(pointed).onmouseout = function() {mouseOut1()};
document.getElementById(pointed).onmouseover = function() {mouseOver2()};
document.getElementById(pointed).onmouseout = function() {mouseOut2()};
document.getElementById(pointed).onmouseover = function() {mouseOver3()};
document.getElementById(pointed).onmouseout = function() {mouseOut3()};
//Random Image
function randomPick(arr) {
var selected = arr[Math.floor(Math.random()*inames.length - 1)]
return selected;
}
//Random Element
function randomPoint(arr) {
var pointed = arr[Math.floor(Math.random()*points.length + 1)]
return pointed;
}
//DEMO -> working
function mouseOver() {
var myImage = document.getElementById(pointed);
var selImage = randomPick(inames);
myImage.src = "media/" + selImage;
}
//DEMO -> working
function mouseOut() {
var myImage = document.getElementById(pointed);
myImage.src = "media/black.png";
}
//DEMO1 -> working
function mouseOver1() {
var myImage = document.getElementById(pointed);
var selImage = randomPick(inames);
myImage.src = "media/" + selImage;
}
//DEMO1 -> working
function mouseOut1() {
var myImage = document.getElementById(pointed);
myImage.src = "media/black.png";
}
//DEMO2 -> working
function mouseOver2() {
var myImage = document.getElementById(pointed);
var selImage = randomPick(inames);
myImage.src = "media/" + selImage;
}
//DEMO2 -> working
function mouseOut2() {
var myImage = document.getElementById(pointed);
myImage.src = "media/black.png";
}
//DEMO3 -> working
function mouseOver3() {
var myImage = document.getElementById(pointed);
var selImage = randomPick(inames);
myImage.src = "media/" + selImage;
}
//DEMO3 -> working
function mouseOut3() {
var myImage = document.getElementById(pointed);
myImage.src = "media/black.png";
}
}
</script>
</head>
<body>
<image id="demo1" src="media/black.png" style="position:absolute; top:250px; left:500px; height:auto; width:auto;" onMouseOver=mouseOver1() onmouseOut=mouseOut1() alt="image2">
<image id="demo2" src="media/black.png" style="position:absolute; top:95px; left:50px; height:auto; width:auto;" onMouseOver=mouseOver2() onmouseOut=mouseOut2() alt="image3">
<image id="demo3" src="media/black.png" style="position:absolute; top:500px; left:10px; height:auto; width:auto;" onMouseOver=mouseOver3() onmouseOut=mouseOut3() alt="image4">
</body>
The second example is a rather large snippet of what I have that works, that I have been trying to modify to add the randomisation to. Again, this is my first real effort at coding anything but I've been working my ass off - I wouldn't ask if I could find out how to do it myself. Any help will be much appreciated. I was searching for a more elegant and solution to create the effect that I want but due to time constraints have just decided to do it however works..
<head>
<script type="text/javascript">
//preload
window.onload = function(){
var pixel= ("black.png")
inames= ["black1.jpg", "black2.jpeg", "black3.jpg", "black4.jpg", "black5.jpg", "black6.jpg", "black7.jpg", "black8.jpg", "black9.jpg", "black10.jpg", "black11.jpg", "black12.jpg", ,"black.png", "black13.jpg", "black14.jpg", "black15.jpg", "black16.jpg", "black17.jpg", "black18.jpg", "black19.jpg", "black20.jpg", "black21.jpg", "black22.jpg", "black23.jpg", "black.png", "black24.jpg", "black25.jpg", "black26.jpg", "black27.jpg", "black28.jpg", "black29.jpg", "black30.jpg", "black31.jpg", "black32.jpg", "black33.jpg", "black34.jpg", "black35.jpg", "black36.jpg", "black37.jpg", "black38.jpg", "black39.jpg", "black40.jpg", "black41.jpg", "black.png", "black42.jpeg", "black43.jpg", "black44.jpg", "black45.jpg", "black46.jpg", "black47.jpg", "black48.jpg", "black49.jpg", "black50.jpg", "black51.jpg", "black52.jpg", "black53.jpg", "black54.jpg", "black55.jpg", "black56.jpg", "black57.jpg", "black58.jpg"]
var selected
var myImage
var selImage
//do not delete
document.getElementById("demo").onmouseover = function() {mouseOver()};
document.getElementById("demo").onmouseout = function() {mouseOut()};
document.getElementById("demo1").onmouseover = function() {mouseOver1()};
document.getElementById("demo1").onmouseout = function() {mouseOut1()};
document.getElementById("demo2").onmouseover = function() {mouseOver2()};
document.getElementById("demo2").onmouseout = function() {mouseOut2()};
document.getElementById("demo3").onmouseover = function() {mouseOver3()};
document.getElementById("demo3").onmouseout = function() {mouseOut3()};
//Random Image
function randomPick(arr) {
var selected = arr[Math.floor(Math.random()*inames.length + 1)]
return selected;
}
//DEMO -> working
function mouseOver() {
var myImage = document.getElementById(pointed);
var selImage = randomPick(inames);
myImage.src = "media/" + selImage;
}
//DEMO -> working
function mouseOut() {
var myImage = document.getElementById(pointed);
myImage.src = "media/black.png";
}
//DEMO1 -> working
function mouseOver1() {
var myImage = document.getElementById("demo1");
var selImage = randomPick(inames);
myImage.src = "media/" + selImage;
}
//DEMO1 -> working
function mouseOut1() {
var myImage = document.getElementById("demo1");
myImage.src = "media/black.png";
}
//DEMO2 -> working
function mouseOver2() {
var myImage = document.getElementById("demo2");
var selImage = randomPick(inames);
myImage.src = "media/" + selImage;
}
//DEMO2 -> working
function mouseOut2() {
var myImage = document.getElementById("demo2");
myImage.src = "media/black.png";
}
//DEMO3 -> working
function mouseOver3() {
var myImage = document.getElementById("demo3");
var selImage = randomPick(inames);
myImage.src = "media/" + selImage;
}
//DEMO3 -> working
function mouseOut3() {
var myImage = document.getElementById("demo3");
myImage.src = "media/black.png";
}
</script>
</head>
<body>
<image id="demo" src="media/black.png" style="position:absolute; top:35px; left:200px; height:auto; width:auto;" onMouseOver=mouseOver() onmouseOut=mouseOut() alt="image1">
<image id="demo1" src="media/black.png" style="position:absolute; top:250px; left:500px; height:auto; width:auto;" onMouseOver=mouseOver1() onmouseOut=mouseOut1() alt="image2">
<image id="demo2" src="media/black.png" style="position:absolute; top:95px; left:50px; height:auto; width:auto;" onMouseOver=mouseOver2() onmouseOut=mouseOut2() alt="image3">
<image id="demo3" src="media/black.png" style="position:absolute; top:500px; left:10px; height:auto; width:auto;" onMouseOver=mouseOver3() onmouseOut=mouseOut3() alt="image4">
</body>
Aucun commentaire:
Enregistrer un commentaire