The images in my html widget look blurry!

Hey there, I'm making some html widgets for my book using HYPE. When I insert this into the ibooks the program shows the preview image in crisp high quality but when I preview it on the iBook, the figure looks somewhat blurred. When I tap on the figure to enlarge it and make it interactive, everything looks fine and crisp, it's only the preview window before it's enlarged that doesn't looks so good. I even tried replacing the preview with a separate picture and previewing that but whatever I do, the preview just doesn't look sharp. Does anyone have any solutions I can try?
Thanks,
Caleb

Blurry preview icon for HTML widget
The best way to handle this issue is to make the preview icon transparent and place it over your own custom reference graphic on the page.
1- Place on the page the graphic you will be using as the reference icon for the widget
2- Place your widget on top of the custom graphic icon. Make sure it is in "Front". Also make the preview icon is as small as possible.
3- Click on the preview icon TWICE and make its transparency "0". If you only click the preview icon once the Transparency slider will not become active.
4- Now, when you preview the book, your Widget Link will open your custom HTML Widget and both will display at full resolution.
A bonus result of doing this... Since your link is transparent you can make it as large as needed to make it a large enough touch target.

Similar Messages

All of a sudden the photos taken with my IPad look blurry, any idea why? I just deleted a lot of videos and unwanted photos.

After I deleted some videos and photos, I am having trouble with my camera. The photos I have taken since are blurry, any idea why?

First double click the home button and swipe to close any open apps. Next reset, press and hold the home and power buttons for 10-15 seconds till the Apple logo appears. Release both buttons. Wait 15-20 seconds till your iPad starts on it's own. Try taking a photo.

SUDDENLY the image from LR to psd looks different

Never before.
Do what please? Nothing changed from the previous conversion.
Photo>Edit in >smart object in PS.
PhotoPRo space
left is psd from LR, right is NEF adjusted in LR
Mac OSX.8.2

again, the nef adjusted on left, and then the conversion to photoshop on right.
as if no changes were made, yet the camera raw from the psd file has all the
adjustements as the nef from LR

Photos on Wordpress Blog look blurry on iPad or Iphone? Why is that?

Hi,
Is there any reason why the images on blogs I post look blurry when I look at them on an iPhone or an iPad?
They look perfect on a PC or Mac but opened on an iPhone or an iPad they look low res.
Is there any specific way I need to save them before I upload them into the blog?
Any help is appreciated.
Thank you!
www.loridorman.com/blog

I hear what you're saying but I'm not sure how that will effect apps. I can see that my music downloads are not showing but my Apps seem to be in place.
I tried to sign in with the old ID but the last password didn't work. I requested a reset but the email with the reset link never arrived. What must I do in a case like that.
PS - I figured out how to sign out manually and I can now connect to the new ID on all my devices. I just need to get the old ID working again.

Get in the images in Lightroom to look like import screen

When I go into lightroom to import my raw file the images in the import screen looks great, I import them with no present and standard previews.
As the images come in they still look great until the second task when the standard thumbnails are being generated then they change drasticlly, I have cleared all my defaults and still have this problem can anyone please advise.
Thank you in Advance

http://www.lightroomforums.net/index.php?topic=1500.0

Upscaled images look blurry, is there a way to sharpen them? In particular, zooming on pages with images that actually contain only text are hard to read.

I am zooming in on my homework in mastering physics. I am using a large screen and sitting far away. It uses a lot of images containing the text I need to read, but when the images are upscaled, they become very blurry and hard to read. A simple sharpen effect after it is resized would fix the problem. Is there a way to do this in firefox? like a command line switch or maybe something in about:config? Thanks

