PDA

View Full Version : Mouseover sequence



Dell2
02-12-2012, 11:56 AM
Hi there.

I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on.

I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term.

Thanks.

Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh.

Philip M
02-12-2012, 12:28 PM
Here you are-



<img id= "myimage" src = "One.jpg" onmouseover = "rotate()">

<script type = "text/javascript">

var images = ["One.jpg", "Two.jpg", "Three.jpg","Four.jpg"];
var count = 1;
function rotate() {
document.getElementById("myimage").src = images[count];
count ++;
if (count >=images.length) {count = 0}
}

</script>

Add more images to the array in whatever order you want them to appear.


In what other sport do you play six hours of tennis? - Commentator British Eurosport.

Dell2
02-12-2012, 12:48 PM
I'm very thankful, that worked brilliantly. :)

Dell2
02-12-2012, 08:19 PM
One more question, Philip M. Would there be any reason why multiples of these would not run together? I'm using 24 frames on one page, each having it's own version of the bit of code you posted. While the pages of these frames work fine individually, they don't seem work at all when put together.

The html for the page that holds the frames is:
<html>
<body bgcolor=#000000>

<frameset cols="54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54,54" frameborder="no">

<frame src="01.html" />
<frame src="02.html" />
<frame src="03.html" />
<frame src="04.html" />
<frame src="05.html" />
<frame src="06.html" />
<frame src="07.html" />
<frame src="08.html" />
<frame src="09.html" />
<frame src="10.html" />
<frame src="11.html" />
<frame src="12.html" />
<frame src="13.html" />
<frame src="14.html" />
<frame src="15.html" />
<frame src="16.html" />
<frame src="17.html" />
<frame src="18.html" />
<frame src="19.html" />
<frame src="20.html" />
<frame src="21.html" />
<frame src="22.html" />
<frame src="23.html" />
<frame src="24.html" />


</frameset>

</html>

Philip M
02-12-2012, 08:43 PM
You cannot have multiple Javascripts on the same page with duplicate function or variable names, as the second over-writes the first.

You need to rename all the functions and variables in the second, third script, with say a suffix A, B etc.


var imagesA = ["One.jpg", "Two.jpg", "Three.jpg","Four.jpg"];
var countA = 1;
function rotateA() {

Be aware that many people regard frames are evil. Frames cause severe usability problems.

Dell2
02-12-2012, 09:25 PM
Thanks, that should do it. :thumbsup:

I used frames because I'm pretty much a dinosaur when it comes to these things. :p It's also not really going to be a problem because I'm just going to show it to one person. Thanks for letting me know though, I appreciate it.

Dell2
02-12-2012, 11:54 PM
I've readjusted all 24 pages, but it still doesn't work. Example of what it looks like now for page nr 15:


<body bgcolor=#000000>

<img id= "myimage15" src = "q.jpg" onmouseover = "rotate15()">

<script type = "text/javascript">

var images15 = ["t.jpg", "q.jpg", "e.jpg", "t.jpg", "q.jpg", "e.jpg", "q.jpg", "i.jpg", "d.jpg", "q.jpg", "e.jpg", "q.jpg", "q.jpg", "h.jpg", "s.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg"];
var count15 = 1;
function rotate15() {
document.getElementById("myimage15").src = images15[count15];
count15 ++;
if (count15 >=images15.length) {count15 = 0}
}

</script>


Not sure if I am still missing a function or variable here, I don't think so?

If it is indeed the frames that are causing this, would it be better if I just lump all these together on one page, perhaps in a table instead?

xelawho
02-13-2012, 12:23 AM
this method might make it a little easier for you. I only did it with 3 arrays of images, but it can be extended to as many as you like, as long as you keep the number of img tags and arrays the same and remember to add the array names to the arrays array:



<html>
<head>
<style>
.thumb{
height:100px;
width:200px;
}
</style>
</head>
<body>
<div id="thumbarea">
<img class="thumb"></img><img class="thumb"></img><img class="thumb"></img>
<div>

<script type="text/javascript">
var horses=["http://www-tc.pbs.org/wnet/nature/files/2008/10/na_img_horses_intro.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Nokota_Horses_cropped.jpg/250px-Nokota_Horses_cropped.jpg","http://www.europeword.com/blog/wp-content/uploads/europe-horses-300x225.jpg"]
var cats=["http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/5/57/GAto.jpg/220px-GAto.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cat-eating-prey.jpg/220px-Cat-eating-prey.jpg"]
var bridges=["http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Akashi-kaikyo_bridge3.jpg/337px-Akashi-kaikyo_bridge3.jpg","http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Sio_se_pol.jpg/337px-Sio_se_pol.jpg","http://wirednewyork.com/images/bridges/hell-gate-bridge/hell_gate_bridge_triborough_7apr02_s.jpg"]
var arrays=[horses,cats,bridges]


var thumbs=document.getElementById("thumbarea").getElementsByTagName("img")
for(x=0;x<thumbs.length;x++){
thumbs[x].src=arrays[x][0]
thumbs[x].onmouseover=(function(x) {
return function() {
thearray=arrays[x]
thearray.unshift(thearray.pop())
this.src=thearray[0]
}
})(x);
}
</script>
</body>
</html>

Dell2
02-13-2012, 10:26 AM
Thanks Xelawho. I'm kind of wishing I had time to finish the other script but I really need to get this done before tomorrow. I better get started. The arrays of the other script took me hours to write down. :p

Edit: Philip M.. if you read this and know how to make the first one work, please don't hold back the answer. Chances are it will still save me hours of work.

Sigh, what we do for love. :)

