jQuery getting img src with variable?

Question

Ive have read like 100+ your topics on this, but no matter what i do i cant get it do like i want to. My problem is i get my img src="url" from my script. When i alert it it gives me the right input i want, but when i put it in the attr() tag i just posts "imgSrc" and that in the path to the image. When i hard code the images in the mouseover function it actully works.

Heres my Script

  <script>
    $(document).ready(function(){

            //Hides the images
            $('#imgwrap img').hide();

            //Create variables for Link & Images
            $('a.imgflash').mouseover(function(){
                var linkRel     =   $(this).attr('rel');

                $('#imgwrap img').each(function(i,ele){
                    if($(this).attr('rel') == linkRel) {
                        var imgSrc      =   $(this).attr('src');
                    }               
                });

            });

            //Script that makes images apears
            //Mouseover Script
            $('a.imgflash').mouseover(function(){           
                $('#imgwrap img').attr("src", imgSrc).show();
            });
        });
    </script>

And heres my HTML

<ul>
    <li><a rel="demo1" class="imgflash" href="#">demo1</a></li>
    <li><a rel="demo2" class="imgflash" href="#">demo2</a></li>
    <li><a rel="demo3" class="imgflash" href="#">demo3</a></li>
</ul>
<div id="imgwrap" style="width:300px; height:300px; overflow:hidden;">
<img rel="demo1" src="images/lux.jpg">
    <img rel="demo2" src="images/cover.jpg">
    <img rel="demo3" src="images/cover2.jpg">
</div>

i hope u can help me how to get my Variable "imgSrc" to post like i want to in my mouseover function.

You have two mouseover handlers for $('a.imgflash') - the local variables (eg imgSrc) created in one are not available in the other. Why two? From the code I can't even tell what you are trying to do. Can you explain what you want to happen on mouse over? — James
– James, Commented Nov 16, 2011 at 13:54

leo.vingi · Accepted Answer · 2011-11-16 13:46:26Z

6

        var imgSrc = '';
        //Create variables for Link & Images
        $('a.imgflash').mouseover(function(){
            var linkRel     =   $(this).attr('rel');

            $('#imgwrap img').each(function(i,ele){
                if($(this).attr('rel') == linkRel) {
                    imgSrc      =   $(this).attr('src');
                }               
            });

        });

You need to define the imgSrc variable outside the mouseover event function, because when you are trying to apply it to the attr, it does not exist.

You can read more about local/global variables here:

http://www.w3schools.com/js/js_variables.asp

answered Nov 16, 2011 at 13:46

leo.vingi

1,8421 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Christian Wattengård Over a year ago

Isn't attr deprecated? Use prop instead.

Manuel van Rijn Over a year ago

unless you're below version 1.6

Christian Wattengård Over a year ago

Hmm... My bad then... I could swear I had read that somewhere.

Nopzen Over a year ago

Now im just running in to some more problems, ill post if im getting stuck again :)

leo.vingi Over a year ago

@Nopzen Glad I could help! Usually if an answer has worked for you, you accept it so we know that your issue has been resolved.

|

Blazemonger · Accepted Answer · 2011-11-16 13:57:08Z

1

No need for two mouseover handlers. Make your first one do both jobs:

$(document).ready(function() {

    //Hides the images
    $('#imgwrap img').hide();

    //Create variables for Link & Images
    $('a.imgflash').mouseover(function() {
        var linkRel = $(this).attr('rel');

        $('#imgwrap img').each(function(i, ele) {
            if ($(this).attr('rel') == linkRel) {
                $(this).show();
            }
        });

    });
});

Or better yet:

$(document).ready(function() {

    //Hides the images
    $('#imgwrap img').hide();

    //Create variables for Link & Images
    $('a.imgflash').mouseover(function() {
        var linkRel = $(this).attr('rel');
        $('#imgwrap img[rel="'+linkRel+'"]').show();
    });
});

http://jsfiddle.net/mblase75/J6aLJ/

edited Nov 16, 2011 at 13:57

answered Nov 16, 2011 at 13:51

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Collectives™ on Stack Overflow

jQuery getting img src with variable?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related