It may sound counter-intuitive, but could you try disabling graphics hardware acceleration? Since this feature was added to Firefox, it has gradually improved, but there still are a few glitches.
You usually need to restart Firefox in order for this to take effect, so save all work first (e.g., mail you are composing, online documents you're editing, etc.).
orange Firefox button ''or'' classic Tools menu > Options > Advanced
On the "General" mini-tab, uncheck the box for "Use hardware acceleration when available"
If you restart Firefox, is the issue resolved?

What video format is supported when creating a HTML widget?

It doesn't support mp4, m4v amd mov. I tried video/mp4, video/m4v and video/quicktime, they don't work. Anything wrong with the following code. Pls help. Thanks.
<video id="sourcevid" autoplay="true" loop="true">
<source src="00048.mp4" type="video/mp4" />
</video>

Thanks for the tip, Rycankun. I just tried changing my m4v ext to mp4 and the video worked just great in an HTML widget with a HTML5 video tag. The video opens in a new page the same way any html widget does with the video centered on the page -- just what we were looking for.
I commented on your other post about HTML widget and left some additional info on encoding videos so I thought I'd paste that same info here as it's more relevant to this thread:
A few thoughts about encoding -- we started out using the documented Quicktime 10 > Export > Format iPod touch & iPhone 3GS but there's no control over the video/audio compression settings. We then went to Compressor and used a modified version of the SD or HD preset for Apple devices - had more control but still weren't able to get the files as small as we needed at the quality we desired. We finally have settled on using Handbrake to create our mp4 using the iPhone & iPod Touch preset and adjusting the Constant bitrate RF value and audio settings to get the quality we desired. The resulting mp4 is not directly useable in iBA but it's easy to convert the mp4 container to a m4v contrainer using Subler (for Mac) to transcode to Main @ 3.1 profile. Transcoding with Subler doesn't re-encode the video or audio - those tracks just pass through and Subler converts the movie container to the selected Main @ 3.1 profile. There's probably a way to create the m4v directly from Handbrake with Main @ 3.1 profile but so far the closest I've gotten is Baseline @ 3. Anybody have any thoughts on this?

How to separate content area from the image area in cs6

how to separate content area from the image area in cs6? looks just fine in design view but when opened up in explorer my text /content area is over the image area. the content is suppose to be below the image not over it. How do I move it down? Everything I have tried has not worked ;(

Is your image in the CSS (background) or the HTML (foreground)?
Try copying and pasting this code into a new, blank document. Change placehold.it images to your own. Save and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with CSS 2-Col Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
/**CSS Reset**/
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
img {
    width: 100%;
    vertical-align: baseline;
/**Layout**/
body {
    padding: 0;
    width: 90%; /**adjust width in px or % as desired**/
    margin: 0 auto; /**this is centered**/
    background: #CFF;
    color: #505050;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    box-shadow: 2px 2px 4px #333;
header {
    margin: 0;
    padding: 0 1%;
    width: 100%;
    background: #B00202;
    color: #FFF;
/**top menu**/
nav {
    background: #EAEAEA;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold
nav ul {
    margin: 0;
    padding: 0;
nav li {
    list-style: none;
    display: inline-block;
    margin: 0 3% 0 5%;
/**menu link styles**/
nav li a {
    color: #666;
    text-decoration: none;
    line-height: 2.5em;
    padding: 6px;
    border: 1px solid #CCC;
/**on select or mouseover**/
nav li a:hover, nav li a:active, nav li a:focus {
    background: #CCC;
    color: #505050;
#wrapper {
    background: #EAEAEA;
    overflow: hidden; /**float contaiment**/
/**main content**/
article {
    padding: 0 2%;
    background: #FFF;
    float: left;
    width: 70%;
figure {
    width: 80%;
    margin: 4% auto 4% auto;
    text-align: center;
/**right sidebar**/
aside {
    padding: 0 2%;
    float: left;
    width: 30%;
footer {
    clear: both;
    background: #B00202;
    color: #FFF;
    text-align: center;
    margin: 0;
/**typography**/
header h1, header h2 {
    display: inline;
    color: #F5DD83;
    padding: 0 1%;
h3 {
    color: #2294AE;
    margin-bottom: 0
p { margin: 0 0 1em 0 }
figcaption {
    text-align: center;
    font-style: oblique;
    font-size: small;
    color: #2294AE;
</style>
</head>
<body>

<header> <h1>Sitename</h1>
<h2>| Responsive CSS Layout</h2>
</header>

<nav>
<ul>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
</ul>
</nav>
<div id="wrapper">

<img class="banner" src="http://placehold.it/1056x100/198EBA/FFFFFF&text=Banner.jpg" alt="banner" />
<article> <h3>Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<figure> <img src="http://placehold.it/500x325" alt="placeholder">
<figcaption>Figure 2 Caption</figcaption>
</figure>
</article>

<aside> <h3>Aside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<hr>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<hr>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</aside>
</div>

<footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
</body>
</html>
Nancy O.

Update images in an HTML overlay

I edited the images in my HTML overlay, but the filenames are the same. Is there a clever way to force Content Viewer to update the images?

I edited the images in my HTML overlay, but the filenames are the same. Is there a clever way to force Content Viewer to update the images?

Where are the image files located?

hey guys, my book is 75 mb and I can only guess that it's because my images are Too big. I don't know how to get the file sizes down because I replaced them but they must still be retained in the image folder because when I look at the size its 75mb. Does anyone know where the images are located?

Finding out where the images are held doesn't really help – here's why:
iBA a files aren't really document files – they're more like zipped folders. iBA does a whole heap of background stuff to make the book work. When you drag an or import an image into iBA, it gets filed into a certain place within that folder structure, and presumably 'logs' that location in some xml-type wizardry somewhere else in that folder structure.
Because of this, it's not a great idea to muck around with any of that stuff - it often makes things worse, not better.
As for image size - as Vinny said - all you can do is make the images 2048 x 1536 if you want view them full screen. That looks best on a Retina display, as almost all iPads being sold now are.
I don't know what your intentions are with the project, but in my experience, 75Mb pretty small. Is 75Mb the iBA file or an exported .ibooks file? Once a book gets exported to .ibooks format, the file size comes down. The iBA files I have worked on are much larger – the smallest being about 975Mb, going up to about 3.25Gb.

Why is the image in iMovie reversed?

Why is the image in iMovie reversed? My right hand shows as the left hand and what should be over my right shoulder shows as being over my left. I cannot find any info regarding this. When I open iChat the image is oriented correctly.

it looks stretched taller.
I think you have Anamorphic material.
Start a new Sequence. Go to Sequence > Settings and click the Anamorphic checkbox.
Select a clip in the Browser. Press command and 9. Find Anamorphic in the column on the left.
Click next to it in the Clip column to place a check mark there too.
Edit into the timeline.
Does that look better?

After importing an image from cs5 back into lightroom, lightroom is making the image darker

Lightroom is making my images darker after i edit them in photoshop cs5 and I dont know why. When i open the image back into photoshop it looks fine. Even when i save it as a jpeg lightroom is making the image darker. When i imported the raw image into lightroom before i edited into photoshop it looked fine. Is there a way to fix lightroom?

See screen shot:
Click on the two small triangles and under <Lightroom General Presets> select <Zeroed>. Sorry, it seems that the option <None> is not available anymore in Lr 4.3. But <Zeroed> has the same effect.
Alternatively, in the Develop Module, bottom right, just above the film strip click on <Reset>. See screen shot:

Why do the images break up?

Hi All.
Since I have switched from my Mac Mini over to the new Intel Mac Mini 1.66GHz/1GB RAM/100GB HDD, my display shows very frequent strange image and text break-ups. I tried to take a screen picture, but that corrected it. I have been able to take a picture with my digital camera, but I can't post it hers.
Following the advice given by a friend who works with computers, I've reset the PMU, the PRAM. I've tried to change the resolution and now I'm at my wit's end. The image breaks up and all looks like piles of bricks. Highlighting it cleans it up.
I have owned many Macs over the years, currently still have my "old" Mini as well as two Powerbooks (all have driven the monitor flawlessly).
Help, please.
IntelMini + 23" Cinema HD Apple Display Mac OS X (10.4.5)

Hi Santa
I am not sure about your trouble, but I have experienced some similar issues with my display on my PB. It often happen while scrolling up and down pages after a couple of hours of browsing. What happen to me is few lines of text or images getting jammed up, reproducing themselves, making them unreadable.
Effectively once a new window is over the "bricks effects" it refresh and disapear. I have been battling between repairs, and the tech can't see it because they are not using the comp, but just checking it by time to time.
I have added a shortcut of grab in my tool bar, every time my issue appears I drop everything and open grab and take a picture of the screen, as proof for the techs. The good thing about it is that you have the time and date captured with it.
I hope this help

How to disable fading on dragged images while still being able to drag the images themselves?

When you drag an image, it will be faded out from where your mouse was when you dragged it. I want to be able to see the whole picture, no fade. But I still need to be able to drag the image itself. I've looked at nglayout.enable_drag_images in the config, but it just stops me from being able to drag the image at all.

I'm sorry, but I don't think there is a way to do this... Most operating systems fade items when they are being dragged, and I don't know if there is a way to counteract that without custom code to handle drag and drop.

Word documents have a logo image imbedded in Preview & Quick Look

System information:
MacbookPro 17"
2.5 GHz Intel Core 2 Duo
4 GB 667 MHz DDR2 SDRAM
Snow Leopard OS X Ver. 10.6.2
MS Word 2008 for Mac Ver. 12.2.3 (091001)
Issue:
I can see an image (a black and white logo that I recognize, not Apple or MS related) in certain document previews in Finder. I also see the image if I use Quick Look of the same documents. To my knowledge, I never inserted or embedded this image into the document. If I open the document, the image does not appear. I have tried using the various Views of the document to find and remove the image, but it does not appear in any View type, once opened. The image is a logo that a colleague of mine created, but I have never downloaded it and I have not e-mailed the document back and forth with him. If I copy/paste the text from the affected document to a new document, this seems to eliminate the image, but I am concerned that this may be malicious, that it may have come from using a networked drive at work.

I have noticed the same. Seems like a genuine bug in preview.
Try this for laughs: Open up a picture in Preview and note its too warm colors. Make a screenshot, and view in preview next to the original image. The now magically warmer colors prove this is indeed a bug in preview.
Lightroom, PS, Safari, Opera all show the images in question (JPG, embedded profile: sRGB IEC61966-2.1) consistently correctly, with preview being the only exception a lazy comparison could find.
EDIT: This happens only on my external TFT. If I move both the Photoshop and the preview windows to the built-in screen, the Photoshop colors "snap" to look the same on both screens (and the same as preview on the built-in TFT).
There seems to be a problem with preview always applying (correct) color correction for the built-in TFT regardless of whether the image is actually displayed there or on another display. This is probably also only noticeable if built-in TFT and external display have noticeably different color responses (and thus corrections), and only when their colors are corrected.
This really is an annoying bug for photographers or other creative people (which Apple prides itself to cater to).
Message was edited by: gnol

The images in my html widget look blurry!

Similar Messages

Maybe you are looking for