将onmouseover添加到img标记中

时间:2011-03-07 04:27:59

标签: jquery

你可以帮我解决一下这个剧本:)。

我有一个脚本来加载图像并显示一次

<script type="text/javascript" src="jquery.js"></script>


<div class="spacer"></div>
<div align="center"><script type="text/javascript">
var list_images = 'image1.jpg|image2.jpg';
var images = list_images.split('|');
</script><div class="spoiler-wrap"><div class="spoiler-head folded clickable">Click Here</div>
                <div class="spoiler-body"></div>
</div>


<script type="text/javascript">
function initSpoilers(context)
{
    var context = context || 'body';
    $('div.spoiler-head', $(context))
        .click(function(){
            $(this).toggleClass('unfolded');
            $(this).next('div.spoiler-body').slideToggle('fast');
            var html = $(this).next('div.spoiler-body').html();
            var max = $(images).length;
            // at least 1 image exist
            if(max>0 && !html)
            {
                var ul = $('<ul id="portfolio"></ul>');
                $(ul).appendTo($(this).next('div.spoiler-body'));
                LoadImage(0,max);
            }

            function LoadImage(index,max)
            {
                if(index<max)
                {
                    var list = $('<li id="portfolio_'+index+'"></li>').html('<div class="loading"><img src="images/5.gif" alt="loading..." align="baseline" /></div>');
                                var aaa = $('<div class="highslide" >'+images[index]+'</div>');
                    $('ul#portfolio').append(list);
                    var curr = $("ul#portfolio li#portfolio_"+index);
                    var img = new Image();
                            // image onload
                    $(img).load(function () {
                            $(this).css('display','none'); // since .hide() failed in safari
                            $(this).addClass('m_picture');
                            $(aaa).html(this);
                            $(curr).html('').append(aaa);
                            $(this).fadeIn('slow',function(){
                                LoadImage(index+1,max);
                            });
                    }).error(function () {

                        $(curr).remove();
                        // trigger the next image
                        LoadImage(index+1,max);
                    }).attr('src', images[index]);

                }
            }
        })
    ;
}
$(document).ready(function(){
    initSpoilers('body');
});
</script>  

我的图片会像:

<ul id="portfolio">

<li id="portfolio_0"><div class="highslide"><img style="" src="1.jpg"></div></li>
<li id="portfolio_1"><div class="highslide"><img style="" src="2.jpg"></div></li>

</ul>

知道我想在img标签中添加一些并显示

<ul id="portfolio">

<li id="portfolio_0"><div class="highslide"><img style="" src="1.jpg" onmouseover="TJPzoom(this);" ></div></li>
<li id="portfolio_1"><div class="highslide"><img style="" src="2.jpg" onmouseover="TJPzoom(this);" ></div></li>

</ul>

可以帮帮我吗? 。我认为可以编辑

$(this).addClass('m_picture'); to add  onmouseover="TJPzoom(this);" 

但我不知道该怎么做。

感谢堆叠过流,每个人都帮助我:)。

3 个答案:

答案 0 :(得分:0)

尝试:

$(this).mouseover(function()
{
    TJPzoom(this);
});

答案 1 :(得分:0)

有几种可能的方法。

您可以使用jquery使用.hover或.mouseover事件来触发TJPzoom(this);

例如(在加载dom之后,或在插入标签之后):

$("#portfolio li").mouseover(TJPzoom($(this)));

$("#portfolio li").hover(TJPzoom($(this)));

代码:

 $(this).addClass('m_picture'); to add  onmouseover="TJPzoom(this);" 

适当的(我相信,如果我错了,请纠正我)代码将是:

$(this).attr('onmouseover', 'TJPzoom(this)');

希望这有帮助

答案 2 :(得分:0)

$(document).ready(function(){
    $("div.highslide img").mouseover(function(){TJPzoom($(this));});
});