Does anybody actually use this forum?

[rachjm]

I've posted questions here before and I never get any answer...

Oh well - I'll try again:

I am working on this page:
http://www.texmate.co.nz/sampleSite/icc402.html
This is the script that I am using:
http://www.texmate.co.nz/sampleSite/scripts/imagePreview.js

Hover over the image of the controller (gray case with green connectors). As you can see a hover-over, mouse-following image appears. The script works fine except that the hovering image 'jumps' down if the distance between the cursor and the bottom of the browser pane exceeds the height of the image.

I would like to remove this effect so that the hover image always stays centred to the cursor vertically, regardless of the size of the browser window or the position of the cursor over the thumbnail.

Hope that makes sense.
Any help at all would be greatly appreciated.

[webmaster]

Try to change:
gettrailobj().top=ycoord+"px"

To:
gettrailobj().top=ycoord

And see what happends

[rangana]

....Also, could you link us to where you got this script?..

Comparision from the original script to the edited one will be useful too, and there are times, that the original script has this mess in which...we must give concern

[rachjm]

Hooray - responses! You guys rock, I really thought I was gonna get nothing...

Below is the original code, which I haven't really modified very much. I found it on this forum website: http://codingforums.com/showthread.php?t=82751

Interestingly, while it contains the javascriptkit.com header, I can't find anything similar anywhere on their site... (Perhaps it has been removed?)

Code: Select all

<script>
/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var w=1
var h=1

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:1px solid #888888;background:#DDDDDD;"><img id="ttimg" src="img/s.gif" /></div>')

function gettrailobj()
{
   if (document.getElementById) return document.getElementById("trailimageid").style
   else if (document.all) return document.all.trailimagid.style
}

function truebody()
{
   return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail()
{
   document.onmousemove=""
   document.getElementById('ttimg').src='img/s.gif'
   gettrailobj().visibility="hidden"
   gettrailobj().left=-1000
   gettrailobj().top=0
}


function showtrail(width,height,file)
{
   if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 && navigator.userAgent.toLowerCase().indexOf('safari') == -1)
   {
      w=width
      h=height
      
      // followmouse()
   
      gettrailobj().visibility="visible"
      gettrailobj().width=w+"px"
      gettrailobj().height=h+"px"
      document.getElementById('ttimg').src=file
      document.onmousemove=followmouse
   }
}


function followmouse(e)
{

   if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 && navigator.userAgent.toLowerCase().indexOf('safari') == -1)
   {

      var xcoord=20
      var ycoord=20

      if (typeof e != "undefined")
      {
         xcoord+=e.pageX
         ycoord+=e.pageY
      }
      else if (typeof window.event !="undefined")
      {
         xcoord+=truebody().scrollLeft+event.clientX
         ycoord+=truebody().scrollTop+event.clientY
      }

      var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
      var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

      if (xcoord+w+3>docwidth)
      xcoord=xcoord-w-(20*2)

      if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
      ycoord=ycoord-h-20;

      gettrailobj().left=xcoord+"px"
      gettrailobj().top=ycoord+"px"

   }

}
</script>
<img onmouseover="showtrail(200,300,'largeimage.gif');" onmouseout="hidetrail();" src="smallimage.gif" width="67" height="100" style="padding-top:10px;" />

[rachjm]

Oh and by the way, I tried this:

Try to change:
gettrailobj().top=ycoord+"px"

To:
gettrailobj().top=ycoord

And see what happends

This causes the y coordinate to get stuck at zero, so the hover image sticks to the top of the browser window at all times.

Thanks for trying, though.

[rangana]

Change the ycoord default from 20 to -40

Code: Select all

var ycoord=20


[rachjm]

Change the ycoord default from 20 to -40

Code: Select all

var ycoord=20


That just shifts it up a bit, relative to the cursor. The image still jumps around if the browser window is too small...

I want to remove completely the function that is repositioning the image with reference to the browser height, so that it is always relative to the cursor, NOT the browser window.

[rangana]

...Where does it jump?..I'm confused

...Also, what's so peculiar in a relatively small window, does your client uses a small portion of the browser only

[rachjm]

...Where does it jump?..I'm confused

Sorry - I'm not explaining myself very well...

On a 1024x768 screen, try hovering over the very top pixel of the thumbnail image and moving your cursor very slowly downwards towards the bottom of your browser window. When I do this, the hover image 'jumps'

I hope you can see this - I can't think of any other way to explain it.

[rangana]

Don't you like the effect?..It goes up when the container of the large image reaches the bottom of the window...I see this as a good effect...you hate it?