Thumbnail Viewer 2 - Loadarea2 + Active Text

[Al Fresco]

1) Script Title: Thumbnail Viewer 2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem: Hi. Strange problems.

1.The portrait format pics in this http://petersearle.com/test1/page1.html load correctly (loadarea2) but only sometimes (occasionally they load a new page)

2.The active thumbs (text) in this list http://petersearle.com/test1/list.html will not stay highlighted.
I have had this before with borders and was kindly given some text by John which I have tried to edit (ie. .thumb) but I think I just broke it!

Can anyone please help? Thanks.

[Al Fresco]

Hi Again,
Still no luck.
I found this on an old posting and thought it may help
onclick="return false;"
for the page loading problem but unfortunately it didn't.
Does anyone have any ideas on this please?

[Al Fresco]

Hi. Just a note to say that I have simplified this site using just one loadarea
and some compromise.
http://petersearle.com/test1/page1.html


Still working on how to make text link and activated click thumbnails (as in example 2 here) http://www.dynamicdrive.com/dynamici...thumbnail2.htm
stay active.

Does anyone know? http://petersearle.com/test1/list.html

Possibly editing this script from "mouseover" to 'Click"
But How? Please help.

Put something like this in the head of the page:

Code:
<style type="text/css">
.thumb {
border:4px solid white;
}
</style>
The width of the border is up to you, the color should be the same as the background color behind the thumbnails or a color of your choosing that indicates that a thumbnail is inactive.

Give each thumbnail a class name of thumb:

Code:
<a href="photo1.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img class="thumb" src="photo1_tbn" width="50" height="50"></a>
Put this script at the end of the page, just before the closing </body> tag:

Code:
<script type="text/javascript">
(function(){
var i=0, t=document.images, hlight=function(e){
var e=e? e : window.event;
var el=e.target? e.target : e.srcElement;
for (i = 0; i < t.length; i++)
if(t[i].className=='thumb')
t[i].style.borderColor='';
el.style.borderColor='navy'; //Edit hightlight color as desired.
}
for (i = 0; i < t.length; i++)
if(t[i].className=='thumb')
if ( typeof window.addEventListener != "undefined" )
t[i].addEventListener( "mouseover", hlight, false );
else if ( typeof window.attachEvent != "undefined" )
t[i].attachEvent( "onmouseover", hlight );
else {
if ( t[i].onmouseover != null ) {
var oldOnmouseover = t[i].onmouseover;
t[i].onmouseover = function ( e ) {
oldOnmouseover( e );
hlight(e);
};
}
else
t[i].onmouseover = hlight;
}
})();
</script>
__________________
WWWWWWWWWWWW
- John WWWWWWWWWWWW . . . My other title is: Global Moderator