Member Avatar for mattyd

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
  • 287 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for gentlemedia

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.