image src change on mouse over in jquery

Question

html-

<img id="storyimg" src="images/stor.jpg" alt="img" />  
                <ul class="sb_menu">            
                    <li><a href="linkpage.htm" class="newslink1">Wireless Networking at Fortune Inn, Noida</a></li>
                    <li><a href="linkpage.htm" class="newslink2">18th International Conference on Oral & Maxillofacial Surgery</a></li>
                    <li><a href="linkpage.htm" class="newslink3">WiFi deployment at Vellore Institute of Technology</a></li>                        
                </ul>

I want when user moves over these li items I want to change the image like-

<script>
                $('a.newslink1').bind('mouseover', function() {
                $('img#storyimg').src("images/stor1.jpg");
...same for newslink2 and 3, image will be stor2 and 3

but this is not working i think i have written wrong jquery?????????

Answer 1

Use attr:

$('img#storyimg').attr("src", "images/stor1.jpg");

More Info:

http://api.jquery.com/attr/

Answer 2

$('a.newslink1').bind('mouseover', function() {
$('img#storyimg').attr("src","images/stor1.jpg");

Answer 3

You probably want $('img#storyimg').attr('src','path/to/new/image.jpg');

EDIT: JINX gotta but me a coke! :o)

one more thing, experiment with .mouseenter() and mouseleave().

Answer 4

Your code:

<script>
  $('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').src("images/stor1.jpg");

Errors:

Line 3: use 'attr' instead of 'src' like '.attr("src","images/stor1.jpg");'

Line 4: ' }); ' is missing at end of the statment

Correct code:

<script>
  $('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').attr("src","images/stor1.jpg");
  });

If you want to change the image depend on the link you can code:

<img id="storyimg" src="images/stor.jpg" alt="img" />  
<ul class="sb_menu">            
  <li><a href="linkpage.htm" class="newslink1" data-image="stor1.jpg">Wireless Networking at Fortune Inn, Noida</a></li>
  <li><a href="linkpage.htm" class="newslink2" data-image="stor2.jpg">18th International Conference on Oral & Maxillofacial Surgery</a></li>
  <li><a href="linkpage.htm" class="newslink3" data-image="stor3.jpg">WiFi deployment at Vellore Institute of Technology</a></li>                        
</ul>

<script>
  //binds the mouseover-event-handler to all Links the are childs of an LI in UL with Class "sb_menu"
  $('UL.sb_menu LI A').bind('mouseover', function(e) { 
    $('img#storyimg').attr("src","images/" + $(e.target).attr('data-image'));
  });
</script>

An improve: "img#storyimg" as selector is ok but only "#storyimg" is mutch faster because getElementById(..) is an native-browser-function. If you use "img#storyimg" jquery must request getElementsByTagName('IMG') and traverse the list to find this element with the id "storyimg". this takes a lot of time equals to the direct execution of "getElementById". An ID of any HTML-Element in a page must be unice. see: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 ("This attribute assigns a name to an element. This name must be unique in a document.")