0

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.

Thanks

`

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

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

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

<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>

`

2
Contributors
1
Reply
16
Views
1 Year
Discussion Span
Last Post by gentlemedia
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.