I have navigation, with a dropdown subnav that gives them two options (level 6 and level 10). If they click on one or the other, it loads "views.php" then uses .html to write the correct information to sections. The img src portion isn't working???

I also tried just using .html to replace the entire contents, instead of just the image src, but it still doesn't work.

$('#level_six,#level_ten').live("click", function(event){       
        $('.tnav-item').removeClass('selected');
        $(this).addClass('selected');
        if (!$('.tnav-views').hasClass("selected")) {
            $('.tnav-views').addClass('selected');
        }   

        var chosen = $(this);

        $('#view_levels_subnav').addClass('selected').css('display','block').fadeTo("slow", 1 );
        $('.content').fadeTo('slow', 0, function() {
            $('.content').load('inc/floorplans/views.php', function() {
                $('.content').fadeTo("slow", 1 );
                Shadowbox.clearCache();
                Shadowbox.setup();  

                if(chosen.attr("id") == "level_six") {
                    $("#floorswitch_link").html("SEE LEVEL 10 ››").addclass("gototen");
                    $("#floorswitch_header").html("EAST - LEVEL 6");
                    $("#view_east").html("<img id=\"eastview\" src=\"images/views/6th_east_sm.jpg\">");
                    $("#eastview").attr("src","images/views/6th_east_sm.jpg");

                } else if(chosen.attr("id") == "level_ten") {
                    $('#floorswitch_link').html(' SEE LEVEL 6 &rsaquo;&rsaquo;').addclass("gotosix");
                    $("#floorswitch_header").html("EAST - LEVEL 10");   
                    $("#view_east").html("<img id=\"eastview\" src=\"images/views/10th_east_sm.jpg\">");
                    $("#eastview").attr("src","images/views/10th_east_sm.jpg");

                } else {
                    $('#floorswitch_link').html(' SEE LEVEL 10 &rsaquo;&rsaquo;').addclass("gototen");
                    $("#floorswitch_header").html("EAST - LEVEL 6");
                    $("#view_east").html("<img id=\"eastview\" src=\"images/views/6th_east_sm.jpg\">");
                    $("#eastview").attr("src","images/views/6th_east_sm.jpg");
                };
            });



        }); 

here's the html:

<div class="views">
    <div class="article">
        <h2 class="h2_whiteBg">VIEW: <span id="floorswitch_header"> EAST - LEVEL 6 <!-- here I can change out info for what view is seen --></span></h2> 
        <div id="floorswitch_link">&nbsp;</div>   

    <div class="view_selected" id="view_east" style="">
         <img id="eastview" src="images/views/6th_east_sm.jpg"> 
    </div>

    <div class="views_div" id="view_north" style="">
        <img id="northview" src="images/views/6th_north_sm.jpg">
    </div>
    <div class="views_div" id="view_west" style="">
        <img id="westview" src="images/views/6th_west_sm.jpg">
    </div>
    <div class="views_div" id="view_south" style="">
        <img id="southview" src="images/views/6th_south_sm.jpg">
    </div>


<!-- the replacement divs -->




        <div id="SubMenu"> 
                <ul id="views_submenu" style="line-height:2em;z-index:2;float:left;padding-right:10px;">
                    <li><a style="color:#000;" class="views_submenu link_selected" id='link_east' href='#'>EAST</a></li>
                    <li><a style="color:#000;" class="views_submenu" id='link_north' href='#'>NORTH</a></li>
                    <li><a style="color:#000;" class="views_submenu" id='link_west' href='#'>WEST</a></li>
                    <li><a style="color:#000;" class="views_submenu" id='link_south' href='#'>SOUTH</a></li>
                </ul>

</div>



</div>[/CODE]

Recommended Answers

All 2 Replies

Maybe I'm missing something, but you don't have any elements with id level_six or level_ten? What's triggering the click event?

Also, you need to load in a new Image object. You can't just add the tag and change the src attribute, you need to grab the data from the server. You can insert this right before line 17:

var img = new Image();

Then change your lines 21, 27, 33, to $(img).load("your/path/here");.
Then $('#view_east').html(img);

Haven't tested, think it'll work though.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.