vytaulla51 on "how properly call an image in a javascript in WP"

Hi:

I'm using a little javascript for my menus in a responsive theme -- but I want to use an image for the menu button and can't get it to show up.

The script is:

jQuery(document).ready(function($){
/* prepend menu icon */
$('#mobinav').prepend('<div id="menu-icon">Menu</div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#navbar").slideToggle();
$(this).toggleClass("active");

});
});

The script is in a js folder in the theme root. In the div above I want to use a small graphic instead of the word "Menu". In my initial markup and styling, using BBEdit, I can use a graphic as follows:


jQuery(document).ready(function($){
/* prepend menu icon */
$('#mobinav').prepend('<div id="menu-icon"><img width="117" height="33" alt="menulines" src="images/menulines.png"></div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#navbar").slideToggle();
$(this).toggleClass("active");

});
});

and it works. But that same code generates a "missing image" image when I make the theme live in WordPress. I tried doing this:


jQuery(document).ready(function($){
/* prepend menu icon */
$('#mobinav').prepend('<div id="menu-icon"><img width="117" height="33" alt="menulines" src="<?php bloginfo('template_url'); ?>/images/menulines.png"></div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#navbar").slideToggle();
$(this).toggleClass("active");

});
});

But that isn't working either. The relevant graphic is in the images folder in the theme directory. This is a custom theme.

The menu button appears when viewport is less than 601 px -- can see it at this site (which is still being developed and populated): http://www.comhab.org/resp/

If I'm in the wrong forum please let me know -
Thanks!