如何调整JavaScript Fisheye脚本的放大触发器？

Question

I'm using the jQuery Fisheye plugin ( here ) in my site ( link to my site ). As you can see there are 9 "bubbles" and when you move your mouse on one of them, it will be enlarged.

Is it possible to have one of those "bubbles" on its maximum size as default, so when a visitor loads the page he will see 8 small bubbles and one "maximum-sized" bubble?

EDIT: I tried to add a new css "class" for the "big bubble" effect. Now the problem is (as you can see in the link attched above) that the big bubble appears to be on-top of the small bubble to the left.

I tried to add margin and padding to the big-bubble style but it doesn't help, I guess because all the small bubbles are float:right .

My html/php code:

<script type="text/javascript">

    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 150,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 80,
                    proximity: 80,
                    halign : 'center',
                    valign : 'bottom'
                }
            )


            $('#auto_big').addClass('dock-item2-big');

            $('.dock-item2').mouseover(function() {
                $('#auto_big').removeClass('dock-item2-big');
            });
            $('.dock-item2').mouseout(function() {
                $('#auto_big').addClass('dock-item2-big');
            });


        }
    );

</script>
    <div class="dock2" id="dock2">
  <div class="dock-container2">
<?php $categories = $this->requestAction('categories/index/direction:asc/limit:9'); ?>
<?php foreach ($categories as $category): ?>

    <?php
        if($category['Category']['id'] == 27)
            $special = " id='auto_big'";
        else
            $special = "";
    ?>

  <a class="dock-item2" href="/categories/show/<?=$category['Category']['id'];?>"<?=$special?>><span><img src='/img/cat/<?=$category['Category']['id'];?>_title.png'></span><img src="/img/cat/<?php echo $category['Category']['picture']; ?>" alt="<?php echo $category['Category']['name']; ?>" /></a> 
 <?php endforeach; ?>
  </div> 
</div>

My style:

/* dock2 - bottom */
#dock2 {
    width: 100%;
    bottom: 0px;
    position: relative;
    left: 0px;
}
.dock-container2 {
    position: absolute;
    height: 50px;
    /*background: url(images/dock-bg.gif);*/
    /*padding-left: 20px;*/
}
a.dock-item2 {
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px; 
    color: #000; 
    bottom: 0px; 
    position: absolute;
    text-align: center;
    text-decoration: none;
}
.dock-item2 span {
    display: none;
    padding-left: 20px;
    font-size:20px;
    float:right;

}
.dock-item2 img {
    border: none; 
    margin: 5px 10px 0px; 
    width: 100%; 
}



a.dock-item2-big {
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 200px; 
    color: #000; 
    bottom: 0px; 
    position: absolute;
}
.dock-item2-big span {
    display:block;
    padding-left: 20px;
    font-size:20px;
    float:right;

}

.dock-item2-big img {
    border: none; 
    width: 220px;
}

Answer 1

As the items start to resize when the mouse is near (not over), i'd say it's based on mouse location. As you can't move the mouse cursor with javascript, I don't think you can trigger this.

Time to find another method, such as setting the proportions of your large element in CSS. If you open up Firebug (or another inspector) and watch the element, you'll see the left and width being changed as the mouse gets nearer. Pick some values and set them via CSS.