Philip M
02-13-2012, 10:44 AM
Edit: Philip M.. if you read this and know how to make the first one work, please don't hold back the answer. Chances are it will still save me hours of work.



Get rid of your frames - they will probably not be supported in future versions of HTML. Just use CSS to position your images.

Dell2
02-13-2012, 11:18 AM
Thanks. Slightly unfamiliar territory, but I know how to read code.

The script was working with 3 arrays of 24 images. It stopped working when I increased the number of arrays to 24, changed the names of the arrays to their corresponding number, increased the amount of <img class="thumb"></img>'s to 24 and finally increased the arrays array with the remaining numbers.

Still looking over the thing to see what I did wrong.

Shortened version of all that code:

<html>
<head>
<style>
.thumb{
height:66px;
width:53px;
}
</style>
</head>
<body>
<div id="thumbarea">
<img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img><img class="thumb"></img>

<div>

<script type="text/javascript">
var 01=["q.jpg", "q.jpg", "q.jpg", "q.jpg", "l.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "p.jpg", "s.jpg", "s.jpg", "t.jpg", "f.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg"]
var 02=["q.jpg", "q.jpg", "q.jpg", "q.jpg", "l.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "p.jpg", "s.jpg", "s.jpg", "t.jpg", "f.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg"]
.... :rolleyes:
var 23=["q.jpg", "q.jpg", "q.jpg", "q.jpg", "l.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "p.jpg", "s.jpg", "s.jpg", "t.jpg", "f.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg"]
var 24=["q.jpg", "q.jpg", "q.jpg", "q.jpg", "l.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "p.jpg", "s.jpg", "s.jpg", "t.jpg", "f.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg", "q.jpg"]
var arrays=[01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]



var thumbs=document.getElementById("thumbarea").getElementsByTagName("img")
for(x=0;x<thumbs.length;x++){
thumbs[x].src=arrays[x][0]
thumbs[x].onmouseover=(function(x) {
return function() {
thearray=arrays[x]
thearray.unshift(thearray.pop())
this.src=thearray[0]
}
})(x);
}
</script>
</body>
</html>

xelawho
02-13-2012, 12:55 PM
variable names cannot start with a number. as far as I can see, all you have to do is rename your arrays something like



var q01=["q.jpg", "q.jpg",//etc]
var q02=["q.jpg",//etc


and edit your arrays array correspondingly.

var arrays=[q01,q02,//etc

Dell2
02-13-2012, 01:57 PM
Thank you! Almost there. ;)

The arrays starts with the right images, but then they all come out backwards (afedcba~ instead of abcdefa~) I'm guessing this bit is responsible:

var thumbs=document.getElementById("thumbarea").getElementsByTagName("img")
for(x=0;x<thumbs.length;x++){
thumbs[x].src=arrays[x][0]
thumbs[x].onmouseover=(function(x) {
return function() {
thearray=arrays[x]
thearray.unshift(thearray.pop())
this.src=thearray[0]
.. but the x++ implies, in my eyes, that a value is being increased.. so I do not understand where this is going wrong. Reversing all the images in every array would be a lot of work.

vwphillips
02-13-2012, 02:36 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var ImageArray1=['http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg']
var ImageArray2=['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg']

function Swap(id,ary){
if (!Swap[id]){
Swap[id]=0;
}
Swap[id]=++Swap[id]%ary.length;
document.getElementById(id).src=ary[Swap[id]];

}
/*]]>*/
</script>

</head>
<img id="i1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" width="200" height="150" onmouseover="Swap('i1',ImageArray1);" />
<br />
<br />
<br />
<img id="i2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="200" height="150" onmouseover="Swap('i2',ImageArray2);" />
<body>

</body>

</html>

or


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#img {
position:absolute;overflow:hidden;left:100px;top:100px;width:200px;height:150px;background-Color:#FFFFCC;border:solid red 1px;
}


#img2 {
position:absolute;overflow:hidden;left:400px;top:100px;width:200px;height:150px;background-Color:#FFFFCC;border:solid red 1px;
}


#img3 {
position:absolute;overflow:hidden;left:700px;top:100px;width:200px;height:150px;background-Color:#FFFFCC;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>

<div id="img" >
<a href="http://www.vicsjavascripts.org.uk/"><img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /></a>
<img title="Egypt 6" class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img title="Egypt 7" class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
</div>

<div id="img2" >
</div>

<div id="img3" >
</div>



<script type="text/javascript">
/*<![CDATA[*/
// Flip Image (12-Febuary-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


function zxcFlip(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height','offsetTop','offsetHeight']:['left','width','offsetLeft','offsetWidth'],obj=document.getElementById(o.ID),iary=o.ImageArray,iary=typeof(iary)=='object'&&iary.constructor==Array?iary:[],lgth=iary.length,a,imgs=obj.childNodes,img,ms=o.FlipDuration,sz=obj[mde[3]],ary=[],z0=lgth-1,z1=0,z2=0;
for (;z0>=0;z0--){
if (iary[z0]&&iary[z0][0]&&typeof(iary[z0][0])=='string'){
a=document.createElement('A');
img=document.createElement('IMG');
img.src=iary[z0][0];
if (iary[z0][1]){
a.href=iary[z0][1];
}
if (iary[z0][2]){
img.title=iary[z0][2];
}
a.appendChild(img);
obj.appendChild(a);
}
}
for (;z1<imgs.length;z1++){
img=imgs[z1].nodeName.toUpperCase()!='A'?imgs[z1]:imgs[z1].getElementsByTagName('IMG')[0];
if (imgs[z1].nodeType==1&&img){
ary.push(img);
}
}
lgth=ary.length;
if (lgth>1){
ary=ary.reverse();
for (;z2<lgth;z2++){
ary[z2].style.position='absolute';
ary[z2].style.left='0px';
ary[z2].style.top='0px';
ary[z2].style.width=obj.offsetWidth+'px';
ary[z2].style.height=obj.offsetHeight+'px';
ary[z2].style.borderWidth='0px';
ary[z2].style[mde[0]]=(z2>1?-3000:0)+'px';
}
ary[1].style[mde[1]]='0px';
ary[1].style[mde[0]]=sz/2+'px';
oop.obj=obj;
oop.mde=mde;
oop.sz=sz;
oop.ary=ary;
oop.swap=[ary[0],ary[1]];
oop.cnt=0;
oop.nu=1;
oop.ms=typeof(ms)=='number'?ms/2:500;
oop.addevt(obj,'mouseover','next');
}
}

zxcFlip.prototype={

next:function(e){
if (this.ckevt(e)){
this.flip(this.nu==0?1:0,true);
}
},

flip:function(nu,auto){
var oop=this,mde=oop.mde,swap=oop.swap,sz=oop.sz,max=Math.max(swap[0][mde[3]],swap[1][mde[3]]),ms=oop.ms*max/sz;
clearTimeout(oop.to1);
clearTimeout(oop.to2);
oop.nu=nu;
oop.animate(mde[1],swap,nu,swap[nu][mde[3]],0,new Date(),ms,'to1',false);
oop.animate(mde[0],swap,nu,swap[nu][mde[2]],sz/2,new Date(),ms,'to2',true);
},

animate:function(mde,swap,nu,f,t,srt,mS,to,ud){
var oop=this,srcary=oop.srcary,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
swap[nu].style[mde]=Math.max(now,0)+'px';
}
if (ms<mS){
oop[to]=setTimeout(function(){ oop.animate(mde,swap,nu,f,t,srt,mS,to,ud); },10);
}
else {
swap[nu].style[mde]=t+'px';
if (ud){
nu=nu==0?1:0;
mde=oop.mde;
oop.cnt=++oop.cnt%oop.ary.length;
oop.swap[nu]=oop.ary[oop.cnt];
oop.animate(mde[1],oop.swap,nu,0,oop.sz,new Date(),mS,'to1',false);
oop.animate(mde[0],oop.swap,nu,oop.sz/2,0,new Date(),mS,'to2',false);
}
}
},

ckevt:function(e){
e.cancelBubble=true;
if (e.stopPropagation){
e.stopPropagation();
}
var eobj=e.target?e.target:e.srcElement;
eobj=eobj.nodeType==1?eobj:eobj.parentNode;
eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
if (!eobj||eobj==this.obj){
return false;
}
while (eobj.parentNode){
if (eobj==this.obj){
return false;
}
eobj=eobj.parentNode;
}
return true;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}

}

new zxcFlip({
ID:'img', // the unique ID name of the parent node. (string)
Mode:'horizontal', //(optional) mode of execution, 'horizontal' or 'vertical'. (number, default = 'horizontal')
FlipDuration:500 //(optional) the flip duration in milli seconds. (number, default = 1000)
});

new zxcFlip({
ID:'img2',
Mode:'vertical',
ImageArray:[
['http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg','http://www.vicsjavascripts.org.uk/','Egypt 10'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg']
]
});

new zxcFlip({
ID:'img3',
FlipDuration:200,
ImageArray:[
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','','Egypt 5'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg','http://www.vicsjavascripts.org.uk/','Egypt 10'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg','http://www.vicsjavascripts.org.uk/','Egypt 12']
]
});
/*]]>*/
</script>

</body>

</html>

xelawho
02-13-2012, 03:05 PM
or instead of

thearray.unshift(thearray.pop())
try

thearray.push(thearray.shift())
:thumbsup:

Dell2
02-13-2012, 03:28 PM
Exquisite. I cannot thank you enough. :)

Dell2
02-14-2012, 11:08 PM
V-card was extremely well received. Extra kudos to all involved. :thumbsup:

xelawho
02-14-2012, 11:15 PM
glad she liked it.

codingforums.com: spreading the love :D