rollover image position?

**Raffles** · Aug 4, 2007, 12:49

I've been on holiday.

Surely the validation errors are obvious and self-explanatory? It seems you've forgotten the closing tag for container2. And the other errors are because you've put Javascript directly in the <head>. Put it in a separate JS file, preferably in one of the ones you already have. I would also recommend putting ALL your JS in a single file. Making the browser request several different files puts more strain on the server and makes the page load slower.

You need to learn to debug javascript by yourself. I can't tell why this isn't working immediately just from looking at it. rolloverInit() must be being called, but the mouseover event appears to not be triggered. One of the most useful things in JS debugging is the alert() function. For example, to check that the onmouseover event is being triggered:

Code Javascript:

      thumb.onmouseover = function() {
        alert('moused over');
        var myImage = document.createElement('img');
        myImage.setAttribute('src', bigsrc);
        myImage.setAttribute('alt', this.alt);
        // etc.

So if you see the alert, add one a bit later on, preferably when something should be happening, to work out where the code is failing.

Also, you can get rid of the ID on that thumb, since the class attribute is what we are using.

**shtoom** · Aug 4, 2007, 15:05

WB!

I have put all the JS inside the tooltip.js file and i have put the other attached JS (nav.js) at the end of the tooltip.js file:
http://www.newmedia.lincoln.ac.uk/jecgardner/tooltip.js

This is how the PHP looks:

PHP Code:


echo "<img src=\"entry/blog_images/".showinweb($row['image'])."\" alt=\"\" class=\"thumb\"/>";

The site is again valid W3C XHTML

Nothing happened when I put: alert('moused over'); after thumb.onmouseover = function
I then put alert('moused over'); after all the functions and didnt see any difference when i refreshed my site.

**Raffles** · Aug 5, 2007, 03:30

First of all, remove  from the beginning and end of tooltip.js. Do you even know what they are for? People used to put them in JS in the <head> so that ancient browsers that didn't know what javascript is would not display it as if it were text.

And James, it is not working because you are not paying attention to what I've been saying all this time. There can only be ONE window.onload. Instead of this:

Code:

window.onload = function() {
  var thumbs = getElementsByClassName('thumb'), capt = document.getElementById('capt');
  for (var i = 0; i < thumbs.length; i++) {
    var thumb = thumbs[i], preloadedimages = [], bigsrc = thumb.src.replace('small', 'big');
    preloadedimages[i] = new Image();
    preloadedimages[i].src = bigsrc;
    preloadedimages[i].onload = function() {
      var im = this;
		  thumb.onmouseover = function() {
        var myImage = document.createElement('img');
        myImage.setAttribute('src', bigsrc);
        myImage.setAttribute('alt', this.alt);
        capt.innerHTML = '';
        capt.appendChild(myImage);
        capt.appendChild(document.createTextNode(this.alt));
        capt.style.display = 'block';
        this.onmousemove = function(e) {
			
          if (!e) var e = window.event;
          display(this, bigsrc, capt, e, im);
        }
      }
      thumb.onmouseout = function () {
        capt.style.display = 'none';
      }
    }
  }
}

You should have this:

Code:

function rolloverInit() {
  var thumbs = getElementsByClassName('thumb'), capt = document.getElementById('capt');
  for (var i = 0; i < thumbs.length; i++) {
    var thumb = thumbs[i], preloadedimages = [], bigsrc = thumb.src.replace('small', 'big');
    preloadedimages[i] = new Image();
    preloadedimages[i].src = bigsrc;
    preloadedimages[i].onload = function() {
      var im = this;
		  thumb.onmouseover = function() {
        var myImage = document.createElement('img');
        myImage.setAttribute('src', bigsrc);
        myImage.setAttribute('alt', this.alt);
        capt.innerHTML = '';
        capt.appendChild(myImage);
        capt.appendChild(document.createTextNode(this.alt));
        capt.style.display = 'block';
        this.onmousemove = function(e) {
			
          if (!e) var e = window.event;
          display(this, bigsrc, capt, e, im);
        }
      }
      thumb.onmouseout = function () {
        capt.style.display = 'none';
      }
    }
  }
}

Do you understand what is happening? The window.onload at the end of your tooltip.js makes the browser run those three functions inside when the page has finished loading (when the window's "onload" event fires). They are all "preparatory" functions. rolloverInit, for example, finds thumbs to attach the rollover effect to, so that when it is actually rolled over, something happens.

**shtoom** · Aug 5, 2007, 05:06

I didn't know what these did  thanks for telling me! I have removed them.

I did remove the window.onload but I must have forgot to change it on my PC (i was working on my laptop before). I have changed the window.onload to function rolloverInit(). I tried putting in alert('moused over'); in several places but I didn't get an alert message

**Raffles** · Aug 5, 2007, 05:33

If you go to your page, you will notice that if you mouse over the bottom "thumb" (where there is supposed to be one) you get the alert message. You appear to be including thumbs in each post, but only the first one is actually a valid image. This is a problem, but I've worked out what the real problem is. The preloadedimages array is being reset with every iteration of the loop. So instead of this:

Code:

function rolloverInit() {
  var thumbs = getElementsByClassName('thumb'), capt = document.getElementById('capt');
  for (var i = 0; i < thumbs.length; i++) {
    var thumb = thumbs[i], preloadedimages = [], bigsrc = thumb.src.replace('small', 'big');

you should have this:

Code:

function rolloverInit() {
  var thumbs = getElementsByClassName('thumb'), preloadedimages = [], capt = document.getElementById('capt');
  for (var i = 0; i < thumbs.length; i++) {
    var thumb = thumbs[i], bigsrc = thumb.src.replace('small', 'big');

Looks to me like you need to work on your PHP and only output thumbs when there is actually a thumb to show.

**shtoom** · Aug 6, 2007, 10:40

Originally Posted by Raffles

If you go to your page, you will notice that if you mouse over the bottom "thumb" (where there is supposed to be one) you get the alert message.

I am rolling over this but no alert or pop up comes up:

Originally Posted by Raffles

You appear to be including thumbs in each post, but only the first one is actually a valid image.

Yes you are right. The blog isn't perfect I have made two blog so one posts an image that can be seen and the other one posts an image that is 1pixel big and the same colour of the text entry bg colour. I did this because every post needs an image to be entered withit overwise in Internet Explorer there will be a red x at the end of the entry. This blog is far from perfect I am not a genius at JS or PHP.

I would like to enter an image into the text entry wherever I want but atm it always posts seperate from the text entry. The smilie faces go between the text but there is no JS effect on these.

Still no big image on rollover effect.. I have done what you told me to do:

Code:

function rolloverInit() {
  var thumbs = getElementsByClassName('thumb'), capt = document.getElementById('capt');
  for (var i = 0; i < thumbs.length; i++) {
    var thumb = thumbs[i], preloadedimages = [], bigsrc = thumb.src.replace('small', 'big');

**Raffles** · Aug 6, 2007, 15:04

If you hover over the single light grey pixel above the letter "M" in "Mon" (in the date) in the bottom blog post ("Improving") you get the alert.

I suspect there might be a problem with the image preloading and the way I've attached the functions to their onload events, which I think is unnecessary now that I think about it. Try this instead:

Code Javascript:

function rolloverInit() {
  var thumbs = getElementsByClassName('thumb'), preloadedimages = [], capt = document.getElementById('capt');
  for (var i = 0; i < thumbs.length; i++) {
    var bigsrc = thumbs[i].src.replace('small', 'big');
    preloadedimages[i] = new Image();
    preloadedimages[i].src = bigsrc;
    thumbs[i].onmouseover = function() {
      alert('moused over');
      var captimg = capt.getElementsByTagName('img')[0];
      if (captimg.length && captimg.src == bigsrc) {
        capt.style.display = 'block';
        return;
      }
      var myImage = document.createElement('img');
      myImage.setAttribute('src', bigsrc);
      myImage.setAttribute('alt', this.alt);
      capt.innerHTML = '';
      capt.appendChild(myImage);
      capt.appendChild(document.createTextNode(this.alt));
      capt.style.display = 'block';
    }
    thumbs[i].onmousemove = function(e) {
      if (!e) var e = window.event;
      display(this, bigsrc, capt, e, im);
    }
    thumb.onmouseout = function () {
      capt.style.display = 'none';
    }
  }
}

If this doesn't work I'll save your page to my computer and investigate this further because it's starting to piss me off.

**shtoom** · Aug 7, 2007, 04:55

cool it said moused over. Have to be very accurate with the mouse to pick up the 1px image. Why does it only work on the last blog entry on that page? I just tried to do it on page 2 but it doesnt say moused over.

I added the code above but no luck my friend. I will PM you a .rar of my site.

**Raffles** · Aug 7, 2007, 05:27

It works on the actual thumbnail now too. It's not working completely because of an error in the code I last posted. Instead of this:

Code:

    thumb.onmouseout = function () {
      capt.style.display = 'none';
    }

there should be this:

Code:

    thumbs[i].onmouseout = function () {
      capt.style.display = 'none';
    }

See if it works now.

**Raffles** · Aug 7, 2007, 06:17

Right, had a look at it and it should work with your site now. It's still sketchy because you really need to work out exactly where the image should be, depending on where the thumbnail is. It's problematic because the large version CAN'T be above the thumbnail. This is why a lightbox approach would be better, I think.

Anyway, here are the two functions:

Code Javascript:

function rolloverInit() {
  var thumbs = getElementsByClassName('thumb'), preloadedimages = {}, capt = document.getElementById('capt');
  for (var i = 0; i < thumbs.length; i++) {
    var b = thumbs[i].src.replace('small', 'big');
    preloadedimages[b] = new Image();
    preloadedimages[b].src = b;
    thumbs[i].onmouseover = function() {
      var bigsrc = this.src.replace('small', 'big');
      var captimg = capt.getElementsByTagName('img')[0];
      if (captimg && captimg.src == bigsrc) {
        capt.style.display = 'block';
        return;
      }
      var myImage = document.createElement('img');
      myImage.setAttribute('src', bigsrc);
      myImage.setAttribute('alt', this.alt);
      capt.innerHTML = '';
      capt.appendChild(myImage);
      capt.appendChild(document.createTextNode(this.alt));
      capt.style.display = 'block';
    }
    thumbs[i].onmousemove = function(e) {
      if (!e) var e = window.event;
      display(this, capt, e, preloadedimages[this.src.replace('small', 'big')]);
    }
    thumbs[i].onmouseout = function () {
      capt.style.display = 'none';
    }
  }
}
 
function display(from, where, e, im) {
  var w = self.innerWidth || document.documentElement.clientWidth;
  var h = self.innerHeight || document.documentElement.clientHeight;
  var scrolled = self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var top, left;
 
  if (im && im.height) {
    var prelh = im.height, prelw = im.width, posx = e.clientX, posy = e.clientY;
    if (posy > prelh + 50) {
      // there is enough space above mouse cursor
      top = posy - 50 - prelh;
    }
    else if (h - posy > prelh + 50) {
      // there is enough space under mouse cursor
      top = posy + 50;
    }
    else if (parseInt(where.style.top.length)) {
      // there was enough space before, but not any more in either direction (up or down). So just leave it where it is
      return;
    }
    else {
      // the image is shorter than the viewport, but doesn't fit above or below mouse cursor
      // so put it in the middle of the viewport
      top = (h - prelh) / 2;
    }
 
    // logic for horizontal positioning needed here.
    top += scrolled;
  }
  else {
    //alert('too big or preloaded image not finished preloading, or preloaded image src not valid');
    top = 0;
    left = 0;
  }
  where.style.top = top + 'px';
  where.style.left = 0 + 'px';
}

**shtoom** · Aug 7, 2007, 08:08

k it kinda works.

Thanks!

I would like the _big image to be more to the right. ATM its stuck to the far left. Can it be more central?

Also is it possible to make it move to the right when the browser is like this?

**Raffles** · Aug 7, 2007, 10:31

If you look back at previous posts, that's where I said that was where your work came in.

You should be able to work out how to code it yourself, you just need to change this:

Code:

where.style.left = 0 + 'px';

to this:

Code:

where.style.left = left + 'px';

and in the bit where I wrote a comment saying "logic for horizontal positioning needed here" you should add some logic for where the box should be positioned. The logic for it should probably be similar to the if/else structure for working out the position from the top. I'm not going to help you with it until you at least have a go at it.

**shtoom** · Aug 7, 2007, 18:57

Ok don't laugh at my attempt.. I basically changed height to width and top to left.. I have uploaded it but the effect doesn't work now.
This is the code I applied:

Code Javascript:

    // logic for horizontal positioning needed here.
  if (im && im.width) {
    var prelw = im.width, prelh = im.height, posy = e.clientY, posx = e.clientX;
    if (posx > prelw + 50) {
      // there is enough space above mouse cursor
      left = posx - 50 - prelw;
    }
    else if (w - posx > prelw + 50) {
      // there is enough space under mouse cursor
      left = posx + 50;
    }
    else if (parseInt(where.style.left.length)) {
      // there was enough space before, but not any more in either direction (up or down). So just leave it where it is
      return;
    }
    else {
      // the image is shorter than the viewport, but doesn't fit above or below mouse cursor
      // so put it in the middle of the viewport
      left = (w - prelw) / 2;
    }	
    top += scrolled;
  }

**Raffles** · Aug 8, 2007, 15:16

I suggest using the Firebug extension with Firefox to debug your javascript. Then you would instantly notice that you're missing a closing } somewhere.

**shtoom** · Aug 9, 2007, 18:00

I downloaded JavaScript Debugger 0.9.87 https://addons.mozilla.org/en-US/firefox/addon/216

I view my site and click tools > JavaScript Debugger and i can see the tooltip.js but i dont know where it says i need a closing }

I added another } at the end of the width if:

top += scrolled;
}
}

The effect now miraculously works! Thanks Raffles!!

I would like to know how to make this even better

For example when the user scrolls down the page can the image adjust by moving down 10pixel's every time ? ATM when the image is in contact with the top of the browser it jumps to the bottom of the browser which is cool but maybe it could be smoover? Refering to the screenshot above i reduced the screen size which is a similar issue but when scrolling down i have the browser on full.

**Raffles** · Aug 10, 2007, 02:26

Well, I think that now that you have the working code, if you want to add other functionality like accommodating for scrolling, you'll have to try that for yourself. You just need the window.onscroll event and make it call a function that measures how far the user has scrolled and adjusts the position of the image accordingly. Give it a go!

The SitePoint Forums have moved.

User Tag List

Thread: rollover image position?

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions