Weird asteriks when hovering image?

Question!

I have a jcarousel plugin for Magento that shows featured products. When you hover over the image it displays a bigger version of the image. In that bigger version there is an * (asteriks) in the top-left corner.

It's sort of hard to explain, you can see it in action on http://www.dooor.nl/ when you hover over the caroussel in the middle of the page (above the newsletters, below the moving slider).

I don't know how it got there, it's not in the original plugin. Problem is that I can't access it with firebug to see where its coming from since I can't select hovered images.

Edit: Here is the original plugin: http://www.hellothemes.com/demo/?theme=hellowear. You can see there there is no asteriks.



Answers
It's on your image - if you look in the top left corner in Photoshop, there's a small asterisk-shaped area that's transparent. As the background of your preview is dark grey, it comes through the image and looks like an asterisk.

If you don't want to fix all the images themselves, you can add this to your CSS:

#preview img {
    background-color: white;
}


Try this:

go to this file

<script type="text/javascript" src="http://www.dooor.nl/skin/frontend/default/tribeca/js/imgpreview.js"></script>

and remove c from this line:

jQuery("body").append("<div id='preview'><img src='"+ this.rel +"' alt='Loading' /></div>");

Also, to make the hovered image stay at this place, comment out this whole section in the same file:

jQuery("a.preview").mousemove(function(e){
        jQuery("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    }); 

That way you can hover over the image and check its CSS through Firebug. Let me know what you find

By : asprin


This video can help you solving your question :)
By: admin