Display image with JQuery

Question

I'm trying to get this code to work. Pretty much if the URL has #leaf in it then the tag updates to display image2.png. I'm not sure what I'm doing wrong.

<script type="text/javascript">
$("#image").show("fast") {
  // Which anchor is being used?
  switch(window.location.hash) {
     case "#leaf":
       window.location.href = image1.png
     break;
     case "#carrot":
       window.location.href = image2.png
     break;
  }
});
</script>
<a href="#leaf">Leaf</a>
<a href="#carrot">Carrot</a>
<img id="image" />

PS: I'm open to better ways of achieving this. Just tried the following but still doesn't work.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$("#image").show("fast", function() {
    // Which anchor is being used?
    switch(window.location.hash) {
    case "#leaf":
        $(this).attr('src', 'image1.png');
        break;
    case "#carrot":
        $(this).attr('src', 'image2.png');
        break;
  }
});
</script>
</head>
<body>
<a href="#leaf">Leaf</a>
<a href="#carrot">Carrot</a>
<img id="image" />
</body>
</html>

What browser support do you need? Are you expecting people to share the link with the hash (e.g. "hey checkout example.org#leaf")? — Brigand
– Brigand, Commented Aug 12, 2013 at 1:34
Hmm, your syntax doesn't work. Try $("#image").show("fast", function() { switch ... }); — Phil-R
– Phil-R, Commented Aug 12, 2013 at 1:36

Raman Lalia · Accepted Answer · 2013-08-12 02:20:32Z

2

Try this:

<script type="text/javascript">
$("#image").show("fast", function() {
    // Which anchor is being used?
    switch(window.location.hash) {
    case "#leaf":
        $(this).attr('src', 'image1.png');
        break;
    case "#carrot":
        $(this).attr('src', 'image2.png');
        break;
  }
});
</script>
<a href="#leaf">Leaf</a>
<a href="#carrot">Carrot</a>
<img id="image" />

Setting window.location.href sets the location of the current document. You need to set the src attribute on your img tag. Also, you need to surround your strings with quotes (i.e. "image1.png" instead of image1.png), or else the JavaScript interpreter will throw an error.

Further, the second argument to the show method is a function. You don't have the correct syntax for that, as @Phil-R pointed out.

edited Aug 12, 2013 at 2:20

answered Aug 12, 2013 at 1:36

Raman Lalia

2451 silver badge5 bronze badges

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

3 Comments

David Tansey Over a year ago

The code @Raman posted works for me. Try these two fiddles (with HASH in the url): jsfiddle.net/dmUgp/6/show/#carrot jsfiddle.net/dmUgp/6/show/#leaf

Raman Lalia Over a year ago

@BenP.Dorsi-Todaro Where are the image files located in relation to your html file? Put this HTML at the end of your file: <img src="image1.png" />. If nothing shows up, then the browser can't find your image files, you need to move them.

Raman Lalia Over a year ago

Please don't forget to choose the correct answer. And could you update your post to show what error you made? It would help others that might happen upon this question.

Brigand · Accepted Answer · 2013-08-12 02:12:40Z

1

An alternative is to declare what means what in your HTML.

<a href="#leaf">Leaf</a>
<a href="#carrot">Carrot</a>
<div>
<img data-hash="leaf" src="leaf.jpg" />
<img data-hash="carrot" src="carrot.jpg" />
</div>

The JavaScript then just finds images with a matching data-hash attribute.

function updateImage(){
  var hash = window.location.hash.slice(1);
  var selector = '[data-hash="{}"]'
                  .replace("{}", hash);
  var $imgs = $('img');
  $imgs.not(selector).fadeOut('fast');
  $imgs.filter(selector).fadeIn('fast');
}

$(window).on('hashchange', updateImage);
updateImage();

leaf or carrot?

answered Aug 12, 2013 at 2:12

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

1 Comment

Ben P. Dorsi-Todaro Over a year ago

Nothing I've been up for 48 hours and made a mistake in your code

Last Rose Studios · Accepted Answer · 2013-08-12 02:29:51Z

0

the inital load is never firing. $("#image").show("fast") never fires, so it never gets to the switch. Try this instead

updateImage = function() {
    var image = $('#image');
    switch(window.location.hash) {
    case "#leaf":
        image.attr('src', 'image1.png');
        break;
    case "#carrot":
        image.attr('src', 'image2.png');
        break;
  }
}
$(window).on('hashchange', updateImage);

The only thing needed is to fire it on page load, and you are good to go

answered Aug 12, 2013 at 2:29

Last Rose Studios

2,48121 silver badges30 bronze badges

2 Comments

Ben P. Dorsi-Todaro Over a year ago

Please elaborate. I'm very new to this. Are you saying I should put an onload="updateImage" attribute in my links?

Last Rose Studios Over a year ago

no, just that you would need to trigger the updateImage function on pageload. It can be done in by something like window.onload=function(){hashchange()}; otherwise it will only load the image when you click the link.

Collectives™ on Stack Overflow

Display image with JQuery

3 Answers 3

3 Comments

leaf or carrot?

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

leaf or carrot?

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related