I am working on developing a simple site, optimizing for mobile.

I am using jQuery at this time to render basic, rollover buttons using image-swapping.

The issue I am having involves using multiple, different buttons; for example, 3 buttons, different images for each (one "on" image, one "off" image for each button; 6 total images)

I am a bit confused at this point as to what is exactly happening. Is the code correct? I have researched various tutorials today but found that each is suggesting various methods to do this.

I will paste/mark-up if anyone can explain this to me, or, how these seperate buttons should be written as to allow for proper operation, live.



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
function() { this.src = this.src.replace("_off", "_on"); 
function() { this.src = this.src.replace("_on", "_off"); 

    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="style-ie.css" />

<div id="left-sidebar">
       <a href="#"><img src="images/blackMenu_on.jpg" class="rollover" /></a> 
       <br />
       <a href="#"><img src="images/blackHistory_on.jpg" class="rollover" /></a>


Why do you want to do this with JS/jQuery? This could, and perhaps should, be done with CSS. Look into a tutorial 'buttons with CSS sprites'.
What you have now (only images and not real text for your links) is also not really SEO and screen reader friendly.