How can I turn this jquery into a function?

I would like to turn the below jquery code into a function so i could add links to the list and not have to touch the jquery. I'm assuming I will have to put the image name into the <a href> tag somewhere.

html code

<img id="storyimg" src="1.png" alt="img" />
<ul class="sb_menu">            
    <li><a href="linkpage.htm" class="newslink1">Link 1</a></li>
    <li><a href="linkpage.htm" class="newslink2">Link 2</a></li>
    <li><a href="linkpage.htm" clas开发者_如何转开发s="newslink3">Link 3</a></li>                        
</ul>

jquery

$('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').attr("src", "1.png");
});
$('a.newslink2').bind('mouseover', function() {
    $('img#storyimg').attr("src", "2.png");
});
$('a.newslink3').bind('mouseover', function() {
    $('img#storyimg').attr("src", "3.png");
});

Add a data attribute called data-src:

<a href="linkpage.htm" class="newslink" data-src="1.png">Link 1</a>

jQuery:

$("a.newslink").bind("mouseover", function() {
    $("img#storyimg").attr("src", $(this).data("src"));
});

Works with jQuery 1.5+.

Change your HTML markup and put the desired image in a data attribute, and change your class to a generic newslink:

<img id="storyimg" src="1.png" alt="img" />
<ul class="sb_menu">            
    <li><a href="linkpage.htm" class="newslink" data-img="1.png">Link 1</a></li>
    <li><a href="linkpage.htm" class="newslink" data-img="2.png">Link 2</a></li>
    <li><a href="linkpage.htm" class="newslink" data-img="3.png">Link 3</a></li>                        
</ul>

Then do a generic event using that data attribute:

$('a.newslink').bind('mouseover', function(){
    $('img#storyimg').attr("src", $(this).data('img'));
});

You can add a data-img attribute to your links:

<a href="linkpage.htm" class="newslink1" data-img="1.png">

which you can then access in the event handler using:

$(this).data('img');

e.g.:

$('.sb_menu a').bind('mouseover', function() {
    $('#storyimg').attr(src, $(this).data('img'));
});

Here is a good example:

http://jsfiddle.net/maniator/tac3t/

JS:

$('a.newslink').live('mouseover', function() {
    $('img#storyimg').attr("src", $(this).attr('ref'));
});

HTML:

<img id="storyimg" src="1.png" alt="img" />
<ul class="sb_menu">            
    <li><a href="#" class="newslink" ref="1.jpg">Link 1</a></li>
    <li><a href="#" class="newslink" ref="2.jpg">Link 2</a></li>
    <li><a href="#" class="newslink" ref="3.jpg">Link 3</a></li>                        
</ul>

You can do this without changing the markup at all:

$('a[class^="newslink"]').bind('mouseover', function (e) {
    var num = this.className.match(/newslink(\d+)/i)[1];
    $('img#storyimg').attr('src', num + '.png');
});

Could give this a try:

$('a.newslink').bind('mouseover', function(){
              var imgname = $(this).attr("src");
              $('img#storyimg').attr("src", imgname);

});

<img id="storyimg" src="1.png" alt="img" />
<ul class="sb_menu">            
    <li><a href="#" class="newslink" title="1.jpg">Link 1</a></li>
    <li><a href="#" class="newslink" title="2.jpg">Link 2</a></li>
    <li><a href="#" class="newslink" title="3.jpg">Link 3</a></li>                        
</ul>

$('a.newslink').hover(function(){
    $('img#storyimg').attr("src", $(this).attr('title'));
});

<img id="storyimg" src="1.png" alt="img" />
<ul class="sb_menu">            
    <li><a href="linkpage.htm" class="newslink" rel='1.png'>Link 1</a></li>
    <li><a href="linkpage.htm" class="newslink" rel='2.png'>Link 2</a></li>
    <li><a href="linkpage.htm" class="newslink" rel='3.png'>Link 3</a></li>                        
</ul>

$('a.newslink').bind('mouseover', function() {
    $('img#storyimg').attr("src", $(this).attr('rel'));
});