...

View Full Version : Highlight the active thumbnail in a slideshow



Rain Lover
07-08-2011, 10:13 PM
Hi,

Here's the slideshow embed code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head>
<body>
<div id="large"></div>
<div id="thumbs">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';">
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div>
</body>
</html>

I wonder how I can highlight the active thumbnail so its background remains blue until I click another one.
I also like to avoid the inline JavaScript. Any feedback to improve the coding is appreciated!

Best regards
Mike

Old Pedant
07-09-2011, 02:48 AM
If you want to avoid inline JS, then why is the existing code 100% inline JS??

Ah, well...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {
width:448px; height:336px;
background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-

repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
#thumbs img {padding:1px; width:80px; height:60px; border: white 3px solid;}
#thumbs img:hover {background:#00F;}
</style>
<script type="text/javascript">
var fullsize = [
"http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg",
"http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg",
"http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg"
];

function pickOne(which)
{
var tnails = document.getElementById("thumbs").getElementsByTagName("img");
for ( var t = 0; t < tnails.length; ++t )
{
var tnail = tnails[t];
tnail.style.borderColor = (tnail == which) ? "blue" : "white";
}
var bgi = "url('" + fullsize[parseInt(which.alt)] + "')";
document.getElementById("large").style.backgroundImage = bgi;
}
function setUp( )
{
var tnails = document.getElementById("thumbs").getElementsByTagName("img");
for ( var t = 0; t < tnails.length; ++t )
{
var tnail = tnails[t];
tnail.onclick = function() { pickOne(this); }
}
}
window.onload = setUp;
</script>
</head>
<body>
<div id="large"></div>
<div id="thumbs">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg"
alt="0" style="border-color: blue;"/>
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="1"/>
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="2"/> </div>
</body>
</html>

Like that?

bullant
07-09-2011, 07:28 AM
If you want to avoid inline JS, then why is the existing code 100% inline JS??

I think the OP doesn't know how to avoid inline scripting and so used it in their code and is now asking for help on how to not use inline js.

You're also using the alt attribute to identify the img when alt is meant to be meaningful alternate text to describe the contents of the image.

Imo a better way to do what you are doing is to assign a user defined property to the img and use it for what you are using alt for.

Sciliano
07-09-2011, 02:43 PM
See,

Automatic R to L Image Link Scrollers (http://www.dynamicdrive.com/forums/showpost.php?p=230957&postcount=1)

Rain Lover
07-09-2011, 09:35 PM
If you want to avoid inline JS, then why is the existing code 100% inline JS??


Thanks or the answer! I'm a JavaScript newbie and don't know how to do it.

Rain Lover
07-09-2011, 09:39 PM
Imo a better way to do what you are doing is to assign a user defined property to the img and use it for what you are using alt for.

I'd be grateful if you could provide a sample code.

bullant
07-10-2011, 04:59 AM
I'd be grateful if you could provide a sample code.

If you want to add a user defined attribute/property to an <img> or some other object, you could do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
window.onload=function(){
var myImgO = document.getElementById('myImg');
myImgO.myProperty = 'My Value'; //the img object now has a attribute/property called myProperty

alert('myImgO.myProperty = '+myImgO.myProperty); //for testing
}
</script>
</head>
<body>
<div>
<img id="myImg" src="num1.jpg" alt="Pic of num1" />
</div>
</body>
</html>

Rain Lover
07-10-2011, 05:26 PM
If you want to add a user defined attribute/property to an <img> or some other object, you could do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
window.onload=function(){
var myImgO = document.getElementById('myImg');
myImgO.myProperty = 'My Value'; //the img object now has a attribute/property called myProperty

alert('myImgO.myProperty = '+myImgO.myProperty); //for testing
}
</script>
</head>
<body>
<div>
<img id="myImg" src="num1.jpg" alt="Pic of num1" />
</div>
</body>
</html>


Educational! Thanks!

bullant
07-11-2011, 01:42 AM
no problem :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum