using tabs to do a flash swap

Question

So I have browsed all over, including these posts:

JQuery - how can I change an image src on click of a link

http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone

and other links as well and I guess I don't understand how it works and can't get it to work.

Here is what I have so far:

HTML:

<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">

    <ul style="width:450px; height:220px;  list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
        <li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
        <li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>

    </ul>
</div>
    <div style="width:25px; height:110px; position:relative; float:left;">
        <a href="#first"><img src="images/2nd.png" /></a>
    </div>

    <div style="width:25px; height:110px; position:relative; float:left;">
        <a href="#second"><img src="images/1st.png" /></a>
    </div>
</div>

This code works using anchor tags, but the problem is it pulls the page down to the anchor which I don't want. So I moved on to jQuery and image swaps. I've implementing other peoples codes to see if they work and I can't get them to work. I've used this jQuery code:

$(function () {
    $('.menulink').click(function () {
        $("#bg").attr('src', "images/imagegraph1.png");
        return false;
    });
});

Matched up with this HTML:

<a href="#" title="Switch" class="menulink">switch me</a>
<img src="images/imagegraph2.png" id="bg" />

And all that happens is the showing of imagegraph2.png and not the switching of imagegraph1.png. Usually when you do and then hit the "=" sign, a list of possible links comes up for your image. When its in Javascript, it doesn't do that, you just put what folder/name of file. So I'm sure I'll get some negative votes here, but I have exhausted all avenue's to get this to work.

score 0 · Answer 1 · answered Jul 09 '13 at 17:12

0

Try e.preventDefault();

$(function () {
    $('.menulink').click(function (e) {
        e.preventDefault();
        $("#bg").attr('src', "images/imagegraph1.png");
    });
});

answered Jul 09 '13 at 17:12

Sushanth --

55,259
9
66
105

doesn't work, the image still just sits there with no switch using just the javascript: $(function () { $('.menulink').click(function () { $("#bg").attr('src', "images/imagegraph1.png"); return false; }); }); and the only html on the page: switch me – Keith Jul 09 '13 at 17:19
Open the Developer tools console and check for any errors.. Are you including jQuery script file in the first place ? – Sushanth -- Jul 09 '13 at 17:21
yes it is in a separate file so it looks like this: test – Keith Jul 09 '13 at 17:25
Try giving the `MIME` type of javascript files.. Some browsers might not recognize without a proper mime type `type="application/javascript"` .. Do you see any errors in the console ?? – Sushanth -- Jul 09 '13 at 17:27
Try running it on a browser – Sushanth -- Jul 09 '13 at 17:31
oh I do, I view it in FireFox and IE, but to no avail – Keith Jul 09 '13 at 17:37
Your script looks fine to me .. Try this ` ` – Sushanth -- Jul 09 '13 at 17:41

using tabs to do a flash swap

1 Answers1