/    Sign up×
Community /Pin to ProfileBookmark

Highlight the active thumbnail in a slideshow

Copy linkTweet thisAlerts:
Jul 08.2011

Hi,

Here’s the slideshow embed code:

[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>[/CODE]

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

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@twseitexJul 08.2011 — Hi,

change .style on mouseover for backgroundcolor etc. with javacscript function

use onclick for other actions.

If you want, set CSS for each IMG (without javascript).


To get reference of Image etc. use

// ----- check Microsoft Internet Explorer ---------------------------------------

function fuIEexist()

{

var X00=false;

X00=(navigator!=null);

if(X00){X00=(navigator.appName!=null);}

if(X00){X00=(navigator.appName.length>0);}

if(X00){X00=(navigator.appName.indexOf("Microsoft")!=-1);}

return X00; // true for exist

}

// ----- get reference ------------------------------------------------------------

function fuGetReference(X00)

// X00 string, value of ID or NAME

{

var X01=null;

if(X00!=null)

{if(X00.length>0)

{

if(fuIEexist())

{X01=window[X00];

if(X01==null){X01=document.getElementById(X00);}

if(X01==null){X01=document.getElementsByName(X00);}

}

else

{

X01=document[X00];

if(X01==null){X01=document.getElementById(X00);}

if(X01==null){X01=document.getElementsByName(X00);}

}

}

}

return X01;

}


f.e.


<head>

<script>

function imgOnMouseOver(stimgID,stSrc,stAlt,stStyle,stStyleString)
// stimgID f.e. "imgID"
// stStyleString without " inside, use '
{
// if you want check params

var ptPointer=fuGetReference(stimgID);
ptPointer.src=stSrc;
ptPointer.alt=stAlt;

// dynamic set of style
eval('ptPointer.style.' + stStyle + '="' + stStyleString + '";');
// eval() may be not useable in strict mode of browser
}
</script>
</head>

<body>
<IMG ID="imgID" onmouseover="javascript:imgOnMouseOver('imgID',
'http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg',
'alt text',
'backgroundColor',
'#ffffff'
);">

<!-- 1 line for onmouseover -->
</body>
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...