Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jul 2012
    Posts
    2
    Member #
    32219
    Hi all,

    I am currently getting a divs contents to change when the user mouses over an image.

    The probelm arises when I have one set of images to change one div and another set of images to change another.

    The links for these two tests are here - Example 1
    Example 2

    I have played around with the javascript but cant get it to work properly.

    Code:
    <section>
    
    <div id="web_about_text_1" class="web_h">Initial Header</div>
    <div id="web_about_text_2" class="web_p">
    <p>Inital Content</p></div>
    
    <div id="web_about_0" i="0" class="web_about_1a left hand" data-name1="Consultation" data-desc1="Web Content 1">
    <img src="http://placehold.it/150x150"/>
    </div>
    
    <div id="web_about_1" i="1" class="web_about_1a left hand" data-name1="Design" data-desc1="Web Content 2">
    <img src="http://placehold.it/150x150"/>
    </div>
    
    <div id="web_about_2" i="2" class="web_about_1a left hand" data-name1="Build" data-desc1="Web Content 3">
    <img src="http://placehold.it/150x150"/>
    </div>
    
    <div id="web_about_3" i="3" class="web_about_1a left hand" data-name1="Tools" data-desc1="Web Content 4">
    <img src="http://placehold.it/150x150"/>
    </div>
    
    </section>
    
    <script type="text/javascript">
    
    $(".web_about_1a").click(function(){
            $(".web_about_1a").unbind('mouseenter mouseleave');
            colorsOff($(this).attr('i'));
            window.location = '/about/';
    });
    
    $(".web_about_1a").hover(
            function () {
                    colorsOff($(this).attr('i'));
            },
            function () {
                    colorsOn();
            }
    );
    
    $(".web_about_t_1a").hover(
            function () {
                    colorsOff($(this).attr('i'));
            },
            function () {
                    colorsOn();
            }
    );
    
    function colorsOff(ii){
            for(var i=0;i<4;i++){
                    if(i != ii){
                            $("#web_about_" + i).stop().animate({opacity: .3},300);
                            $("#web_about_t_" + i).stop().animate({opacity: .3},300);
                    }else{
                            $("#web_about_" + i).stop().animate({opacity: 1},100);
                            $("#web_about_t_" + i).stop().animate({opacity: 1},100);
                            $('#web_about_text_1').html($("#web_about_" + i).attr('data-name1'));
                            $('#web_about_text_2').html('<p>' + $("#web_about_" + i).attr('data-desc1') + '</p>');
                    }
            }
    }
    function colorsOn(){
            for(var i=0;i<4;i++){
                    $("#web_about_" + i).stop().animate({opacity: 1},800);
                    $("#web_about_t_" + i).stop().animate({opacity: 1},800);
            }
            $('#web_about_text_1').html('Initial Header');
            $('#web_about_text_2').html('<p>Initial Content</p>');
    }
    
    </script>
    
    <section>
    <div id="vis_about_text_1" class="vis_h">Initial Header</div>
    <div id="vis_about_text_2" class="vis_p">
    <p>Inital Content</p></div>
    
    <div id="vis_about_0" i="0" class="vis_about_1a left hand" data-name2="Consultation" data-desc2="Vis Content 1">
    <img src="http://placehold.it/150x150"/>
    </div>
    
    <div id="vis_about_1" i="1" class="vis_about_1a left hand" data-name2="Design" data-desc2="Vis Content 2">
    <img src="http://placehold.it/150x150"/>
    </div>
    
    <div id="vis_about_2" i="2" class="vis_about_1a left hand" data-name2="Build" data-desc2="Vis Content 3">
    <img src="http://placehold.it/150x150"/>
    </div>
    
    <div id="vis_about_3" i="3" class="vis_about_1a left hand" data-name2="Tools" data-desc2="Vis Content 4">
    <img src="http://placehold.it/150x150"/>
    </div>
    
    </section>
    
    <script type="text/javascript">
    
    $(".vis_about_1a").click(function(){
            $(".vis_about_1a").unbind('mouseenter mouseleave');
            colorsOff($(this).attr('i'));
            window.location = '/about/';
    });
    
    $(".vis_about_1a").hover(
            function () {
                    colorsOff($(this).attr('i'));
            },
            function () {
                    colorsOn();
            }
    );
    
    $(".vis_about_t_1a").hover(
            function () {
                    colorsOff($(this).attr('i'));
            },
            function () {
                    colorsOn();
            }
    );
    
    function colorsOff(ii){
            for(var i=0;i<4;i++){
                    if(i != ii){
                            $("#vis_about_" + i).stop().animate({opacity: .3},300);
                            $("#vis_about_t_" + i).stop().animate({opacity: .3},300);
                    }else{
                            $("#vis_about_" + i).stop().animate({opacity: 1},100);
                            $("#vis_about_t_" + i).stop().animate({opacity: 1},100);
                            $('#vis_about_text_1').html($("#vis_about_" + i).attr('data-name1'));
                            $('#vis_about_text_2').html('<p>' + $("#vis_about_" + i).attr('data-desc1') + '</p>');
                    }
            }
    }
    function colorsOn(){
            for(var i=0;i<4;i++){
                    $("#vis_about_" + i).stop().animate({opacity: 1},800);
                    $("#vis_about_t_" + i).stop().animate({opacity: 1},800);
            }
            $('#vis_about_text_1').html('Initial Header');
            $('#vis_about_text_2').html('<p>Initial Content</p>');
    }
    
    </script>
    I know that the 'i' value is'nt working for too examples but do not know how to get around this.

    Any help as to where I am going wrong would be amazing.


  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Might be easier to use absolute positioning to just overlay the image on top of the text as a background image in a div (or an img tag would work too), and then use :hover to set the opacity to 0. This has the added awesomeness of being CSS-only.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Jul 2012
    Posts
    2
    Member #
    32219
    Quote Originally Posted by Ronald Roe, post: 238777
    Might be easier to use absolute positioning to just overlay the image on top of the text as a background image in a div (or an img tag would work too), and then use :hover to set the opacity to 0. This has the added awesomeness of being CSS-only.
    Thank you Ronald, this was a fall-back option that I was considering but thought it may be nicer to keep it to text rather than images. Could incorporate some nice transition effects too.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Twan, post: 238778
    Thank you Ronald, this was a fall-back option that I was considering but thought it may be nicer to keep it to text rather than images. Could incorporate some nice transition effects too.
    You can still use text. Just overlay the image on top of it, then change the opacity on hover.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:06 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com