/    Sign up×
Community /Pin to ProfileBookmark

Help on javascript opacity

Copy linkTweet thisAlerts:
Jan 03.2009

hi everyone can anyone help me on this ?

ok First i have this script which is named coda slider and after that i have this problem which i do not know how to do hope you guys can help me with it?

ok here it goes
heres the list of all the thumbnails that the coda slider will slide so there will be different types of pictures. for example take the 2nd box on the top left and the last box from the third box. when i clicked on either of one the rest of the pictures will fade to a darker thumbnail accept those two which are selected. what im trying to do is im mixing every student in different school together and then a user select on one thumb the picture will identify which ones is in the same school and filter it off. My pictures are below please take look.

[url]http://www.baddot.com/images/thumbnails.jpg[/url]

heres the link and i tried to upload it says my filesize too big

please help really appreciated

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@kaurotuJan 03.2009 — Check out http://prototypejs.org

Then here is the specific API call you need:

http://www.prototypejs.org/api/element/setOpacity

Remember that in the call for "var element = $('myelement');", 'myelement' will be the id property for the image.
Copy linkTweet thisAlerts:
@baddotauthorJan 04.2009 — [code=html]
 <tr>
<td>
<img src="images/index_01.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td>
<img src="images/index_02.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
<td>
<img src="images/index_03.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
<td>
<img src="images/index_04.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
<td>
<img src="images/index_05.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td>
<img src="images/index_06.jpg" width="80" height="100" alt="" name="anerson" onMouseDown="document.images['test2'].style.opacity = 0.5"></td>
<td>
<img src="images/index_07.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
<td>
<img src="images/index_08.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td>
<img src="images/index_09.jpg" widt h="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
</tr>
<tr>
<td>
<img src="images/index_10.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td>
<img src="images/index_11.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
<td>
<img src="images/index_12.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
<td>
<img src="images/index_13.jpg" width="80" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
<td>
<img src="images/index_14.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td>
<img src="images/index_15.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
<td>
<img src="images/index_16.jpg" width="80" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
<td>
<img src="images/index_17.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
<td>
<img src="images/index_18.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
</tr>
<tr>
<td>
<img src="images/index_19.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
<td>
<img src="images/index_20.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td>
<img src="images/index_21.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
<td>
<img src="images/index_22.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
<td>
<img src="images/index_23.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td>
<img src="images/index_24.jpg" width="80" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
<td>
<img src="images/index_25.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td>
<img src="images/index_26.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
<td rowspan="2">
<img src="images/index_27.jpg" width="80" height="101" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_28.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
<td rowspan="2">
<img src="images/index_29.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
<td rowspan="2">
<img src="images/index_30.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
<td rowspan="2">
<img src="images/index_31.jpg" width="80" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
[/code]
Copy linkTweet thisAlerts:
@baddotauthorJan 04.2009 — basically i have done up alittle and im stucked halfway heres the code. the pictures have a different group meaning test1 test2 test3 anerson these are 4 different groups. for eg if i clicked on test1 all groups pictures from test1 will remain the same and the rest of the pictures the opacity will change to a different tone see the code. but im stucked in the middle it seems its not working in a way

or you can take a look at it it has bugs

http://baddot.co.cc/javascript/
Copy linkTweet thisAlerts:
@baddotauthorJan 04.2009 — can i use multiple variables for the prototype ?
Copy linkTweet thisAlerts:
@baddotauthorJan 04.2009 — can anyone help ?
Copy linkTweet thisAlerts:
@baddotauthorJan 04.2009 — erm basically its a photo gallery with alot of pictures in it but there are different schools and categories so i wana categories them by giving them a group name then when i click on the picture eg test1 group it will only show the test1 group then the rest of it will opacity to the back so the test1 group can see clearer lets take it there is 2 pictures so 2 pictures will be the outstanding and the rest will be alpha to about 30&#37; and the picture the user clicked will have a pop up like highslide
Copy linkTweet thisAlerts:
@MrNobodyJan 04.2009 — Perhaps you want something more like this:
[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dynamic Select</title>
<script type="text/javascript">
<!-- //
function HighlightGroupSelection(grp)
{
var x, len = document.images.length;
for (x=0; x<len; ++x)
{
if (document.images[x].name)
{
document.images[x].style.opacity = 0.5;
}
}
if (grp.length)
{
len = grp.length;
for (x=0; x<len; ++x)
{
grp[x].style.opacity = 1.0;
}
}
else
{
grp.style.opacity = 1.0;
}
return true;
}
// -->
</script>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (slice.psd) -->
<table id="Table_01" width="721" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_01.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>

<img src="images/index_02.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_03.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_04.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_05.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_06.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>

<td>
<img src="images/index_07.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_08.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_09.jpg" widt h="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
</tr>

<tr>
<td>
<img src="images/index_10.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_11.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_12.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_13.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>

<td>
<img src="images/index_14.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_15.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_16.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_17.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>

<img src="images/index_18.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
</tr>
<tr>
<td>
<img src="images/index_19.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_20.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>

<td>
<img src="images/index_21.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_22.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_23.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_24.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>

<img src="images/index_25.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_26.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_27.jpg" width="80" height="101" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
</tr>
<tr>

<td rowspan="2">
<img src="images/index_28.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_29.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_30.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_31.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">

<img src="images/index_32.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_33.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_34.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_35.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>

</tr>
<tr>
<td>
<img src="images/index_36.jpg" width="80" height="99" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="99" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>[/code]
However, other browsers don't all do opacity in the same way.
Copy linkTweet thisAlerts:
@baddotauthorJan 05.2009 — yes it works but it works only on safari dosent work on ie and firefox
Copy linkTweet thisAlerts:
@MrNobodyJan 05.2009 — Well, the original question was for the correct images to fade while the correct images were highlighted. I gave you that. Now you can do the rest.
×

Success!

Help @baddot 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 6.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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...