1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

a Mouseover question

Discussion in 'JavaScript' started by pistonpunch, Nov 16, 2007.

0
  1. #1
    I have managed to figure out how to create a simple image swap rollover with a 2 img files. 

    <img src="image1.gif" name="pic1" onMouseOver="document.pic1.src='image2.gif'">
    Code (markup):
    but what if I had 3 images that I wanted to cycle through specifically only on Mouseover. I'm really not sure how to accomplish this ??
    I have not been sucessful in finding an example of this.
    any advice would be appreciated
     
    pistonpunch, Nov 16, 2007 IP
  2. udkl_12_98

    udkl_12_98 Banned

    Messages:
    307
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I wwould suggest you create a .gif animated file containing the 3 images , and put it 'onMouseOver();

    Or you could create aFunction where you would Dynamically change the Image Source after a delay of some milliseconds. Dont forget to put a onMouseOut event if you choose this option
     
    udkl_12_98, Nov 17, 2007 IP
  3. pistonpunch

    pistonpunch Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for the feedback, I could make a gif, but that is not what I am trying to accomplish.
    I would lke to cycle thru 3 seperate images but only onMouseover not onMouseout.
    I was wondering if there was some simple way of doing this
     
    pistonpunch, Nov 17, 2007 IP
  4. life31

    life31 Active Member

    Messages:
    1,024
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    78
    #4
    Dont give mouse onMouseOut, or try giving the same image as onMouseOut so it would not appear changed.
     
    life31, Nov 17, 2007 IP
  5. orielo

    orielo Peon

    Messages:
    175
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #5
    hey pistonpunch,

    try this code :

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
// **** Not Important *****
// FPreLoad the images, This is an old habbit, from the time the connections were still slow.
function PL_Images() { 
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=PL_Images.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
// find objects easiely
function Find_Object(n, d) {
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=Find_Object(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

// ***** Important ****
// Swap Image
function Swap_Image() { 
  var i,j=0,x,a=Swap_Image.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=Find_Object(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// restore the original image
function Swap_Image_Restore() { 
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

//-->
</script>
</head>

<body onload="PL_Images('image1.jpg')">
<img src="image2.jpg" width="408" height="312" id="Image1" onmouseover="Swap_Image('Image1','','image1.jpg',1)" onmouseout="Swap_Image_Restore()" />
</body>
</html>
    Code (markup):
     
    orielo, Nov 19, 2007 IP