Geek Answers Handbook

How can I turn this jquery into a function?

I would like to turn the jquery code below into a function so that I can add links to the list and not touch jquery. I assume that I will need to put the image name in 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" class="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"); });
+4
source share
8 answers

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

+6
source

Change your HTML markup and put the desired image in the data attribute and change your class to a general 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 execute the general event using this data attribute:

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

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

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

access to which you can get in the event handler using:

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

eg:.

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

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

You can do this without changing the layout:

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

Failed to complete this attempt:

 $('a.newslink').bind('mouseover', function(){ var imgname = $(this).attr("src"); $('img#storyimg').attr("src", imgname); });
0
source 
 <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')); });
0
source 
 <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')); });
-1
source

More articles:


All Articles