Image button problems

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?

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.

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.

Are they buttons set up with states?

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

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.

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.

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

undefined

Gonna do a test with it George, to see if its Lectora or something in your setup.

Regards,

Math

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.

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 ...

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...

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

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.

Hi George,

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

Regards,

Math

undefined

PS. if im not mistaken the SVG is only generated for the button.. as a 'invisible' click element on top. Not your images.

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.

Try this. Insert an HTML Extension - Cascading style sheet with the following to your project.

button::-moz-focus-inner {

border: 0;

}

Darrel

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.

The attached works in Firefox on my computer. Try it on yours and let me know.

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?

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.

Hi Darrel, I applied the CSS and tested in Firefox, but it didn't work.