Image button problems

georgeb
georgeb Community Member Posts: 43
Hi there, I got some problems with image buttons:
  • The images get resized and blurry on the left side
  • They are not positioned where they are supposed to be

Comments

  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    What version of Lectora are you using? It appears your previewing the course in HTML, is that correct?  What browser and version are you viewing the content in?
  • georgeb
    georgeb Community Member Posts: 43
    It's Lectora 16 and yep it's in the browser.

    All browsers got same thing, I saw in the published images folder some new images that became bigger than the original I imported.
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    Are they buttons set up with states?
  • georgeb
    georgeb Community Member Posts: 43
    Yes, I want to button to have another image as rollover (white icon on blue background, rollover background is orange, if this is possible in another way will also be nice), it automatically got 4 states I see.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Hi George, allthough i am not sure if this is the problem...it might be..

    Check your assets for the dpi. If thats too high ( 72 dpi or 96 dpi should work fine ) then it might causing it. Especially when developing on another monitor then the one you are developong on.

    Offcourse you can always send a .awt and i can check it.

    En wij kunnen natuurlijk in het Nederlands praten ;-)

    Met vriendelijke groeten/Kind regards,

    Math
  • georgeb
    georgeb Community Member Posts: 43
    My images are exported for web on 72dpi, I tried to make some new files but the same thing happened.

    I attached my test file, the yellow box = 20px wide and the button I placed is at x=20, but as you see the published result doesn't match what I set up.
  • georgeb
    georgeb Community Member Posts: 43
    To me it looks like a bug, I also see my original 2 images in the published folder, probably the copy/conversion made by Lectora ruins it.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Gonna do a test with it George, to see if its Lectora or something in your setup.

    Regards,

    Math
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Hi George, checked your sample and did some tests. It is no bug in Lectora16.

    Its an visual and optical thing partly and a screen related thing i encountered in the ancient past a lot when designing and developing for Cd-i.

    The visual and optical thing is the choice of your colors. Due to contrast they give that optical illusion. If you check my image and see the copies i made...then those with more saturated colors and colors closer to the elements object look better.

    The screen related problem is one i learned in the early days of multimedia ( wow, am i that old ;-)
    A one pixel reposition of an image on the x-axis, can make in certain circumstances the difference.In this case the anti-aliasing of your object makes the difference..So instead of putting it on 20, you should put it on 21.

    As you can see in the sample i made a change of color and/or the 1 pixel move make the difference.

    Kind regards,

    Math

     
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    One more tip for rollovers.. if the fit comes precise..as in your sample...make sure the normal image disappears when the over appears... that way if the fit isnot 100% pixelprecise..noone will see.
  • georgeb
    georgeb Community Member Posts: 43
    Well that doesn't make sense... My image is 80x80 pixels, Lectora makes it 84x84, some anti-aliasing blurs its edges (I didn't put the image on 20,5 pixel position or anything like that, just a nice, sharp, integer number) and I have to put the image on 21x to have the image start at 20x position?

    I'll go to Adapt Learning...
  • georgeb
    georgeb Community Member Posts: 43
    Also, Lectora publishes 4 other images that are 'ruined' in the images folder, discarding the ones I imported? Which means 'updating' an image without using Lectora is more difficult than it should be.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    I do understand your confusion. Dont trust on exact numbers, trust on how it looks when published. There is quite a difference ( not only in Lectora, but in all tools alike ) between how it looks in the editors view and the endresult when published.

    Regards,

    Math
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    The issue of images being 'ruined' after publishing i never encountered... Well, if you in the publish settings choose for another compression... But other then that i never encountered it.
  • georgeb
    georgeb Community Member Posts: 43
    I can't fix this, it looks different in IE, Firefox, Chrome, and look, the published folder shows a different button image... I don't have the image conversion on when publishing... am I missing another setting?

    Edit: As you can see, for some reason a SVG is crated, with another size than the original images and the by Lectora converted images ...
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Hi George,

    Gonna recreate your elements... to see what i get.

    Regards,

    Math

     

    PS. if im not mistaken the SVG is only generated for the button.. as a 'invisible' click element on top. Not your images.
  • georgeb
    georgeb Community Member Posts: 43
    The image also looks like it's ruined already in the Lectora editor.

    Only when using just an image, doesn't ruin anything, but an image button does.
  • klaatu
    klaatu Community Member Posts: 988
    Try this. Insert an HTML Extension - Cascading style sheet with the following to your project.

    button::-moz-focus-inner {
    border: 0;
    }

    Darrel
  • georgeb
    georgeb Community Member Posts: 43
    Hi Darrel, I applied the CSS and tested in Firefox, but it didn't work.
  • klaatu
    klaatu Community Member Posts: 988
    The attached works in Firefox on my computer. Try it on yours and let me know.
  • georgeb
    georgeb Community Member Posts: 43
    A colleague has got the same thing, using just 3 pictures a few times, this ended up in his images folder... See attachment.

    Noone else got this?
  • klaatu
    klaatu Community Member Posts: 988
    I'm pretty sure this is not an image problem. Firefox internally adds border and padding space to certain objects. Did you try my attachment because it looks perfect in Firefox and all I did to the file you provided was to add the CSS I suggested.