[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!