SitePoint Sponsor |
|
User Tag List
Results 26 to 41 of 41
Thread: rollover image position?
-
Aug 4, 2007, 13:49 #26
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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.
Also, you can get rid of the ID on that thumb, since the class attribute is what we are using.
-
Aug 4, 2007, 16:05 #27
- Join Date
- Dec 2006
- Posts
- 378
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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\"/>";
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.
-
Aug 5, 2007, 04:30 #28
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
First of all, remove <!-- and --> 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'; } } } }
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'; } } } }
-
Aug 5, 2007, 06:06 #29
- Join Date
- Dec 2006
- Posts
- 378
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I didn't know what these did <!-- and --> 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
-
Aug 5, 2007, 06:33 #30
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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');
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');
-
Aug 6, 2007, 11:40 #31
- Join Date
- Dec 2006
- Posts
- 378
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I am rolling over this but no alert or pop up comes up:
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');
Last edited by shtoom; Aug 6, 2007 at 14:52.
-
Aug 6, 2007, 16:04 #32
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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'; } } }
-
Aug 7, 2007, 05:55 #33
- Join Date
- Dec 2006
- Posts
- 378
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 7, 2007, 06:27 #34
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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'; }
Code:thumbs[i].onmouseout = function () { capt.style.display = 'none'; }
-
Aug 7, 2007, 07:17 #35
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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'; }
-
Aug 7, 2007, 09:08 #36
- Join Date
- Dec 2006
- Posts
- 378
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Aug 7, 2007, 11:31 #37
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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';
Code:where.style.left = left + 'px';
-
Aug 7, 2007, 19:57 #38
- Join Date
- Dec 2006
- Posts
- 378
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
-
Aug 8, 2007, 16:16 #39
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
I suggest using the Firebug extension with Firefox to debug your javascript. Then you would instantly notice that you're missing a closing } somewhere.
-
Aug 9, 2007, 19:00 #40
- Join Date
- Dec 2006
- Posts
- 378
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 betterFor 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.
Last edited by shtoom; Aug 9, 2007 at 19:39.
-
Aug 10, 2007, 03:26 #41
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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!
Bookmarks