Thumbnail viewer 'active thumb' question.

**Al Fresco** · 05-29-2007, 04:15 AM

2) http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Hi, 'Im using thumbnail2' and would dearly like the 'active thumb' to look active even when the mouse is removed until another thumb is moused over.(by way of a border highlight or something). Is this possible or am I dreaming? Many thanks.

**djr33** · 05-29-2007, 05:03 AM

The image that was moused over last is still being displayed, so it's easy enough to tell which it was.
You want a border around the active image?

Seems like you could use a function to do that.

You could have onMouseover= turn off all borders and then turn on the border for that particular image.

The actual code might be a bit complex, though. Not quite sure where to start.

onMouseover="this.border.width=3;" seems logical enough (if this is the right property, but I'd have to look that up), but setting all of the others to off would be difficult. I'll think and see if I come up with anything.

**jscheuer1** · 05-29-2007, 05:15 AM

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>

**Al Fresco** · 05-29-2007, 07:01 AM

Hi John,

Thanks once again for your help. I cant seem to make this code work. Maybe its just something silly? The page is not live at the moment but here is the code;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<link rel="stylesheet" type="text/css" href="main.css" />

.thumb {
border:4px solid white;
}

<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"> <img border="0" src="images/name.gif" alt=""/></div></div>

<div id="contentwrapper">
<div id="loadarea">
<div class="innertube"> <b> <em></em></b></div>
</div>
</div>
<div id="leftcolumn">
<ul>
<li id="active"><a href="page1.html">1</a></li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
<li><a href="page4.html">4</a></li>
<li><a href="page5.html">5</a></li>
<li><a href="page6.html">6</a></li>
</ul>

<div class="innertube"><b> <em></em></b></div>
</div>

<div id="footer">
<a href="images/V1.jpg" rel="enlargeimage::mouseover" rev="loadarea"> <img class="thumb" src="thumbnails/a.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>

<a href="images/1.jpg" rel="enlargeimage::mouseover" rev="loadarea"> <img class="thumb" src="thumbnails/a.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>

<a href="images/2.jpg" rel="enlargeimage::mouseover" rev="loadarea"> <img class="thumb" src="thumbnails/a.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>

<a href="images/5.jpg" rel="enlargeimage::mouseover" rev="loadarea"> <img class="thumb" src="thumbnails/a.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>

<a href="images/8.jpg" rel="enlargeimage::mouseover" rev="loadarea"> <img class="thumb" src="thumbnails/a.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>

<a href="images/7.jpg" rel="enlargeimage::mouseover" rev="loadarea"> <img class="thumb" src="thumbnails/a.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>

<a href="images/9.jpg" rel="enlargeimage::mouseover" rev="loadarea"> <img class="thumb" src="thumbnails/a.jpg" alt="" border="0" width="25" height="25" style="margin: 8px"/></a>

<a href="images/V4.jpg" rel="enlargeimage::mouseover" rev="loadarea"> <img class="thumb" src="thumbnails/a.jpg" alt="" border="0" width="25" height="25" style="margin:8px"/></a>
<br>
</div>

</div>
<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>
</body>
</html>

Many Thanks,
Craig

**jscheuer1** · 05-29-2007, 07:37 AM

This:

Code:

.thumb {
border:4px solid white;
}

Needs to be in your main.css stylesheet file or else have style tags around it if you are going to use it in the head there:

Code:

<style type="text/css">
.thumb {
border:4px solid white;
}
</style>

Partly my fault, as I pasted it into my previous post without its closing </style> tag. I've fixed it there as well.

**Al Fresco** · 05-29-2007, 08:12 AM

Thanks John - that's starting to work. (I should have noticed the </style>).

Just one prob...
The thumbs are highlighting just right but are now not cancelling when another thumb is moused over. Is there a simple solution to this?

Many Thanks,
Craig

**jscheuer1** · 05-29-2007, 08:38 AM

Worked fine here. I think I would need a link to your page to see what the problem is.

**Al Fresco** · 05-29-2007, 08:48 AM

Hmmm.
Just tried it in Firefox, Opera and NN. It works a treat there. Thankyou.
The not cancelling seems to be a Safari issue. Any ideas?
Thanks,
Craig

**jscheuer1** · 05-29-2007, 08:58 AM

Well, I don't know too much about Safari, but I'd try changing this:

Code:

(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.addE . . .

to:

Code:

t[i].style.borderColor='white';

Or to whatever color you are using for 'inactive'.

**Al Fresco** · 05-29-2007, 09:09 AM

Genius.
I think you may know a little more about Safari than you think!
That works perfectly.

Thank you so much.

Craig

Thread: Thumbnail viewer 'active thumb' question.

Thread Tools

Search Thread

Thumbnail viewer 'active thumb' question.

Bookmarks

Bookmarks

Posting Permissions