Stationary Image

[joehouse]

okay... been poking about the net for the past couple of days trying to find a code for a small problem I'm having [yes I know I could just steal a code for an image gallery]. I have set up on the left hand side of my page http://www.joseph-house.com/comics-i...ers/covers.asp a list of urls that when you mouseover they cause a new image to be loaded on the page.

What I want to do is have this image scroll down the page as you scroll down... somewhat like the watermark or scrolling background image, though without making it my background. I haven't been able to find a site that suitably explains how to do this.

Any help?

Joe
http://www.joseph-house.com

[DavH27]

The rollover image change is done using disjointed rollovers in JavaScript. The text must be enclosed in an <a>text</a> which doesn't have to be a link at all. (if you don't know that the 'a' tag is an anchor tag, not an exclusive linking tag, read up on it)

You have options, tho. Do you want the image to appear upon hovering or clicking? If hovering, do you want the image to disappear once the mouse has left the text?

You will need to create a blank image in order for the following example code to have something to change.

<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.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];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.0
  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=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<p><a onMouseOver="MM_swapImage('pic_name','','NewPicToReplaceOriginal.jpg',1)">This is the relevant text</a></p>
<img src="OriginalBlankImage.jpg" width="25%" name="pic_name">

Baring in mind this code only changes the image once upon mouse over then it stays there. This should get you started. Open up Macromedia and use the behaviours.


As for the sticky pic that stays static as the page scrolls, you need to create a layer and have the layer have a line in the CSS saying

position: fixed

Then all you need to add to the CSS is it's positon on the page, etc.


I hope this has helped!

[sde]

hey, look what the cat dragged in =) .. good to see ya back.

[joehouse]

Thanks for the heads up on the <a > tags... it's been ages since I did any programming, scripting, or the like.. feel like a wee bit of a doofus.

The page is up and cleaned up a wee bit

http://www.joseph-house.com/comics-i...ers/covers.asp

Though I tried inserting a layer [without setting the page up with a style sheet] into the last cell of my table [the cell with the image in it] though I'm not getting the image to scroll down the screen with the window.

  </td>
  <td valign="top" align="center">
  	<div style="position: top;">
	<img src="default.jpg" name="MyImage">
	</div>
  </td>

I'm figuring I'm going about this the goofy footed way though I can't see what I'm missing on the stylesheets side. Do I have to set the page up with a stylesheet in the header in order to use the div tag? Or am I simply being feebleminded in my use of the div tag?

There's also a page where I've changed the onMouseover to a onClick
http://www.joseph-house.com/comics-i...rs/covers2.asp

Thanks for the help!

-Joe

[DavH27]

The code I gave you is confusing because it was created automatically by Dreamweaver.

Tbh I would enclose the text with <A href='#'> so ppl know to click on em. The images are too big to be used in mouseovers, and there are too many of them to have them preloaded for mouseovers.

As for the layer/fixed position thing I've tried and failed miserably. I have little css expertise. I'm a programmer, not an artist :p

btw, external stylesheets or even stylesheets at the top of the page make things a million times easier.