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. http://www.baddot.com/images/thumbnails.jpg heres the link and i tried to upload it says my filesize too big please help really appreciated
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/ <html> <head> <title>slice</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </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" 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> <td rowspan="2"> <img src="images/index_32.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 rowspan="2"> <img src="images/index_33.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_34.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_35.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/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> HTML:
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% and the picture the user clicked will have a pop up like highslide
i got this to work by a friend but it dosent support with ie and firefox can anyone help? <!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> HTML:
I'm not totally clear on what you would like to do (I checked the site), but it looks like something I would tackle with a js library... I prefer jQuery. Are you comfortable with any of the js libraries (jQuery, mooTools, etc.)?