0

Please, have a look at http://users.sch.gr/ellhn/. The HTML code behind this page is as follows:

      #squared1.over {
      background: green;
     cursor: pointer;
     }

     #squared2{
  position: absolute;
  left: 250px;
  cursor: pointer;
     }
 </style>
 </head>
 <body>
 <img src="img/squared1.png" id="squared1" width="195" height="147" class="rollover">
 <img src="img/squared1.png" id="squared2" width="195" height="147"   
  class="rollover">     

 <script src="js/shaperollover.js"></script>    

 <script>
 $( "#squared2" ).hover(
        function() {
           $( this ).animate( { left:300 }, 500 );
           }, 
       function() {
           $( this ).animate( { left:250 }, 500 );
           }
    );

    </script>
  </body>
  </html>

I am going to be crazy. I have no way to vanish this damned transparent background. The problem of course is (as you may see at the page) that hover effect begins outside of the visible part cause to transparent background. In the first picture, by applying a Javascript plugin (called shaperollover.js) the effect begins in the right place, however this is true only through css property (#squared1.over - to be honest I do not know this over property). Unfortunatery, Jquery hover or mouseover function considers the whole picture with the background and it works like the second one.

Is there any way to embed this over property to jquery or some way to benefit from this plugin? I want to add animation on hover and this is impossible through just pure css. Or something more simple I do not know to make pictures without background? Thank you very much

Unknown developer
  • 5,414
  • 13
  • 52
  • 100

2 Answers2

1

Is this what you wanted to do? That uses CSS3, but it would be easy to implement in JavaScript if that is your desire.

<div class="funky-image"><img src="http://users.sch.gr/ellhn/img/squared1.png" alt="" />
.funky-image, .funky-image img{
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.funky-image:hover{
    padding-left:300px;
}
.funky-image:hover img{
    background-color:#0f0;
}

If that is not the goal, can you be more specific as to what you want accomplished? That is very unclear to me.

Elimn
  • 150
  • 1
  • 7
  • I want hover effect to be fired only when the mouse is over the visible portion of the image and not over the transparent one. – Unknown developer Oct 19 '13 at 17:31
  • Non rectangular hover areas can be accomplished with image maps. This question's top answer should get you started on the right path: http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map – Elimn Oct 19 '13 at 19:32
1

First of all, there is no .over property that I know of, perhaps you meant 

#squared1:hover{
   //properties here
}

Second, if I'm not mistaken, most or all .png are of transparent background.

Via jQuery, you can have something be done via the .hover event for example:

$('#idOfElement').hover(function(){
  $(this).animate({left: 250}, 500);
})

Can you be more clear of what you would like to accomplish, I'm having a hard time understanding what is it that you need exactly.

CodeTrooper
  • 1,890
  • 6
  • 32
  • 54
  • Sorry to be unclear. Notice the 2 pictures where the hover effect is fired. I want to be fired only when the mouse is over the visible portion of the image and not over the transparent one. Also, if I replace #squared1.over with #squared1:hover the first picture does not work the way I want. However, I do not understand what #squared1.over means... – Unknown developer Oct 19 '13 at 17:29
  • That is not possible, see the image is a square and you can't possibly make it the exact shape you want, you can make it a circle and other polygons with some CSS/Javascript work, but you can't shape an image like that. – CodeTrooper Oct 20 '13 at 00:16