image src ändern bei mouseover in jquery

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>

Ich soll, wenn der Benutzer bewegt sich über diese li Dinge, die ich will, um das Bild zu ändern, wie-

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

aber das wird nicht funktionieren denke ich, habe ich falsch geschrieben jquery?????????

InformationsquelleAutor piku | 2010-08-05

  1. 12

    Verwenden attr:

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

    Mehr Info:

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

    InformationsquelleAutor Sarfraz

  2. 4

    Code:

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

    Fehler:

    Zeile 3: 'attr' statt 'src' wie '.attr("src","images/stor1.jpg");'

    Zeile 4: '}); " fehlt am Ende der Aussage

    Richtige code:

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

    Wenn Sie möchten, um das Bild zu ändern, hängen Sie auf den link, können Sie 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>

    Einer Verbesserung: "img#storyimg" als Selektor ist ok, aber nur "#storyimg" ist mutch schneller, weil getElementById(..) ist eine native-browser-Funktion. Wenn Sie "img#storyimg" jquery anfordern müssen getElementsByTagName('IMG') und durchqueren Sie in der Liste das element mit der id "storyimg". dies nimmt eine Menge Zeit entspricht, um die direkte Ausführung von "getElementById".
    ID jedem HTML-Element einer Seite sein muss, unice. siehe: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 ("Dieses Attribut weist einen Namen für ein element. Dieser name muss eindeutig sein, in einem Dokument.")

    InformationsquelleAutor Floyd

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

    InformationsquelleAutor derek

  4. 1

    Möchten Sie wahrscheinlich $('img#storyimg').attr('src','path/to/new/image.jpg');

    BEARBEITEN: JINX musst aber mir eine Cola! :o)

    eins noch, Versuchs mit .mouseenter() und mouseleave().

    InformationsquelleAutor TCCV

  5. 1

    Ich weiß, es ist lange her, dass die Frage gestellt wurde, aber vielleicht könnte jemand brauchen noch andere Lösungen. Also dachte ich, vielleicht könnte ich auch helfen.

    Konnte man auch mit dem ".hover ()" - Funktion, vielleicht so:

    Diesem zwischen <head> und </head>:

    <script type="text/javascript">
    $(document).ready(function() {
        var src_path = "path/images/";
        var src_suffix = ".jpg";                   
        $('.yourclass').hover(                         
            function () {
            $(this).addClass("hover");
            var active_id = $(this).attr('id');     
            $('#' + active_id + '_pic').attr("src", src_path + active_id + '_big' + src_suffix); 
            },
            function () {
            $(this).removeClass("hover");
            var active_id = $(this).attr('id');
            $('#' + active_id + '_pic').attr("src", src_path + active_id + '_small' + src_suffix);
            }
        );
    });
</script>

    Und diese zwischen <body> und </body>:

    <div class="fruits">
<a href="#" class="yourclass" id="apple">
<img id="apple_pic" src="files/images/apple_small.jpg" alt="apple" title="apple" />
</a>
<!--  -->
<a href="#" class="yourclass" id="pear">
<img id="pear_pic" src="files/images/pear_small.jpg" alt="pear" title="pear" />
</a>
</div>

    Auf einer unserer websites, es funktioniert gut.

    Mehr Informationen über die ".hover ()" - Funktion, könnten Sie hier finden: http://api.jquery.com/hover/

    InformationsquelleAutor pyretta

Schreibe einen Kommentar