dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: Help on javascript opacity

  1. #1
    Join Date
    Jan 2009
    Posts
    11

    Help on javascript opacity

    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

  2. #2
    Join Date
    Jun 2006
    Location
    Iowa
    Posts
    88
    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.

  3. #3
    Join Date
    Jan 2009
    Posts
    11
    HTML Code:
        <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>

  4. #4
    Join Date
    Jan 2009
    Posts
    11
    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/

  5. #5
    Join Date
    Jan 2009
    Posts
    11
    can i use multiple variables for the prototype ?

  6. #6
    Join Date
    Jan 2009
    Posts
    11
    can anyone help ?

  7. #7
    Join Date
    Jan 2009
    Posts
    11
    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
    Last edited by baddot; 01-04-2009 at 03:57 PM.

  8. #8
    Join Date
    Feb 2008
    Posts
    1,666
    Perhaps you want something more like this:
    HTML Code:
    <!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>
    However, other browsers don't all do opacity in the same way.

  9. #9
    Join Date
    Jan 2009
    Posts
    11
    yes it works but it works only on safari dosent work on ie and firefox

  10. #10
    Join Date
    Feb 2008
    Posts
    1,666
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles